1

I'm creating a map that uses this styled layer control plug in and the marker clusters plug in.

I've gotten both plug ins to work on their own with my data, but can't figure out how to get them to work together.

I have downloaded and included the marker cluster layer support files and attempted to implement them but it didn't change anything.

Basically there will be a category for each day of the week, and then within each day filters to show food or drink information, so I need this kind of layer control. I'm also open to suggestions for how to create my own layer control that is like this (grouping layers and then allowing you to filter within those groups)

    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);
4

1 回答 1

0

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

在您的情况下，您甚至可能不会直接使用您的mD和mF图层，因为它们仅在您的循环中临时使用。

相反，经典的方法是使用传单图层组来收集您的饮料标记和食物标记。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

于 2017-08-28T16:02:54.580 回答