0
点赞
收藏
分享

微信扫一扫

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


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

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

1、先看效果

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

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


举报

相关推荐

0 条评论