Question

我正在制作使用this styled layer control plug in的地图并插入标记簇。

我已经让两个插件都可以自行处理我的数据，但无法弄清楚如何让它们一起工作。

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

基本上每周的每一天会有一个类别，然后在每天过滤器中显示食物或饮料信息，所以我需要这种层控制。我也对如何创建我自己的图层控件的建议持开放态度（对图层进行分组，然后允许您在这些图层中进行过滤）

    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

使用传单样式的图层控件和群集

1 个答案: