Leaflet.js geoJson 标签
Leaflet.js geoJson labels
我正在使用带有 Leaflet.js 的 geoJson 层,显示国家 here。
我正在添加具有以下内容的国家/地区标签:
L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'countryLabel',
html: feature.properties.name,
iconSize: [0, 0]
})
}).addTo(map);
问题是,此应用的标记阻碍了每个国家/地区的鼠标悬停,导致鼠标悬停颜色变化和可点击区域出现问题。
传单 1.0.3 中是否有更好的解决方案来提供不会遮挡国家/地区可点击区域的标签?
我试过使用 Leaflet.Label 扩展名的代码,如下所示:
var label = new L.Label();
label.setContent(feature.properties.name);
label.setLatLng(center);
map.showLabel(label);
或
L.marker(center)
.bindLabel('test', { noHide: true })
.addTo(map);
但是这些会导致错误;我知道这个插件的功能在 v1.
之后被合并到 Leaflet.js 本身
这确实有效,但我宁愿使用简单的标签而不是工具提示:
var marker = new L.marker(center, { opacity: 0.00 }); //opacity may be set to zero
marker.bindTooltip(feature.properties.name, { permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);
欢迎提出任何想法。
我不明白你为什么要用带标签的标记来完成。
您可以将工具提示直接绑定到功能。在你的函数 onEachFeature
中,而不是 var label...
,你可以这样做:
layer.bindTooltip(
feature.properties.name,
{
permanent:true,
direction:'center',
className: 'countryLabel'
}
);
用这个 css :
.countryLabel{
background: rgba(255, 255, 255, 0);
border:0;
border-radius:0px;
box-shadow: 0 0px 0px;
}
这是 fiddle .
编辑
好的,我明白了,您想要使用标记以便在必要时能够手动设置位置。这是一个可行的解决方案:
您为所有例外国家定义一个带有 latLng 的哈希表,这些国家的特征中心不是您想要的中心:
var exceptions = {
'France': [45.87471, 2.65],
'Spain': [40.39676, -4.04397]
}
要显示标签,请在正确位置放置一个不可见标记,然后将工具提示绑定到它:
var label = L.marker(
exceptions[feature.properties.name] || layer.getBounds().getCenter(),
{
icon: L.divIcon({
html: '',
iconSize: [0, 0]
})
}
).addTo(map);
label.bindTooltip(
feature.properties.name,
{
permanent:true,
direction:'center',
className: 'countryLabel'
}
);
这是另一个 fiddle。
我正在使用带有 Leaflet.js 的 geoJson 层,显示国家 here。
我正在添加具有以下内容的国家/地区标签:
L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'countryLabel',
html: feature.properties.name,
iconSize: [0, 0]
})
}).addTo(map);
问题是,此应用的标记阻碍了每个国家/地区的鼠标悬停,导致鼠标悬停颜色变化和可点击区域出现问题。
传单 1.0.3 中是否有更好的解决方案来提供不会遮挡国家/地区可点击区域的标签?
我试过使用 Leaflet.Label 扩展名的代码,如下所示:
var label = new L.Label();
label.setContent(feature.properties.name);
label.setLatLng(center);
map.showLabel(label);
或
L.marker(center)
.bindLabel('test', { noHide: true })
.addTo(map);
但是这些会导致错误;我知道这个插件的功能在 v1.
之后被合并到 Leaflet.js 本身这确实有效,但我宁愿使用简单的标签而不是工具提示:
var marker = new L.marker(center, { opacity: 0.00 }); //opacity may be set to zero
marker.bindTooltip(feature.properties.name, { permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);
欢迎提出任何想法。
我不明白你为什么要用带标签的标记来完成。
您可以将工具提示直接绑定到功能。在你的函数 onEachFeature
中,而不是 var label...
,你可以这样做:
layer.bindTooltip(
feature.properties.name,
{
permanent:true,
direction:'center',
className: 'countryLabel'
}
);
用这个 css :
.countryLabel{
background: rgba(255, 255, 255, 0);
border:0;
border-radius:0px;
box-shadow: 0 0px 0px;
}
这是 fiddle .
编辑
好的,我明白了,您想要使用标记以便在必要时能够手动设置位置。这是一个可行的解决方案:
您为所有例外国家定义一个带有 latLng 的哈希表,这些国家的特征中心不是您想要的中心:
var exceptions = {
'France': [45.87471, 2.65],
'Spain': [40.39676, -4.04397]
}
要显示标签,请在正确位置放置一个不可见标记,然后将工具提示绑定到它:
var label = L.marker(
exceptions[feature.properties.name] || layer.getBounds().getCenter(),
{
icon: L.divIcon({
html: '',
iconSize: [0, 0]
})
}
).addTo(map);
label.bindTooltip(
feature.properties.name,
{
permanent:true,
direction:'center',
className: 'countryLabel'
}
);
这是另一个 fiddle。