在线绘制 - Draw

简单示例

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import Graphic from "@arcgis/core/Graphic"

const map = new Map({
  basemap: 'dark-gray'
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343]
})

const graphicsLayer = new GraphicsLayer({ title: "graphicsLayer" })

const coordArr = [
  [103.164036, 33.087548],
  [104.596743, 27.652101],
  [116.0584, 33.087548],
]

let pointsGraphic = []

coordArr.forEach((coord) => {
  pointsGraphic.push(new Graphic({
    geometry: {
      type: "point",
      longitude: coord[0],
      latitude: coord[1]
    },
    symbol: {
      type: "simple-marker",
      style: "square",
      color: "blue",
      size: "8px",
      outline: {
        color: [ 255, 255, 0 ],
        width: 3
      }
    }
  }))
})

graphicsLayer.addMany(pointsGraphic)

mapView.when(() => {
  const sketch = new Sketch({
    layer: graphicsLayer,
    view: mapView,
    // creationMode: "update", // 创建模式
    defaultCreateOptions: {
      mode: 'hybrid' // click(点击) | freehand(自由) | hybrid(混合)
    },
    visibleElements: {
      // createTools: { // 创建工具
      //   point: false, // 点
      //   polyline: false, // 折线
      //   polygon: true, // 多边形
      //   rectangle: false, // 矩形
      //   circle: false, // 圆形
      // },
      // selectionTools: { // 选择工具
      //   "rectangle-selection": false, // 矩形框选
      //   "lasso-selection": false, // 套索选择
      // },
      undoRedoMenu: true, // 重做按钮
      settingsMenu: false, // 设置按钮
    },
  })

  mapView.ui.add(sketch, "top-right")

  // 创建事件
  sketch.on("create", (event) => {
    switch(event.state) { // start | active | complete | cancel
      case "start":
        console.log("创建开始")
        break
      case "active":
        console.log("创建中...")
        break
      case "complete":
        console.log("创建结束")
        break
      default:
        console.log("创建取消")
    }
  })

  // 重做事件
  sketch.on("redo", (event) => {
    if(event.type === "redo") {
      console.log("redo")
    }
  })

  // 撤消
  sketch.on("undo", (event) => {
    if(event.type === "undo") {
      console.log("undo")
    }
  })

  // 删除事件
  sketch.on("delete", (event) => {
    if(event.type === 'delete') {
      console.log("删除结束")
    }
  })

  // 更新事件
  sketch.on("update", (event) => {
    if(event.aborted) { // 取消操作，一般按下 ESC 触发触发
      return
    }
    switch(event.state) { // start | active | complete
      case "start":
        console.log("更新开始")
        break
      case "active":
        console.log("更新中...")
        break
      default:
        console.log("更新结束")
    }
    switch(event.toolEventInfo && event.toolEventInfo.type) {
      case "reshape-stop":
        console.log("修改形状结束")
        break
      case "move-stop":
        console.log("移动结束")
        break
      case "scale-stop":
        console.log("缩放结束")
        break
      case "rotate-stop":
        console.log("旋转结束")
        break
      case "vertex-add":
        console.log("添加控制点")
        break
      case "vertex-remove": // 右键移除
        console.log("移除控制点")
        break
    }
  })
})

创建模式 creationMode

版本要求：ArcGIS Maps SDK for JavaScript 4.14版本及以上。

定义创建操作完成后的默认行为。默认情况下，用户可以连续创建相同几何类型的图形。

值	描述
continuous	这是默认设置。用户可以继续创建相同几何类型的图形。
single	用户可以创建指定几何类型的单个图形。用户必须在图形创建后选择操作。
update	创建操作完成后，该图形将被选择以进行更新操作。

坐标转换

使用 Sketch 画出来的坐标数据是墨卡托投影坐标系（3857），不能只能使用，需要转换成WGS84大地坐标系（4326，经纬度坐标）

import * as projection from "@arcgis/core/geometry/projection"

// ...

sketch.on("create", (event) => {
  if(event.state === 'complete') {
    const geometry = projection.project(event.graphic.geometry, { wkid: 4326 })
    // ...
  }
})

异步追加

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import Graphic from "@arcgis/core/Graphic"

const map = new Map({
  basemap: 'dark-gray'
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343]
})

const graphicsLayer = new GraphicsLayer({ title: "graphicsLayer" })

mapView.when(() => {
  const sketch = new Sketch({
    layer: graphicsLayer,
    view: mapView
  })
})

// 异步追加一个Polygon
setTimeout(() => {
  graphicsLayer.add(
    new Graphic({
      geometry: {
        type: "polygon",
        rings: [
          [
            [-97.06138,32.837,35.1,4.8],
            [-97.06133,32.836,35.2,4.1],
            [-97.06124,32.834,35.3,4.2],
            [-97.06138,32.837,35.1,4.8]
          ]
        ]
      },
      symbol: {
        type: "simple-fill",
        color: [227, 139, 79, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 1
        }
      }
    })
  )
}, 3000)