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);

Arcgis使用过程（三）——Layers图层之GraphicsLayer图层的使用

1、认识GraphicsLayer并创建GraphicsLayer图层

1 认识GraphicsLayer

2 创建GraphicsLayer：

2、绘制内容

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

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

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

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

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