arcgis for js 4.X 鼠标悬停弹出气泡

Posted 2021-11-24 左直拳

主要通过MapView的事件监控，使用MapView中的Popup对象来完成。

在arcgis for js 4.X中，要实现这个效果，主要通过MapView的事件监控，监控到鼠标悬停，检索相关图层，获得悬停对象，然后使用MapView中的Popup对象，调用其open方法，展示悬停对象的数据。

1、先看效果

2、代码总体结构

/*
	创建一个图形图层，鼠标停在该图层上的对象时，弹出气泡
*/	

//创建图形图层
let gl = getLayer(datas)

//设置事件监听
setEvent(gl)

//将图形图层加入地图
map.add(gl)

3、创建图形图层（GraphicsLayer）

function getLayer(datas){
	let gl = new GraphicsLayer({
	  id: 'layer-test-1',
	  opacity: 0.8
	})
	
	//在绘制该图层中绘制各种对象
	for (let i in datas) {
	  let s = datas[i]
	  let g = new Graphic({
	    symbol: {
	        type: 'simple-marker',
	        // style: 'square',
	        size: ...,//根据不同情况，控制点的大小和颜色
	        color: ...,
	        outline: {
	          color: [ 128, 128, 128, 0.5 ],
	          width: '0.5px'
	        }
	      },
	    geometry: {
	      type: 'point',
	      longitude: s.x,
	      latitude: s.y
	    },
	    attributes: {//寓数据于图形属性
	      code: s.code,
	      name: s.name,
		  ...
	    }
	  })
	  gl.add(g)
	}
	
	return gl
}

4、添加事件

function setEvent (gl) {
  let view = map.view
  
  let mouseOn = view.on('pointer-move', function (event) {//在MapView中添加鼠标监控事件
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => { // 检查图形是否属于感兴趣的图层
          return result.graphic.layer.id === gl.id
        })
        if (results.length > 0) {
          let g = results[0].graphic
          let geo = g.geometry
          let point = new Point(geo.x, geo.y, view.spatialReference)
          view.popup.open({ location: point,
            title: '标题',
            content: '内容，html格式'
          })
        }
      } else {
        view.popup.close()
      }
    })
  })

  gl.on('layerview-destroy', function (event) {//当该图形图层关闭时移除该鼠标监控事件
    mouseOn.remove()
  })
}

MapView是全局性的，当我们创建一个图层，然后添加一个鼠标监听事件，很自然的，当该图层关闭时，应当移除该事件。注意view.on()会返回事件对象，利用它就可以实现移除。还有一个问题，假如MapView多次添加监听事件，比如不同的图层都添加一个，会相互影响吗？我估计是不会，系统应当做了处理。就好像jquery中，我们不停地通过$(function(){})来绑定window.onload事件，不管写多少个，都没有问题，都有效，不会冲突。

4、弹出气泡

代码就是监听事件里的，再摘录一次，方便讲解。

let g = results[0].graphic//悬停所处对象
let geo = g.geometry
//注意坐标系要与view保持一致！这个非常重要！否则可能会报错，说找不到.x之类
let point = new Point(geo.x, geo.y, view.spatialReference)
view.popup.open({ location: point,
    title: '标题',
    content: '内容，html格式'
})

5、后记

4.X与3.X不同，好多东西都变了。总的感觉，4.X代码比3.X更简洁一些。可能3.X需要保持向下兼容，所以好听一点就是个百宝囊，不好听就是过于臃肿，不够统一？但之前已经习惯了3，从3跨越到4,刚开始觉得很别扭，十分抗拒，感觉怎么啥都没有了，似乎功能没有3那么强了。其实这是不可能的，4肯定比3功能更强，之所以有这种感觉，是因为4将许多东西重新归类整理，位置变了，用法也有改变。有一些舍弃也不奇怪，但这肯定无损框架功能。不过，3的经验，在4上也不是完全用不上。毕竟，总算是见过猪跑，不是初学者，完全白板一块。