Добавьте статические метки к круговым маркерам в листовке

Я пытаюсь добавить дополнительные метки к маркерам круга в Leaflet.

Итак, сейчас у меня так: Круги на карте без надписей

Но мне нужен такой вид: Круги на карте с надписями

Вот моя часть кода:

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);

Как добавить ярлыки к своим кругам на карте?


javascript jquery leaflet
person bohdan baida    schedule 19.02.2018    source источник

Ответы (1)


arrow_upward
18
arrow_downward

Несколько простым решением было бы создание постоянной всплывающей подсказки для каждой функции, центрированной по координатам кругов.

Что-то типа

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
}

И демо

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: '&copy; <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>

person nikoshr    schedule 21.02.2018
comment
Спасибо за ответ. Но если я уже использую tooltip(); Как я могу определить еще один. Потому что прямо сейчас, если я размещаю ваш код, он показывает мне эту стрелку: Uncaught TypeError: Cannot read property '_getTooltipAnchor' of undefined Renderer.js:1 - person bohdan baida; 20.04.2018
comment
@bohdanbaida Использование всплывающих подсказок в ваших кругах не мешает добавлять другие всплывающие подсказки. Я изменил свой пример, чтобы продемонстрировать это. - person nikoshr; 24.04.2018