[英]Polygon labels with Leaflet
Using leaflet 7.3 and polygon data in GeoJSON, how can I add labels from field: NAME? 在GeoJSON中使用传单7.3和多边形数据,如何在字段中添加标签:NAME?
Here is example of current GeoJSON polygon data. 以下是当前GeoJSON多边形数据的示例。 I would like to enable fixed labels in center of polygon, overlap OK. 我想在多边形的中心启用固定标签,重叠OK。
var districts = L.geoJson(null, {
style: function (feature) {
return {
color: "green",
fill: true,
opacity: 0.8
};
},
onEachFeature(feature, layer) {
layer.on('mouseover', function () {
this.setStyle({
'fillColor': '#0000ff'
});
});
layer.on('mouseout', function () {
this.setStyle({
'fillColor': '#ff0000'
});
});
layer.on('click', function () {
window.location = feature.properties.URL;
});
}
});
$.getJSON("data/districts.geojson", function (data) {
districts.addData(data);
});
In onEachFeature callback, you can get the center of the L.Polygon created by GeoJSON layer and bind a label to it. 在onEachFeature回调中,您可以获取由GeoJSON图层创建的L.Polygon的中心并将标签绑定到它。
var polygonCenter = layer.getBounds().getCenter();
// e.g. using Leaflet.label plugin
L.marker(polygonCenter)
.bindLabel(feature.properties['NAME'], { noHide: true })
.addTo(map);
Here is an example: http://jsfiddle.net/FranceImage/ro54bqbz/ using Leaflet.label 这是一个例子: http : //jsfiddle.net/FranceImage/ro54bqbz/使用Leaflet.label
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.