vue3 + arcgis.js4.x---地图遮罩

import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import Graphic from '@arcgis/core/Graphic'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import Polygon from '@arcgis/core/geometry/Polygon'
import anHui from '@/assets/json/anHui.json'
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'


window.customMap = mapInit.initMap()
const graphicsLayer = new GraphicsLayer()

const polygon = new Polygon({
  rings: anHui.features[0].geometry.coordinates
})
const viewExtent = new Polygon({
  rings: [
    [-180, 90], // 左上角
    [180, 90], // 右上角
    [180, -90], // 右下角
    [-180, -90], // 左下角
    [-180, 90] // 闭合
  ]
})
const outsidePolygon = geometryEngine.difference(viewExtent, polygon)

// 地图遮罩
const graphic = new Graphic({
  geometry: outsidePolygon,
  symbol: {
    type: 'simple-fill',
    color: [0, 0, 0, 0.8],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
})
graphicsLayer.add(graphic)

// 显示的图层
const outsideGraphic = new Graphic({
  geometry: polygon,
  symbol: {
    type: 'simple-fill',
    // color: [255, 0, 0, .4],
    outline: {
      color: [255, 255, 255, 1],
      width: 1
    }
  }
})
graphicsLayer.add(outsideGraphic)

window.customMap.map.add(graphicsLayer)