多层 Leaflet 聚类（使用 MarkerCluster.LayerSupport?）

Question

好吧，所以我尝试了很多次但都失败了，并通过 SE 进行了挖掘，希望能找出我的问题。

我的很多工作都基于这个 SE post：。

我一直无法完成这项工作，主要是因为两个错误，但第一个错误是首先要克服的明显障碍：

错误 1：

Uncaught SyntaxError: Unexpected token <

错误 2：

Uncaught TypeError: L.markerClusterGroup.layerSupport is not a function

所以，我希望聚类能够与通过 L.control.layers() 函数打开的任何层一起工作。

这是我现在的页面：TN Alcohol Map

还有代码，没有 headers/misc:

// initialize the map
var map = L.map('map').setView([36.17, -86.78], 7);

// load a tile layer/base map
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png',
{
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  maxZoom: 18,
  minZoom: 7
}).addTo(map);

//attributes for basemap credit (lower right hand corner annotation)
var streetsAttr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var aerialAttr = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
var artsyfartsyAttr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';

//crete variables for the base map layer switcher
var streets = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {id: 'MapID', attribution: streetsAttr}),
    aerial   = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {id: 'MapID', attribution: aerialAttr}),
    artsyfartsy = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {id: 'MapID', attribution: artsyfartsyAttr});

//create baseMaps variable to store basemap layer switcher
var baseMaps = {
    "Streets": streets,
    "Aerial": aerial,
    "ArtsyFartsy": artsyfartsy
};

// BEER icon & load beer geojson
var beerIcon = L.icon({
  iconUrl: 'glass.png',
  iconSize: [24, 48]
});

var beerMarker = L.geoJson(false, {
  pointToLayer: function(feature, latlng) {
    var marker = L.marker(latlng, {
      icon: beerIcon
    });
    //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
    marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
      feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
    return marker;
  }
}).addTo(map);

$.getJSON("breweries.geojson", function(data) {
  beerMarker.addData(data);
});

// WINE icon & load wine geojson
var wineIcon = L.icon({
  iconUrl: 'wine.png',
  iconSize: [48, 48]
});

var wineMarker = L.geoJson(false, {
  pointToLayer: function(feature, latlng) {
    var marker = L.marker(latlng, {
      icon: wineIcon
    });
    //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
    marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
      feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
    return marker;
  }
}).addTo(map);

$.getJSON("wine.geojson", function(data) {
  wineMarker.addData(data);
});

//Define overlay maps (non-base layer maps)
var overlayMaps = {
    "Breweries": beerMarker,
    "Wineries": wineMarker
}; 

//Creates a Marker Cluster Group
var mcg = L.markerClusterGroup.layerSupport().addTo(map);

//Checking in the 'sub groups'
mcg.checkIn([
    beerMarker,
    wineMarker
]);

//baseMaps layer switcher
L.control.layers(baseMaps, overlayMaps).addTo(map);

Answer 1

正如 nathansnider 在问题评论中所说，您的 leaflet.markercluster.layersupport-src 文件的内容不是 markerCluster.LayerSupport 插件的 JavaScript 代码，而是 GitHub HTML 显示该文件代码的页面，即被大量 HTML 代码包围。

您只需将文件内容替换为原始文件的内容即可：https://raw.githubusercontent.com/ghybs/Leaflet.MarkerCluster.LayerSupport/master/leaflet.markercluster.layersupport-src.js

演示：http://plnkr.co/edit/Jd8skZ1U0bWxgl2orJV6?p=preview

旁注：

如果您只需要 Layers Control 与 Leaflet.markercluster 一起工作，还有另一个插件可以做到这一点，而且它更简单：Leaflet.FeatureGroup.SubGroup (230 lines of code v.s. 600 lines for Leaflet.MarkerCluster.LayerSupport 截至今天）。

在你的情况下你会这样使用它：

// Create a normal Marker Cluster Group.
var mcg = L.markerClusterGroup().addTo(map);

// Create SubGroups.
var beerMarkerSub = L.featureGroup.subGroup(mcg).addTo(map);
var wineMarkerSub = L.featureGroup.subGroup(mcg).addTo(map);

// For Layers Control.
var overlayMaps = {
    "Breweries": beerMarkerSub,
    "Wineries": wineMarkerSub
};

// That is it! No need to check-in.

特定于您的应用程序的代码，因为您通过 AJAX:

加载 GeoJSON 数据

var beerMarker = L.geoJson(null, beerOptions); // DO NOT add to map.
var wineMarker = L.geoJson(null, wineOptions); // Same story.

$.getJSON("breweries.geojson", function(data) {
  beerMarker.addData(data); // GeoJSON conversion.
  // Then transfer all features into the corresponding sub-group.
  beerMarker.eachLayer(function (layer) {
    layer.addTo(beerMarkerSub);
  });
});

$.getJSON("wine.geojson", function(data) {
  wineMarker.addData(data); // GeoJSON conversion.
  // Then transfer all features into the corresponding sub-group.
  wineMarker.eachLayer(function (layer) {
    layer.addTo(wineMarkerSub);
  });
});

演示：http://plnkr.co/edit/x8vTLjE53TPiLd52BQ1d?p=preview

Disclosure: I am the author of these plugins.

多层 Leaflet 聚类（使用 MarkerCluster.LayerSupport?）

Leaflet Clustering with multiple layers (use MarkerCluster.LayerSupport?)

leaflet

markerclusterer