添加点, 线, 以及多边形

地址: https://developers.arcgis.com/javascript/latest/tutorials/add-a-point-line-and-polygon/

学习在地图上如何绘制点, 线, 以及多边形.

Graphics 是一个可视元素, 用于在地图, 场景中显示点, 线, 或多边形, 以及文本等.

Graphics 由 geometry, symbol, 以及 attributes 构成. 并且在点击时可以使用弹出层显示.

一般使用 Graphics 来显示不用连接数据库的数据,例如 GPS 数据等.

本教程介绍如何使用 Graphics 来显示点, 线, 以及多边形.

更多细节可以参考文档:
Graphics
Style 和 data visualization

要点

数据位点使用 GraphicLayer 来引用, GraphicLayer 需要加到 map 中, 是 map 的一个层.
一个点 Graphic 是由一个 Point 和一个 SimpleMarkerSymbol 构成. 需要将 Graphic 添加到 GraphicLayer 中.
一条折线 Graphic 由一个 PolyLine 和一个 SompleLineSymbol 构成. 需要将 Graphic 添加到 GraphicLayer 中.
一个封闭区域 Graphic 由一个 Polygon 和一个 SimpleFillSymbol 构成. 需要将 Graphic 添加到 GraphicLayer 中.
弹出层使用 PopupTemplate 实例来描述, 并将其添加到 Graphic 中.

前置要求

依旧是 ApiKey.

步骤

创建项目
设置 APIKey
添加模块
添加一个 Graphics 层
添加 point graphic
添加 line graphic
添加一个 polygon graphic
创建弹窗
运行 app

详细步骤

创建项目 (略)

依旧是采用 vue3 的脚手架创建项目.

设置 APIKey (略)

这里采用天地图作为底图.

添加模块

需要额外添加: Graphic, GraphicsLayer

import Config from '@arcgis/core/config'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/MapView'
import Graphic from '@arcgis/core/Graphic'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'

const map = new Map({
  basemap: 'arcgis/topographic'
})
const view = new MapView({
  map: map,
  center: [-118.80500, 34.02700],
  zoom: 13,
  container: div.value
})

添加 `Graphic` 层

Graphic 层是用于展示 graphic 对象的容器.

Graphic 层显示在地图的顶层.

可以在地图中添加多个 Graphic 层.

const map = new Map({
  basemap: 'arcgis-topographic'
})
const mapView = new MapView({
  map: map,
  center: [-118.80500,34.02700], //Longitude, latitude
  zoom: 13,
  container: div.value
})
const graphicsLayer = new GraphicsLayer()
map.add(graphicsLayer)

添加 point graphic

一个 point graphic 由 point 和 mark symbol 构成.

point 由经纬度定义.
mark symbol 由颜色与外边线来定义.

import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
// ...
const point = new Point({
  longitude: -118.80657463861,
  latitude: 34.0005930608889,
})

const simplyMarkerSymbol = new SimpleMarkerSymbol({
  color: [226, 119, 40], // Orange
  outline: {
    color: [255, 255, 255],
    width: 1
  }
})

const pointGraphic = new Graphic({
  geometry: point,
  symbol: simplyMarkerSymbol
})
graphicsLayer.add(pointGraphic)

代码与官网略有不同, 已按照 TS 进行修改.

添加 Line Graphic

一个 line graphic 由一个 polyline 和 line symbol 构成. polyline 即多段线, 由一个点序列和 spatial reference (空间参考) 组成

使用 Polyline 和 SimpleLineSymbol 类来创建 line graphic.

const polyline = new PolyLine({
  // 这里可以创建多条线段 
  paths: [
    [
      [-118.821527826096, 34.0139576938577], //Longitude, latitude
      [-118.814893761649, 34.0080602407843], //Longitude, latitude
      [-118.808878330345, 34.0016642996246]  //Longitude, latitude
    ]
  ]
})

const simplyLineSymbol = new SimpleLineSymbol({
  color: [226, 119, 40],
  width: 2
})

const polyGraphic = new Graphic({
  geometry: polyline,
  symbol: simplyLineSymbol,
})

graphicsLayer.add(polyGraphic)

代码按照 TS 规范修改过

API 参考:

添加多边形

多边形使用 polygon 和 fill symbol 来创建. polygon 是由闭环的点序列所构成 (以及空间参考).

涉及到的类有: Polygon, SimpleFillSymbol

import Polygon from '@arcgis/core/geometry/Polygon'
import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol'
// ...
// 多边形
const polygon = new Polygon({
  rings: [
    [
      [-118.818984489994, 34.0137559967283], //Longitude, latitude
      [-118.806796597377, 34.0215816298725], //Longitude, latitude
      [-118.791432890735, 34.0163883241613], //Longitude, latitude
      [-118.79596686535, 34.008564864635],   //Longitude, latitude
      [-118.808558110679, 34.0035027131376]  //Longitude, latitude
    ]
  ]
})
const simpleFillSymbol = new SimpleFillSymbol({
  color: [227, 139, 79, 0.8],
  outline: {
    color: [255, 255, 255],
    width: 1
  }
})
const polygonGraphic = new Graphic({
  symbol: simpleFillSymbol,
  geometry: polygon,
})
graphicsLayer.add(polygonGraphic)

代码按照 TS 进行了调整

创建弹出层

可以点击 Graphic 来弹出层显示. 弹出层由 attribute 和 popupTemplate 构成.

import PopupTemplate from '@arcgis/core/PopupTemplate'
// ...
// 弹出
const attributes = {
  Name: "Graphic",
  Description: "I am a polygon"
}
const popupTemplate = new PopupTemplate({
  title: "{Name}",
  content: "{Description}"
})

const polygonGraphic = new Graphic({
  symbol: simpleFillSymbol,
  geometry: polygon,
  attributes: attributes,
  popupTemplate: popupTemplate
})
graphicsLayer.add(polygonGraphic)