Question

好吧，所以我尝试过多次失败并在SE中挖掘，希望找出我的问题。

我在SE帖子上做了很多工作：link。

我一直无法做到这一点，主要是因为有两个错误，但第一个是首先要克服的明显障碍：

错误1：

未捕获的SyntaxError：意外的标记＆lt;

错误2：

未捕获的TypeError：L.markerClusterGroup.layerSupport不是函数

所以，我希望通过群集来处理通过L.control.layers（）函数打开的任何图层。

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

代码，sans 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

旁注：

如果您只需要使用图层控件来处理Leaflet.markercluster，那么还有另一个插件可以做到这一点而且更简单：Leaflet.FeatureGroup.SubGroup（230行代码与Leaflet.MarkerCluster.LayerSupport 600行截至今天）。

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

// 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

披露：我是这些插件的作者。

具有多个图层的传单聚类（使用MarkerCluster.LayerSupport？）

1 个答案: