如何解决标签仅在缩放传单时出现
我正在 Leaflet 中制作地图，每个标记最多有两个标签：
var redIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',iconSize: [25,41],iconAnchor: [12,popupAnchor: [1,-34],shadowSize: [41,41]
});
var marker1 = L.marker([25.777085,-80.193935],{icon: redIcon}).addTo(mymap);
var marker2 = L.marker([25.759461,-80.204921],{icon: redIcon}).addTo(mymap);
marker1.bindPopup('<div style="line-height: 1.2em;"><table align="center" border="0" cellpadding=".25" cellspacing=".25" width="95%"><tbody><tr><td colspan="2"><div style="padding: 0.1em; background-color: rgb(0,255); text-align: center;"><b style="color:white;">Number 1</b></div></td></tr><tr><td style="text-align: center;"> <strong>$456K </strong><br><strong>2 </strong>bd | <strong>2 </strong>ba | <strong>1,008 </strong>sqft<br><img src="https://static.pexels.com/photos/189349/pexels-photo-189349.jpeg" height="50px" width="50px"/></td><td style="text-align: left;"> </td></tr></tbody></table></div>');
marker1.on('mouseover',function (e) {
this.openPopup();
});
marker1.on('mouseout',function (e) {
this.closePopup();
});
function createLabel(layer,text,count){
//removeLabel(layer);
var icon = createStaticLabelIcon(text);
var testspan = document.createElement("span");
document.body.appendChild(testspan);
testspan.className = "textwidth";
testspan.style.fontSize = "10px";
testspan.innerHTML = text;
var width = testspan.clientWidth +11;
var posY = 0;
if( count == 1){
posY = -4;
} else if( count == 2){
posY = -24;
}
icon.options.iconAnchor = [width / 2,posY]; //That the label is centered
var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
layer.appendedLabel = label;
document.body.removeChild(testspan);
}
function createStaticLabelIcon(labelText) {
return L.divIcon({
className: "leaflet-marker-label",html: '<span class="leaflet-marker-iconlabel" style="background: #CB2B3E; color: #FFFFFF;";>'+labelText+'</span>',text: labelText,});
}
createLabel(marker1,"Label 1.1",1);
createLabel(marker1,"Label 1.2",2);
createLabel(marker2,"Label 2",1);
我想做的是隐藏标签，直到用户放大超过某个阈值。有谁知道这是怎么做到的吗？此外，如果可以仅在特定缩放后显示标签，是否有办法始终显示某些标签（如上面的标签 1.1），而其他标签仅在超过缩放阈值后才出现（如上面的标签 1.2）？>
更新：
这是我尝试过但无效的方法。我试过 solution from this post。
这是我的地图 mymap：
var mymap = L.map('mapid').setView([25.7741728,-80.19362],12);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',{
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',maxZoom: 18,id: 'mapbox/streets-v11',tileSize: 512,zoomOffset: -1,accessToken:'pk.eyJ1IjoiamFtZXNyYSIsImEiOiJja2xoNnVzdmUwMGxpMnVtZ2NheGxlanFqIn0.dx40peACrjwV9CfQpFhGpg'
}).addTo(mymap);
然后我添加了一些代码，只应在特定缩放级别以下显示标签，但它不起作用：
var show_label_zoom = 20; // zoom level threshold for showing/hiding labels
var labels_visible = true;
function show_hide_labels() {
var cur_zoom = mymap.getZoom();
if(labels_visible && cur_zoom < show_label_zoom) {
labels_visible = false;
mymap.eachLayer(layer => layer.hideLabel && layer.hideLabel());
}
else if(!labels_visible && cur_zoom >= show_label_zoom) {
labels_visible = true;
mymap.eachLayer(layer => layer.showLabel && layer.showLabel());
}
}
mymap.on('zoomend',show_hide_labels);
show_hide_labels();
关于为什么这不起作用的任何想法？
更新 2：
我试图实现这个线程的答案，但它仍然没有奏效。这是整个脚本。我是否遗漏了一些阻碍其正常工作的重要细节？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link type="text/css" rel="stylesheet" href="style.css" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
</script>
<style>
#mapid { height: 350px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([25.7741728,12);
var fg = L.featureGroup().addTo(mymap);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',{
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,id: 'mapbox/light-v10',accessToken: 'pk.eyJ1IjoiamFtZXNyYSIsImEiOiJja2xoNnVzdmUwMGxpMnVtZ2NheGxlanFqIn0.dx40peACrjwV9CfQpFhGpg'
}).addTo(mymap);
var redIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',{icon: redIcon}).addTo(mymap);
function createLabel(layer,count){
//removeLabel(layer);
var icon = createStaticLabelIcon(text,count);
var testspan = document.createElement("span");
document.body.appendChild(testspan);
testspan.className = "textwidth";
testspan.style.fontSize = "10px";
testspan.innerHTML = text;
var width = testspan.clientWidth +11;
var posY = 0;
if( count == 1){
posY = -4;
} else if( count == 2){
posY = -24;
}
icon.options.iconAnchor = [width / 2,{icon: icon}).addTo(fg);
layer.appendedLabel = label;
document.body.removeChild(testspan);
}
function createStaticLabelIcon(labelText,count) {
if (count == 1) {
return L.divIcon({
className: "leaflet-marker-label",html: '<span class="leaflet-marker-iconlabel" style="background: #fff; color: #000;";>'+labelText+'</span>',});
}
else {
return L.divIcon({
className: "leaflet-marker-label",});}
}
createLabel(marker1,1);
var show_label_zoom = 20; // zoom level threshold for showing/hiding labels
function show_hide_labels() {
var cur_zoom = mymap.getZoom();
if(cur_zoom < show_label_zoom && map.hasLayer(fg)) {
mymap.removeLayer(fg);
} else if(!map.hasLayer(fg) && cur_zoom >= show_label_zoom) {
mymap.addLayer(fg);
}
}
mymap.on('zoomend',show_hide_labels);
show_hide_labels();
</script>
</body>
</html>
解决方法
不是将标签添加到地图，而是将其添加到 myJsonResponse = json.loads(response.content)
objects = pd.json_normalize(myJsonResponse,record_path='detail',meta=['id','sort','name'],errors='ignore',meta_prefix='data_')
objects.explode('values')
：
L.featureGroup然后在缩放时删除/添加组：
var fg = L.featureGroup().addTo(map);
...
function createLabel(layer,text,count){
...
var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(fg);
...
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
