javascript - 使用传单样式的图层控制和集群

Question

我正在创建一个使用 this styled layer control plug in 的 map 并且标记簇插入。

我已经让这两个插件能够独立地处理我的数据，但不知道如何让它们一起工作。

我已经下载并包含了标记簇层支持文件并尝试实现它们，但它没有改变任何东西。

基本上一周中的每一天都会有一个类别，然后在每天的过滤器中显示食物或饮料信息，所以我需要这种图层控制。我也愿意接受有关如何创建我自己的图层控件的建议，如下所示(对图层进行分组，然后允许您在这些组中进行过滤)

    var base = L.tileLayer('https://api.mapbox.com/styles/v1/agrosh/cj6p9fuxu2di72ss05n5nhycx/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWdyb3NoIiwiYSI6ImNpeWFscjNkZzAwN3AycW55aXB6eWtjZnoifQ.ZudIxK3hMrxAX8O4BXhiEg', {
        });

        var zoomLevel = 13;
        var setLat = 35.593464;
        var setLong = -82.551934;

        var map = L.map('map', {
            center: [setLat, setLong],
            zoom: zoomLevel
        });
        map.addLayer(base);


    var mondayFood = [
        {
"name":"name",
"details":"ex",
"address":"",
"website":"",
"lat":35.591140,
"lng":-82.552111,
"yelp":"",
"google":"",
"img":"img"
      }];

    var mondayDrink = [
     {
"name":"name",
"details":"ex",
"address":"",
"website":"",
"lat":35.594446,
"lng":-82.555602,
"yelp":"",
"google":"",
"img":"img"
      }];



    var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);

    // monday
    for ( var i = 0; i < mondayFood.length; ++i )
    {

    var monFood = mondayFood[i].img;

var mF = L.marker( [mondayFood[i].lat, mondayFood[i].lng], {icon: myIcon} )
              .bindPopup( monFood );

        markerClusters.addLayer( mF );

    }

    for ( var i = 0; i < mondayDrink.length; ++i )
    {
var monDrink = mondayDrink[i].img;

var mD = L.marker( [mondayDrink[i].lat, mondayDrink[i].lng], {icon: myIcon} )
              .bindPopup( monDrink );
 markerClusters.addLayer( mD );

    }

    var overlays = [
                        {
                            groupName : "Monday",
                            expanded : true,
                            layers    : { 
                                "Food" : mondayFood
                                "Drink" : mondayDrink,

                            }]; 
                         }

    var options = {
            container_width     : "300px",
            group_maxHeight     : "80px",
            //container_maxHeight : "350px", 
            exclusive           : false,
            collapsed : true, 
            position: 'topright'
        };

        var control = L.Control.styledLayerControl(overlays, options);
        map.addControl(control);

Answer 1

图层控件可以处理 Leaflet 图层，而不是普通的 JavaScript 数据对象。

就您而言，您甚至可能不会直接使用 mD 和 mF 层，因为它们仅在循环中临时使用。

相反，经典的方法是使用Leaflet Layer Groups收集您的饮料标记和食物标记。 MCG.layersupport 旨在能够处理这些层组。

var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);
var groupFood = L.layerGroup().addTo(markerClusters);
var groupDrink = L.layerGroup().addTo(markerClusters);

for (var i = 0; i < mondayFood.length; ++i) {
  var mF = L.marker([mondayFood[i].lat, mondayFood[i].lng]);
  //markerClusters.addLayer(mF);
  mF.addTo(groupFood);
}

for (var i = 0; i < mondayDrink.length; ++i) {
  var mD = L.marker([mondayDrink[i].lat, mondayDrink[i].lng]);
  //markerClusters.addLayer(mD);
  mD.addTo(groupDrink);
}

var overlays = [{
  groupName: "Monday",
  expanded: true,
  layers: {
    //"Food": mondayFood,
    //"Drink": mondayDrink
    "Food": groupFood,
    "Drink": groupDrink
  }
}];

var control = L.Control.styledLayerControl(overlays);
map.addControl(control);

现场演示:http://plnkr.co/edit/ufoKZ0BJbjXILPV3iLpj?p=preview