[英]Add static labels to circle markers in leaflet
I am trying to add additional labels to my circle markers in Leaflet. 我正在尝试在Leaflet中为我的圆圈标记添加其他标签。
So right now I have like this: 所以现在我喜欢这个:
But I need to have this kind of look: 但我需要有这样的表情:
Here is my code part: 这是我的代码部分:
var Classroomsbyamount = new L.LayerGroup();
var Classroomsamount = new L.geoJson(buildingPoints, {
pointToLayer: function(feature, latlng) {
if(feature.properties.Classroomsstyleamt) {
return new L.CircleMarker(latlng, feature.properties.Classroomsstyleamt, {radius: feature.radius}); }
},
onEachFeature: function(feature, layer) {
if (feature.properties && feature.properties.building_name) {
var thenumber20 = feature.properties.spacecategoryClassroomsamt;
var number30 = thenumber20.toLocaleString('en');
layer.bindPopup({ html: '<b>' + number30 + '</b>' });
layer.bindPopup(feature.properties.building_name + "<br> Amount:" + number30, {maxWidth: "none", closeButton: true, offset: L.point(0, -20)});
layer.on('mouseover', function() { layer.openPopup(); });
layer.on('click', function() {
var capacityGroup = feature.properties.building_name;
popUp(capacityGroup);
});
}
}
}).addTo(Classroomsbyamount);
How can I add labels to my circles on the map? 如何在地图上为我的圈子添加标签?
A somewhat simple solution would be to create a permanent tooltip for each feature, centered on the coordinates of the circles. 一个简单的解决方案是为每个要素创建一个永久性的工具提示,以圆圈的坐标为中心。
Something like 就像是
onEachFeature: function(feature, layer) {
var text = L.tooltip({
permanent: true,
direction: 'center',
className: 'text'
})
.setContent("some text")
.setLatLng(layer.getLatLng());
text.addTo(Classroomsbyamount);
// rest of your code
}
And a demo 还有一个演示
var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 12); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var buildingPoints = [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.2922926, 48.85] }, "properties": { "text": "5", "radius": 60 } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.35, 48.86] }, "properties": { "text": "4", "radius": 40 } } ]; var Classroomsamount = new L.geoJson(buildingPoints, { pointToLayer: function(feature, latlng) { return new L.CircleMarker([latlng.lat, latlng.lng], {radius: feature.properties.radius}); }, onEachFeature: function(feature, layer) { var text = L.tooltip({ permanent: true, direction: 'center', className: 'text' }) .setContent(feature.properties.text) .setLatLng(layer.getLatLng()); text.addTo(map); var text2 = L.tooltip({ direction: 'top', className: 'text2' }) .setContent(feature.properties.text) .setLatLng(layer.getLatLng()); layer.bindTooltip(text2); } }).addTo(map);
html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; } .leaflet-tooltip-pane .text { color: red; font-weight: bold; background: transparent; border:0; box-shadow: none; font-size:2em; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script> <div id='map'></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.