Arcgis for js4.x点位高亮

1,531 阅读2分钟

背景

继上次的项目,在使用arcgis4.x(我这里使用的使arcgis4.13版本)的时候,需要使点击的点位高亮显示,但这次的arcgis4.x里面的高亮显示对于刚接触的人来说实属有点坑。在arcgis4.x自带的方法里这个高亮的方法只能在 SceneView3D里使用,下面就是在网上查找各种攻略总结的一种在MapView2D使用的方法

注意: arcgis4.x与3.x其中的不同点之一就是当你使用其中某个api市需要单独引用,而不是3.x中的全部引用

在上一篇的使用中已经写过怎么引入,这次就直接开始

首先在arcgis4.x中有一个方法就是点击的点位高亮的,这个方法只能适用于SceneView3D的使用,在MapView2D里不起作用

 // Create a MapView instance (for 2D viewing)
    var view = new MapView({
      map: myMap,  // References a Map instance
      container: "viewDiv"  // References the ID of a DOM element
    });
    let _this=this
    this.view.on(['click'], function (event) {
        _this.view.hitTest(event).then(function (response) {
          //如果点击在 graphic 上
         	if(response.results[0]){
                //判断_this.highlight里面是否有高亮属性
            	if(_this.highlight){
                     _this.highlight.remove()
              		}
                var graphic = response.results[0].graphic;
         //所选graphic 高亮 “view.whenLayerView”调用这个
             	_this.view.whenLayerView(graphic.layer).then(function(lyrView){
                      highlight = lyrView.highlight(graphic)
                    })
                  }
    
                });

这样就可以点击点位高亮了(前提你使用的是在SceneView3D)

坑点来了

ArcGIS API for JS 4.X会出现一个问题,添加进来的FeatureLayer在三维模式下,点击高亮显示,在二维下点击就无高亮的效果。当使用labelingInfo注记要素图层的时候也会出现这个问题,在三维下注记显示,在二维下注记不显示(???)

看看是啥问题

查看官方Api和大神的文档发现,这两个功能都需要WebGL的支持,三维下默认是WebGL渲染,二维下需要代码开启WebGL渲染,说是添加下面代码可以使用WebGL渲染。

    var dojoConfig = {
                has: {
                    "esri-featurelayer-webgl": 1
                }
            }

实际上这代码加了也没有任何用。

  • 只针对托管在ArcGIS Online的地图服务,和ArcGIS Server10.6.1以上版本发布的服务。

  • 对在前端页面自己代码创造的Feature组成的FeatureLayer无法使用

解决方案

可以给地图添加个点击事件,通过点击事件获取geomentry,自己在地图上画一个特殊的颜色出来
    this.view.on(['click'], this.initIdentify)
    initIdentify(eve){
        this.view.hitTest(eve).then(function(res){
            if (res.results.length > 0){
                //所选graphic 高亮
              let graphic = res.results[0].graphic
              let xy = { x: graphic.geometry.x, y: graphic.geometry.y }
              _this.highligh(xy)
            }
        })
    }
    //高亮点
        highligh(graphic) {
          let _this = this
          let x = graphic.x
          let y = graphic.y
          _this.view.graphics.remove(_this.highlight)
          _this.highlight = new _this.graphic({
            geometry: {
              type: 'point',
              longitude: x,
              latitude: y
            },
            attributes: '',
            symbol: {
              type: 'simple-marker',
              color: '#fff',
              outline: {
                color: [9, 16, 211, 0.5],
                width: 100
              }
            }
          })
          _this.view.graphics.add(_this.highlight)
        },

还有个小坑

当你点击其它点位需要清除现有的高亮点,arcgis4.x和arcgis3.x又有不同

在arcgis3.x里有个remove()属性,可以清除所有内容,但是在arcgis4.x中

  • remove(layer) 从layers集合中移除指定的层
  • removeAll() 从layers集合中清除所有

这里,需要调用的是remov(layer)

remover() {
          let arr = this.pointList
          this.view.graphics.remove(this.highlight)
         //当需要清除很多点位,但有不全部清除时
          for (let i = 0; i < arr.length; i++) {
            this.view.graphics.remove(arr[i])
          }
        },