javascript — Кнопка фильтра тегов Leaflet и плагины MarkerCluster.LayerSupport — Интеграция для создания фильтров при нажатии обновляет кластеры

Кнопка фильтра тегов Leaflet и плагины MarkerCluster.LayerSupport — Интеграция для создания фильтров при щелчке обновляет кластеры

Странно, но в плагине Leaflet Tag Filter Button и / или в последней версии Leaflet есть некоторые ошибки / прослушиватели, которые могут приостанавливать работу скрипта (а значит и браузера) при открытии веб-консоли.

Как только эти ошибки исправлены, все еще есть ошибки с методом « addToReleated ». Так как я не знаю, что он должен делать, я просто пока проигнорирую это и позволю вам исправить это с помощью автора плагина.

Что касается интеграции с плагином Leaflet.markercluster , то он действительно не выглядит так, как будто 1-й плагин должен его поддерживать. Плагин PruneCluster (для которого enablePruneCluster метод enablePruneCluster кнопки фильтра тегов) работает совсем не так, как Leaflet.markercluster.

enablePruneCluster исходный код кнопки фильтра тегов, кажется, что вы можете реализовать его, адаптировав код enablePruneCluster и функцию hide вызова registerCustomSource в _prepareLayerSources по умолчанию. Идея состоит в том, чтобы избегать непосредственного использования _map и использовать вместо этого MCG.

Поскольку вы можете напрямую обрабатывать вызовы MCG addLayers и removeLayers внутри функции hide, плагин Leaflet.MarkerCluster.LayerSupport вообще не нужен.

Вот быстрая и грязная реализация, называемая « enableMCG »:

 //////////////////////////////////////////////// // Quick and dirty implementation of enableMCG //////////////////////////////////////////////// L.Control.TagFilterButton.include({ // Goal: read from MCG instead of from _map enableMCG: function(mcgInstance) { this.registerCustomSource({ name: 'mcg', source: { mcg: mcgInstance, hide: function(layerSource) { var releatedLayers = []; for ( var r = 0; r {amp}lt; this._releatedFilterButtons.length; r   ) { releatedLayers = releatedLayers.concat( this._releatedFilterButtons[r].getInvisibles() ); } var toBeRemovedFromInvisibles = [], i, toAdd = []; for (var i = 0; i {amp}lt; this._invisibles.length; i  ) { if (releatedLayers.indexOf(this._invisibles[i]) == -1) { for ( var j = 0; j {amp}lt; this._invisibles[i].options.tags.length; j   ) { if ( this._selectedTags.length == 0 || this._selectedTags.indexOf( this._invisibles[i].options.tags[j] ) !== -1 ) { //this._map.addLayer(this._invisibles[i]); toAdd.push(this._invisibles[i]); toBeRemovedFromInvisibles.push(i); break; } } } } // Batch add into MCG layerSource.mcg.addLayers(toAdd); while (toBeRemovedFromInvisibles.length {amp}gt; 0) { this._invisibles.splice( toBeRemovedFromInvisibles.pop(), 1 ); } var removedMarkers = []; var totalCount = 0; if (this._selectedTags.length {amp}gt; 0) { //this._map.eachLayer( layerSource.mcg.eachLayer( function(layer) { if ( layer {amp}amp;{amp}amp; layer.options {amp}amp;{amp}amp; layer.options.tags ) { totalCount  ; if (releatedLayers.indexOf(layer) == -1) { var found = false; for ( var i = 0; i {amp}lt; layer.options.tags.length; i   ) { found = this._selectedTags.indexOf( layer.options.tags[i] ) !== -1; if (found) { break; } } if (!found) { removedMarkers.push(layer); } } } }.bind(this) ); for (i = 0; i {amp}lt; removedMarkers.length; i  ) { //this._map.removeLayer(removedMarkers[i]); this._invisibles.push(removedMarkers[i]); } // Batch remove from MCG layerSource.mcg.removeLayers(removedMarkers); } return totalCount - removedMarkers.length; }, }, }); this.layerSources.currentSource = this.layerSources.sources[ 'mcg' ]; }, }); //////////////////////////////////////////////// // Fix for TagFilterButton //////////////////////////////////////////////// L.Control.TagFilterButton.include({ _prepareLayerSources: function() { this.layerSources = new Object(); this.layerSources['sources'] = new Object(); this.registerCustomSource({ name: 'default', source: { hide: function() { var releatedLayers = []; for (var r = 0; r {amp}lt; this._releatedFilterButtons.length; r  ) { releatedLayers = releatedLayers.concat( this._releatedFilterButtons[r].getInvisibles() ); } var toBeRemovedFromInvisibles = [], i; // "Fix": add var for (var i = 0; i {amp}lt; this._invisibles.length; i  ) { if (releatedLayers.indexOf(this._invisibles[i]) == -1) { // "Fix": add var for (var j = 0; j {amp}lt; this._invisibles[i].options.tags.length; j  ) { if ( this._selectedTags.length == 0 || this._selectedTags.indexOf( this._invisibles[i].options.tags[j] ) !== -1 ) { this._map.addLayer(this._invisibles[i]); toBeRemovedFromInvisibles.push(i); break; } } } } while (toBeRemovedFromInvisibles.length {amp}gt; 0) { this._invisibles.splice(toBeRemovedFromInvisibles.pop(), 1); } var removedMarkers = []; var totalCount = 0; if (this._selectedTags.length {amp}gt; 0) { this._map.eachLayer( function(layer) { if (layer {amp}amp;{amp}amp; layer.options {amp}amp;{amp}amp; layer.options.tags) { totalCount  ; if (releatedLayers.indexOf(layer) == -1) { var found = false; for (var i = 0; i {amp}lt; layer.options.tags.length; i  ) { found = this._selectedTags.indexOf(layer.options.tags[i]) !== -1; if (found) { break; } } if (!found) { removedMarkers.push(layer); } } } }.bind(this) ); for (i = 0; i {amp}lt; removedMarkers.length; i  ) { this._map.removeLayer(removedMarkers[i]); this._invisibles.push(removedMarkers[i]); } } return totalCount - removedMarkers.length; }, }, }); this.layerSources.currentSource = this.layerSources.sources['default']; }, }); //////////////////////////////////////////////// // Adapted from TagFilterButton demo // https://github.com/maydemirx/leaflet-tag-filter-button/blob/0.0.4/docs/assets/js/main.js //////////////////////////////////////////////// var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', osmAttrib = '{amp}amp;copy; {amp}lt;a href="http://openstreetmap.org/copyright"{amp}gt;OpenStreetMap{amp}lt;/a{amp}gt; contributors', osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib, }); // initialize the map on the "map" div with a given center and zoom var releatedUsageMap = L.map('releated-usage-map') .setView([50.5, 30.5], 12) .addLayer(osm); var mcg = L.markerClusterGroup().addTo(releatedUsageMap); L.marker([50.521, 30.52], { tags: ['tomato', 'active'] }) .bindPopup('tomato, active') .addTo(mcg); L.marker([50.487, 30.54], { tags: ['tomato', 'ended'] }) .bindPopup('tomato, ended') .addTo(mcg); L.marker([50.533, 30.5], { tags: ['tomato', 'ended'] }) .bindPopup('tomato, ended') .addTo(mcg); L.marker([50.54, 30.48], { tags: ['strawberry', 'active'] }) .bindPopup('strawberry, active') .addTo(mcg); L.marker([50.505, 30.46], { tags: ['strawberry', 'ended'] }) .bindPopup('strawberry, ended') .addTo(mcg); L.marker([50.5, 30.43], { tags: ['cherry', 'active'] }) .bindPopup('cherry, active') .addTo(mcg); L.marker([50.48, 30.5], { tags: ['cherry', 'ended'] }) .bindPopup('cherry, ended') .addTo(mcg); var statusFilterButton = L.control .tagFilterButton({ data: ['active', 'ended'], filterOnEveryClick: true, icon: '{amp}lt;span{amp}gt;suitcase{amp}lt;/span{amp}gt;', }) .addTo(releatedUsageMap); // Enable MCG integration statusFilterButton.enableMCG(mcg); /*var foodFilterButton = L.control .tagFilterButton({ data: ['tomato', 'cherry', 'strawberry'], filterOnEveryClick: true, icon: '{amp}lt;i class="fa fa-pagelines"{amp}gt;{amp}lt;/i{amp}gt;', }) .addTo(releatedUsageMap); foodFilterButton.addToReleated(statusFilterButton);*/ 
 html, body, #releated-usage-map { height: 100%; margin: 0; } 
 {amp}lt;!-- Leaflet --{amp}gt; {amp}lt;link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" media="screen, print" rel="stylesheet" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3 OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""{amp}gt; {amp}lt;script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js' integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- MarkerCluster Plugin --{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css" /{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.Default.css" /{amp}gt; {amp}lt;script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js'{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- EasyButton Plugin (compatibility for tagFilterButton) --{amp}gt; {amp}lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css"{amp}gt; {amp}lt;script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!-- tagFilterButton Plugin --{amp}gt; {amp}lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button@0.0.4/src/leaflet-tag-filter-button.css"{amp}gt; {amp}lt;script src="https://cdn.jsdelivr.net/npm/leaflet-tag-filter-button@0.0.4/src/leaflet-tag-filter-button.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="releated-usage-map"{amp}gt;{amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector