ArcGIS API JS实现某个区域的底图高亮效果

效果

直接上代码

      const graphicsLayer = new this.esri.GraphicsLayer({
        // blendMode: 'destination-in',
        blendMode: 'destination-in',
        title: 'layer',
        spatialReference: { wkid: 32650 }
      })

      this.layer.tileLayer = new this.esri.WMTSLayer({
        url: `${process.env.VUE_APP_RHGIS_ML_API}${uuid}/MapServer/wtms`,
        spatialReference: { wkid: 32650 }
      })

      const groupLayer = new this.esri.GroupLayer({
        layers: [
          this.layer.tileLayer,
          graphicsLayer
        ],
        opacity: 0
      })
      this.map = new this.esri.Map({
        layers: [this.layer.baseLayer, groupLayer]
      })
		// feature是要高亮显示的部分
		graphicsLayer.graphics.add(feature);

思路

• 就是两个图层叠到一块，再通过GraphicsLayer的blendMode属性来控制显示效果
• blendMode还有其他属性可以设置：
  • average
  • color-burn
  • color-dodge
  • color
  • darken
  • destination-atop
  • destination-in
  • destination-out
  • destination-over
  • difference
  • exclusion
  • hard-light
  • hue
  • invert
  • lighten
  • lighter
  • luminosity
  • minus
  • multiply
  • normal
  • overlay
  • plus
  • reflect
  • saturation
  • screen
  • soft-light
  • source-atop
  • source-in
  • source-out
  • vivid-light
  • xor

参考

1. WMSLayer | API Reference | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers