多边形 - Polygon

官网链接：https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html

简单示例

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
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 polygonGraphic = new Graphic({
  geometry: {
    type: "polygon",
    rings: [
      [  // 第1个 ring
        [-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]  // 和起点一样
      ], [  // 第2个 ring
        [-97.06326,32.759,35.4],
        [-97.06298,32.755,35.5],
        [-97.06153,32.749,35.6],
        [-97.06326,32.759,35.4]  // 和起点一样
      ]
    ]
  },
  symbol: {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
})

mapView.graphics.add(polygonGraphic)

更新 geometry

polygonGraphic.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

polygonGraphic.symbol = {
  type: "simple-fill",
  color: [227, 139, 79, 0.8],
  outline: {
    color: [255, 255, 255],
    width: 1
  }
}

圆形区域

import Circle from "@arcgis/core/geometry/Circle"

const circleGeometry = new Circle({
  center: [-113, 36],
  geodesic: true, // 大地线
  numberOfPoints: 100, // 圆的点数
  radius: 100, // 半径
  radiusUnit: "kilometers" // 单位：feet | kilometers | meters | miles | nautical-miles | yards 
});

mapView.graphics.add(new Graphic({
  geometry: circleGeometry,
  symbol: {
    type: "simple-fill",
    style: "none",
    outline: {
      width: 3,
      color: "red"
    }
  }
}));