Arcgis使用过程(三)——Layers图层之GraphicsLayer图层的使用

在开发地图项目以来,使用Arcgis接触到了很多类型的图层,我觉得学习的话最先要了解的就是GraphicsLayer图形层,顾名思义,我们可以绘制我们想要的图形 ------ 点、线、多边形等等。

当我们真正通过GraphicsLayer了解到图层上面的标记、显示都是如何形成了之后,再去看其它的图层,像FeatureLayer等图层API会有更深的理解。

1、认识GraphicsLayer并创建GraphicsLayer图层

1 认识GraphicsLayer

(1)Arcgis官方说明

图形层包含一个或多个客户端图形。GraphicsLayer 中的每个图形都在 SceneView 或 MapView 中的 LayerView 中呈现。图形包含离散的矢量几何图形,代表真实世界的现象。(其实说的就是GraphicsLayer中的每个图形都在view中显示,包含点、线和多边形)

(2)GraphicsLayer和FeatureLayer的关系

  • FeatureLayer特征层:可以渲染、查询、标注(下一节再说)
  • GraphicsLayer中创建的图形是源数据,可以通过源数据构建FeatureLayer(这个下一节再说)

(3)GraphicsLayer中创建的图形的特点

  • 可以使用Arcgis提供的编辑小部件进行图形编辑
  • 不同的图形可以显示在同一个图层:一个图层可以同时存在 点、线、多边形

2 创建GraphicsLayer:

创建GraphicsLayer的前提条件是Map对象和View对象都存在

创建GraphicsLayer图层的基本操作分为以下三步:

js 复制代码
// (1)导入API
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";

// (2)创建GraphicsLayer图层对象
let graphicsLayer = new GraphicsLayer();

// (3)将创建的GraphicsLayer图层添加到地图中
map.layers.add(graphicsLayer);

2、绘制内容

上面的操作只是创建了一个GraphicsLayer图层,并把它添加到了Map的layers集合中,但是实际上我们什么东西也看不到,这是怎么回事呢?其实图层确实添加到地图中了,但是我们没有绘制任何东西,其实就是说刚刚创建的GraphicsLayer相当于是一个白板,没有任何东西。想要看到它的存在,需要绘制要显示的内容。

1 认识Graphic以及它用到的属性

(1)Graphic(图形)是现实世界地理现象的矢量表示,也就是在地图上显示的图形对象。

(2)它包含geometry(几何图形)、symbol(符号)和attributes(属性)。

(3)(Graphic)图形显示在(GraphicsLayer)图形层中。

简单来说,就是显示在GraphicsLayer图层中的图形是一个个Graphic图形对象,而每一个Graphic图形对象都由geometry(几何体对象)、Symbol(符号)、attributes(属性对象)构成。本文章先使用geometry创建几何体对象,将其添加至图层中。

2 绘制一个点,并将它显示在地图上

绘制点要使用到的是Point对象,首先要导入要使用到的对象------Graphic和Point。

js 复制代码
//(1)导入Graphic对象和Point对象
import Graphic from '@arcgis/core/Graphic';
import Point from '@arcgis/core/geometry/Point';

// (2)创建点对象的实例
const point = new Graphic({
    geometry: new Point({
        longitude: 108.942342, // 经度
        latitude: 34.260985, // 纬度
        // x: 0, 当前点在屏幕中的x(左上角的[x, y]为[0, 0])
        // y: 0 当前点在屏幕中的y(左上角的[x, y]为[0, 0])
    })
})

// (3)将这个点显示到图层中
graphicsLayer.add(point);

3 绘制一条线,将它显示到地图上

绘制线要使用到的是Polyline对象,首先要导入要使用到的对象------Graphic和Polyline,上面已经导入Graphic,这里只导入Polyline。

js 复制代码
//(1)导入Polyline对象
import Polyline from "@arcgis/core/geometry/Polyline.js";

// (2)创建线对象的实例
const polyline = new Graphic({
    geometry: new Polyline({
        paths: [
            // 线条1
            [
                [108.937254, 34.265552],
                [108.942342, 34.260985],
                [108.947554, 34.256933]
            ],
            // 线条2
            [
                [108.947554, 34.265552],
                [108.942342, 34.260985],
                [108.937254, 34.256933]
            ]
        ]
    })
})

// (3)将这两条线显示到图层中
graphicsLayer.add(polyline);

4 绘制一个多边形,将它显示到地图上

绘制线要使用到的是Polyline对象,首先要导入要使用到的对象------Graphic和Polyline,上面已经导入Graphic,这里只导入Polyline。

js 复制代码
//(1)导入Polygon对象
import Polygon from '@arcgis/core/geometry/Polygon';

// (2)创建多边形对象的实例
const polygon = new Graphic({
    geometry: new Polygon({
        rings: [
            [108.945408, 34.263246],
            [108.949313, 34.263246],
            [108.949313, 34.261260],
            [108.945408, 34.261260],
        ]
    })
})

// (3)将这个多边形显示到图层中
graphicsLayer.add(polygon);

3、同时显示点、线和多边形

相关推荐
慧一居士17 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead19 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app