leaflet.js (с использованием данных геоджон) неверно обозначены страны - PullRequest
0 голосов
/ 06 января 2019

Я использую leaflet.js (с geojson) для отображения карты. Удаление некоторого кода, чтобы сделать его более лаконичным.

   $.getJSON('./api/map/data', function(data){
        let minZoom = 2.25
        let defaultZoom = 2.25
        let map = L.map('map', {
            minZoom: minZoom,
            zoomSnap: 0.1
        }).setView([43, 0], defaultZoom);

        let onEachFeature = (feature, layer) => {
            var label = L.marker(layer.getBounds().getCenter(), {
                icon: L.divIcon({
                    className: 'countryLabel',
                    html: feature.properties.name,
                    iconSize: [0, 0]
                })
            }).addTo(map);
        };

        L.geoJson(data, {
            clickable: false,
            style: {},
            onEachFeature: onEachFeature,
        }).addTo(map);

Я использовал этот сайт для загрузки векторных карт. Некоторые из ярлыков явно неверны (а некоторые почти правильны). При осмотре кажется, что некоторые из длинных / длинных установлены неправильно (или, кажется, так). Любой отзыв о том, как я мог сделать это правильно? Было бы здорово, если бы я мог придумать ярлыки, которые бы соответствовали границам страны (то есть, возможно, добавьте код страны там, где это необходимо).

enter image description here

1 Ответ

0 голосов
/ 13 января 2019

Проблема связана с настройками вашего ярлыка. В этот момент ваше положение значка указывает на левый верхний угол вашей метки, и вам нужно установить смещение, чтобы переместить метку в центр координат. Свойство, которое может вам помочь, - iconAnchor (см. Листовки)

...