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、同时显示点、线和多边形

相关推荐
小光学长4 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
吕彬-前端35 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱38 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端