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

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

主要通过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上也不是完全用不上。毕竟，总算是见过猪跑，不是初学者，完全白板一块。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。