2017-05-08 89 views
0

我想爲多個geoJSON圖層實現標記集羣。經過一番研究,使用Leaflet.FeatureGroup.SubGroup插件看起來像我需要的解決方案。Leaflet多geoJSON圖層集羣和圖層控制

如何迭代geoJSON以使用我提供的當前代碼樣本從地圖動態添加/刪除圖層組?

addGeoJsonLayers: => 
    L.mapbox.accessToken = MAP_BOX_ACCESS_TOKEN 

    streetsLayer = L.mapbox.tileLayer('mapbox.streets') 
    streetsLayer.on 'ready', => streetsLayer.addTo(@map) 

    baseLayers = 
     'Road': streetsLayer 
     'Terrain': L.mapbox.tileLayer('mapbox.outdoors') 
     'Satellite': L.mapbox.tileLayer('mapbox.satellite') 

    geojsonLayers = {} 

    @shares.forEach (share, index) => 
     titleLabel = CommunityMap.labelForDataId(share.schema.elements, share.schema.record_title_key) 
     geojsonOptions = { 
     onEachFeature: (feature, layer) => 
      record = new CommunityGeoJSONRecord(properties: feature.properties, titleLabel: titleLabel) 

      @records[record.id] = { record: record, layer: layer } 

      layer.bindPopup record.contentForPopUp() 

     pointToLayer: (feature, latLng) -> 
      if share.status_enabled 
      color = feature.properties['marker-color'] || INVALID_STATUS_MARKER_COLOR 
      else 
      color = MARKER_COLORS[index] 
      L.marker([latLng.lat, latLng.lng], { 
      icon: L.mapbox.marker.icon({ 
       'marker-size': 'small' 
       'marker-color': color 
      }) 
      }) 
     } 

     share.geojsonLayer = L.geoJson(null, geojsonOptions).addTo(@map) 

     geojsonLayers[share.name] = share.geojsonLayer 

     $.getJSON "#{share.url}?human_friendly=1", (data) => 
     @loadData(data, share.geojsonLayer, titleLabel) 

    L.control.zoom(position: 'topright').addTo(@map) 

    L.control.layers(baseLayers, geojsonLayers, position: 'topright').addTo(@map) 

回答

1

類似的東西應該工作:

var mcg = L.markerClusterGroup().addTo(@map); 

// within your @shares loop… 

    share.subGroupLayer = L.featureGroup.subGroup(mcg).addTo(@map); 

    // Do not add directly to map, but to the intermediate subGroup instead! 
    share.geojsonLayer = L.geoJSON(null, geojsonOptions).addTo(share.subGroupLayer); 

    geojsonLayers[share.name] = share.subGroupLayer; // use the subgroup instead. 
相關問題