問題描述

我有兩個(gè) geoJSON 功能集合需要添加到地圖中，我還希望通過圖層可見性控制器打開和關(guān)閉它們，如 http://leafletjs.com/examples/layers-control.html

I have two geoJSON feature collections that I need to add to the map, and I also want them to be toggled on and off via the layer visibility controllers as shown in http://leafletjs.com/examples/layers-control.html

我該怎么做?

推薦答案

Leaflet的GeoJSON層L.GeoJSON的使用也有一個(gè)很好的教程，可以在這里找到:http://leafletjs.com/examples/geojson.html 這里是 的參考L.GeoJSON:http://leafletjs.com/reference.html#geojson您已經(jīng)在 L.control.layers 上找到了教程，這里是它的參考:http://leafletjs.com/reference.html#control-layers

There is also a very good tutorial on the usage of L.GeoJSON, Leaflet's GeoJSON layer, which can be found here: http://leafletjs.com/examples/geojson.html and here is the reference for L.GeoJSON: http://leafletjs.com/reference.html#geojson You already found the tutorial on L.control.layers, here is the reference for it: http://leafletjs.com/reference.html#control-layers

其實(shí)做起來很簡單，只需要創(chuàng)建一個(gè)layercontrol，使用你喜歡的XHR庫加載一個(gè)GeoJSON文件到你的腳本中，使用檢索到的數(shù)據(jù)來定義一個(gè)L.GeoJSON圖層并將其添加到圖層控件.在代碼中:

It's actually quite simple to do, it's just a matter of creating a layercontrol, loading a GeoJSON file into your script by using your favorite XHR library, use the retrieved data to defined a L.GeoJSON layer and add it to the layercontrol. In code:

// Create the layercontrol and add it to the map
var controlLayers = L.control.layers().addTo(map);

// Loading a GeoJSON file (using jQuery's $.getJSON)    
$.getJSON('/my-folder/my-file.json', function (data) {

  // Use the data to create a GeoJSON layer and add it to the map
  var geojsonLayer = L.geoJson(data).addTo(map);

  // Add the geojson layer to the layercontrol
  controlLayers.addOverlay(geojsonLayer, 'My GeoJSON layer title');

});

關(guān)于 Plunker 的工作示例:http://plnkr.co/edit/tFVrrq?p=預(yù)覽

A working example on Plunker: http://plnkr.co/edit/tFVrrq?p=preview

這篇關(guān)于如何將兩個(gè) geoJSON 特征集合添加到兩個(gè)圖層組中的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！