foreword
The general popup is for a single layer. When adding a single layer, a popup event is bound to this layer. In
this case, a problem is actually exposed. If the mouse clicks, there are many pictures. layer?
Each layer is bound to an event that the mouse slides over to display popup, then when the mouse point moves to the top, each layer below will trigger this event, and a lot of popup will be displayed, so how do we solve this problem Well, only the popup of the topmost element clicked is displayed.
Method 1 Each layer is bound to popup
Bind a popup for each layer, but it is necessary to judge whether the first element of features, or the second element when there is a space filter layer blocking it, belongs to this layer, and if so, then display it His popup, if not, will not be displayed
addPopup(layerID){
const self = this
const popup = new mapboxgl.Popup()
let layerId = ''
this.map.on('mousemove',layerID,function (e){
e.preventDefault()
const features = self.map.queryRenderedFeatures(e.point)
// console.log(features)
//鼠标点有要素
if(features.length>0){
let properties = features[0].properties
layerId = features[0].layer.id
//如果被空间过滤图层盖住了，那就选鼠标点所在的第二个图层
if(layerId == 'filterGeoJSON'){
if(features[1]){
properties = features[1].properties
layerId = features[1].layer.id
}
}
// console.log(properties)
//鼠标点的要素需要展示popup，在popup配置里面有这个图层的配置信息的话
if(layerId ==layerID&&layerPopupName[layerId]){
//改变鼠标状态
self.map.getCanvas().style.cursor = 'pointer'
const name = properties[layerPopupName[layerId].name]
let contentData = ''
//配置信息里面如果有lable，就把lable啥的选上，没有就直接显示一个name就可以了
if(layerPopupName[layerId].label){
contentData =layerPopupName[layerId].label+'：'+name+layerPopupName[layerId].units
} else{
contentData =name
}
const content = `
<div style="background: #ffffff;
border-radius: 10px;
padding: 10px;">
${
contentData}
</div>
`
popup.setLngLat(e.lngLat)
.setHTML(content)
.addTo(self.map)
}
}else{
popup.remove()
//改变鼠标状态
self.map.getCanvas().style.cursor = 'grab'
}
})
}
Method 2, instead of binding popup for a single layer, bind popup for the entire map
No longer monitor a single layer, but directly monitor the map, move the mouse point, whether there is an element, if the first layer is a spatial filter layer, then you need to select the second element, and then judge whether there is any in our popup configuration file Configure the popup information of this layer. Not all layers need a popup. If there is a layer that needs to be popup, we will write it in the configuration and then display it.
addPopup(){
const self = this
const popup = new mapboxgl.Popup()
let layerId = ''
this.map.on('mousemove',function (e){
e.preventDefault()
const features = self.map.queryRenderedFeatures(e.point)
// console.log(features)
//鼠标点有要素
if(features.length>0){
let properties = features[0].properties
layerId = features[0].layer.id
//如果被空间过滤图层盖住了，那就选鼠标点所在的第二个图层
if(layerId == 'filterGeoJSON'){
if(features[1]){
properties = features[1].properties
layerId = features[1].layer.id
}
}
// console.log(properties)
//鼠标点的要素需要展示popup，在popup配置里面有这个图层的配置信息的话
if(layerPopupName[layerId]){
//改变鼠标状态
self.map.getCanvas().style.cursor = 'pointer'
const name = properties[layerPopupName[layerId].name]
let contentData = ''
//配置信息里面如果有lable，就把lable啥的选上，没有就直接显示一个name就可以了
if(layerPopupName[layerId].label){
contentData =layerPopupName[layerId].label+'：'+name+layerPopupName[layerId].units
} else{
contentData =name
}
const content = `
<div style="background: #ffffff;
border-radius: 10px;
padding: 10px;">
${
contentData}
</div>
`
popup.setLngLat(e.lngLat)
.setHTML(content)
.addTo(self.map)
}else{
popup.remove()
//改变鼠标状态
self.map.getCanvas().style.cursor = 'grab'
}
}
})
}
The format of the popup configuration file is attached. If you have any needs for this, just write it yourself. For the convenience of reading, I will write the configuration of my simple popup above.
//简单的所有要素popup
export const layerPopupName={
//最大水深
MaxWDepth:{
name:'MaxWDepth',
units:'(m)',
label:'水深'
}
//河网
river:{
name:'河名',
units:'',
label:''
}
}