Leaflet.js GeoJson этикетки

Question

Я использую слой geoJson с Leaflet.js, показывая страны здесь.

Я добавляю ярлыки стран со следующим:

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

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

Есть ли лучшее решение в буклете 1.0.3, чтобы поставлять ярлыки, которые не будут мешать кликабельной области стран?

Я пробовал код, который использует расширение Leaflet.Label следующим образом:

var label = new L.Label();
label.setContent(feature.properties.name);
label.setLatLng(center);
map.showLabel(label);

или же

L.marker(center)
  .bindLabel('test', { noHide: true })
  .addTo(map);

Но это вызывает ошибки; Я понимаю, что функциональность этого плагина была включена в сам Leaflet.js после v1.

Это работает, но я бы предпочел использовать простые ярлыки вместо всплывающих подсказок:

var marker = new L.marker(center, { opacity: 0.00 }); //opacity may be set to zero
marker.bindTooltip(feature.properties.name, { permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Любые идеи будут приветствоваться.

Answer 1

Я не понимаю, почему вы хотите сделать это с помощью маркированного маркера.

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

layer.bindTooltip(
    feature.properties.name,
    {
        permanent:true,
        direction:'center',
        className: 'countryLabel'
    }
);

с этим css:

.countryLabel{
  background: rgba(255, 255, 255, 0);
  border:0;
  border-radius:0px;
  box-shadow: 0 0px 0px;
}

Вот скрипка.

РЕДАКТИРОВАТЬ

Хорошо, я понимаю, вы хотите использовать маркер, чтобы иметь возможность установить позицию вручную, если это необходимо. Вот рабочее решение:

Вы определяете хеш-таблицу с символом latLng для всех стран исключения, тех, для которых центр объектов не является тем центром, который вам нужен:

var exceptions = {
    'France': [45.87471, 2.65],
    'Spain': [40.39676, -4.04397]
}

Чтобы отобразить метку, вы помещаете невидимый маркер в правильное положение и привязываете к нему подсказку:

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

label.bindTooltip(
    feature.properties.name,
    {
        permanent:true,
        direction:'center',
        className: 'countryLabel'
    }
);

Вот другая скрипка.