Показать радиус круга в его центре - PullRequest
Новая
       0

Показать радиус круга в его центре

1 голос
/ 06 января 2020

У меня есть файл json, который дает мне всю необходимую информацию для рисования кругов на карте. Дело в том, что мне нужны круги, чтобы показать число, которое использовалось в качестве их радиуса.

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

L.circleMarker(
  [conflictsJson[index].latitude, conflictsJson[index].longitude], //προσθέτει συντεταγμένες στον χάρτη
  {
    radius: setRadius(conflictsJson, conflictsJson[index].location),
    color: '#FF0000',
    weight: 4,
    opacity: 0.5,
    fillOpacity: 0.25,
  },
)
  .bindPopup(conflictsJson[index].embeddedHtml, { maxWidth: 220 }) //Προσθέτει το link για το tweet στο popup παράθυρο
  .addTo(map);

setRadius() создает значение из файла json.

1 Ответ

3 голосов
/ 07 января 2020

Чтобы создать что-то вроде этого:

enter image description here

Взгляните на следующий фрагмент: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #map {
            width: 400px;
            height: 400px;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
    <div id="mapid" style="width: 100%; height: 100vh;"></div>

    <script>
        var map = new L.Map('mapid').setView([43.768017, - 79.333947], 16);

        var data = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": { "radius": 200 },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -79.3347430229187,
                            43.77203899218474
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": { "radius": 100 },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -79.32781219482422,
                            43.770427538281865
                        ]
                    }
                },
                {
                    "type": "Feature",
                    "properties": { "radius": 500 },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            -79.33465719223022,
                            43.764539164480254
                        ]
                    }
                }
            ]
        }

        var circleCenters = L.geoJSON(data);
        var myIcon = L.divIcon({ className: {} });
        circleCenters.eachLayer(function (layer) {
            L.circle([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { radius: 200 }).addTo(map);
            L.marker([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { icon: myIcon }).addTo(map).bindTooltip(layer.feature.properties.radius.toString(), { direction: 'center', permanent: true }).openTooltip();
        });
    </script>
</body>
</html>

Также вы можете переопределите стили CSS подсказки, чтобы удалить белый фон.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...