问题描述
我试图为我的数据重现此示例“ [通过替换列表过滤符号] [1]”,这是巴西的州。我按“南部,东南部,中西部,北部和东北部”行政区域对它们进行了分组。到目前为止,我已经设法使其正常工作,切换列表正常工作。
但是,我想在单击状态时显示一个带有名称的弹出窗口,该弹出窗口可以工作,但是在同一位置显示了多个弹出窗口,而不仅仅是一个。
例如,如果我单击地图下方的州“南里奥格兰德州”,则三个弹出窗口将一个显示在另一个窗口的上方,因为在南部地区,存在三个状态。如果单击“圣保罗”,则会显示4个弹出窗口,因为东南地区有4个州,依此类推。 我仍在学习javascript,找不到解决方案。 这是一个带有代码的codepen: https://codepen.io/hugonbgg/pen/JjXGjgw
<script>
var filterGroup = document.getElementById('filter-group');
var map = new mapboxgl.Map({
container: 'map',style: 'mapbox://styles/mapbox/light-v10',center: [-55.5,-13.5],zoom: 4
});
map.on('load',function () {
d3.json(
'https://raw.githubusercontent.com/hugonbgg/hugonbgg.github.io/master/de-olho-nos-ruralistas/Desenvolvimento/Duvidas/UFs.geojson?token=ACVPPYLU726YPFTNLVOIPMK7HVMQA',function (err,UFs) {
if (err) throw err;
// Add a GeoJSON source containing place coordinates and information.
map.addSource('UFs',{
'type': 'geojson','data': UFs
});
UFs.features.forEach(function (feature) {
var symbol = feature.properties['NM_REGIAO'];
var layerID = 'poi-' + symbol;
// Add a layer for this symbol type if it hasn't been added already.
if (!map.getLayer(layerID)) {
map.addLayer({
'id': layerID,'type': 'fill','source': 'UFs','layout': {},'paint': {
'fill-color': 'brown','fill-opacity': 0.3
},'filter': ['==','NM_REGIAO',symbol]
});
// Add checkbox and label elements for the layer.
var input = document.createElement('input');
input.type = 'checkbox';
input.id = layerID;
input.checked = true;
filterGroup.appendChild(input);
var label = document.createElement('label');
label.setAttribute('for',layerID);
label.textContent = symbol;
filterGroup.appendChild(label);
// When the checkbox changes,update the visibility of the layer.
input.addEventListener('change',function (e) {
map.setLayoutProperty(
layerID,'visibility',e.target.checked ? 'visible' : 'none'
);
});
}
// When a click event occurs on a feature in the states layer,open a popup at the
// location of the click,with description HTML from its properties.
map.on('click',layerID,function (e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.NM_UF)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter',function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave',function () {
map.getCanvas().style.cursor = '';
});
});
});
});
</script> ```
[1]: https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)