Изменение стиля кластера листовок при нажатии на него - PullRequest
Новая
       6

Изменение стиля кластера листовок при нажатии на него

0 голосов
/ 21 ноября 2018

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

//create clustering markers
var markers = L.markerClusterGroup({
    spiderfyOnMaxZoom: false,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: false,
    singleMarkerMode: true,          //makes sure that single incidents looks the same as clusters (but are still treated as single markers)
    iconCreateFunction: defineClusterIcon 
});

var layer_group = L.geoJSON(geoJson);


markers.addLayer(layer_group);
map.addLayer(markers);
map.fitBounds(markers.getBounds());

В функции defineClusterIcon я создаю SVG, который затем преобразуется в HTML и определяет значок: 

return L.divIcon({ 
    iconSize: new L.Point(40, 45),
    html: html,
    classname: 'leaflet-div-icon'
});

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

Вместо того, чтобы менять стиль фактических элементов svg, я думаю, что было бы проще просто изменить стиль класса: 

.leaflet-div-icon {
    background: rgba(0,0,0,0);
    border: none;       
}

Где я хочу получитьграницы, когда кластер / маркер был нажат.Я не знаю, возможно ли изменить класс в функциях on clusterclick или click, или это можно сделать другим способом.

Мой код, как он есть сейчас, можно найти здесь, где искомый эффект также можно увидеть на элементах управления с правой стороны: http://bl.ocks.org/skov94/f006cd45d2daa2bc67e4f514774fdd0d

1 Ответ

0 голосов
/ 21 ноября 2018

Вместо переключения свойства outline элемента leaflet-interactive, я бы переключил класс, как вы сделали с элементами управления на правой стороне (скажем, класс outlined).

Этот класспереключение должно быть сделано в обработчике события onclick.Кластеры листовок предоставляют свои собственные события щелчка кластера (clusterclick).

Возможными целями события clusterclick являются узлы text, circle или svg кластера.Мы хотим получить включающий div с классом leaflet-interactive для добавления или удаления класса outlined.Это будет легко сделать с помощью Element.closest :

Javascript file 

markers
[...]
.on('clusterclick',function(c) {

  console.log("pressed");
  map.closePopup();

  c.originalEvent.target.closest(".leaflet-interactive")
   .classList.toggle("outlined");

});

Затем просто измените стиль его circle потомков с помощью css:

CSS-файл 

.leaflet-interactive.outlined circle {
  stroke-width: 2px;
  stroke: blue;
}

Редактировать : Если вы не знакомы с css, селектор означает: circle узлы, которые являются потомками узлов с классами leaflet-interactive И outlined.

...