javascript - 从下拉列表中加载 geojson 文件

Question

我想从下拉列表中加载 geoJSON。我发现的所有内容都是传单的内部插件，例如: this link 。我有一个 html 下拉列表，但我不知道如何通过传单 map 将我的 geoJSON 文件链接到操作。

这是我的 geojson 文件示例:

var statesData = { "type": "FeatureCollection", "features": 
[ 
{ "type": "Feature", "properties": { "ID": "83260", "LIB": "La  Crau", "DEP": "83", "SURF": 37.480690, "POP2010": 16786.000000, "_COL6": 6648.160000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6.043347303606306, 43.149307043824749 ], [ 6.060558140134381, 43.150935909575622 ], [ 6.073786313868094, 43.159020099175599 ], [ 6.084204085483456, 43.16597803233963 ], [ 6.090394026041674, 43.175270594136371 ], [ 6.096263358769209, 43.188389064593764 ], [ 6.093602287356235, 43.198438935391636 ], [ 6.104187492483002, 43.205345802168019 ], [ 6.105439020148427, 43.219244343645315 ], [ 6.113910212271195, 43.227516686635013 ], [ 6.131287593222909, 43.222854757869897 ], [ 6.137764853051754, 43.217940600605793 ], [ 6.140931667040687, 43.211663837842245 ], [ 6.134728124274353, 43.206893578483012 ], [ 6.126437261243066, 43.194242277589616 ], [ 6.114539856022805, 43.188303989357173 ], [ 6.110305637342965, 43.182097845388633 ], [ 6.110632835897187, 43.16806322435027 ], [ 6.125671617273801, 43.154855404465202 ], [ 6.117142588629228, 43.138980679989849 ], [ 6.085011278730224, 43.134116382815463 ], [ 6.079862497114773, 43.114533382190906 ], [ 6.054023743373618, 43.115925571386384 ], [ 6.044924080831911, 43.123006307471485 ], [ 6.043347303606306, 43.149307043824749 ] ] ] ] } },
{ "type": "Feature", "properties": { "ID": "83210", "LIB": "Solliès-Pont", "DEP": "83", "SURF": 83.621588, "POP2010": 29413.000000, "_COL6": 11478.778000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 6.073786313868094, 43.159020099175599 ], [ 6.060558140134381, 43.150935909575622 ], [ 6.043347303606306, 43.149307043824749 ], [ 6.025594977556652, 43.154713085280449 ], [ 6.009298216176537, 43.160966095312183 ], [ 5.993384916775816, 43.16708846634107 ], [ 5.990711622156151, 43.173634460729104 ], [ 5.971873511530093, 43.196415328173316 ], [ 5.96292591246123, 43.198731698832383 ], [ 5.939589965468317, 43.215968062502476 ], [ 5.929259556402363, 43.230444132400251 ], [ 5.948055204382044, 43.239078270552071 ], [ 5.970235178153683, 43.239901134545121 ], [ 5.970233029935323, 43.246805534519915 ], [ 5.986548942993776, 43.253223950900463 ], [ 5.994947863472612, 43.26126431985211 ], [ 6.002737697048949, 43.257347552577919 ], [ 6.016815661967234, 43.256901153526954 ], [ 6.016113641678143, 43.250286947426034 ], [ 6.023774336111978, 43.246786895276173 ], [ 6.018136580292238, 43.231047228360602 ], [ 6.035300502750099, 43.220349256540075 ], [ 6.056245175329217, 43.215365282524175 ], [ 6.059692395395331, 43.205635187952687 ], [ 6.066734879741053, 43.201294785995685 ], [ 6.093602287356235, 43.198438935391636 ], [ 6.096263358769209, 43.188389064593764 ], [ 6.090394026041674, 43.175270594136371 ], [ 6.084204085483456, 43.16597803233963 ], [ 6.073786313868094, 43.159020099175599 ] ] ] ] } }
] 
};

我的 map 如下所示:

我有一个包含疾病名称的下拉列表。

基本上，当我单击列表中的项目时，我的 map 应该改变方面。目前，我的下拉列表中只有字符串。我如何将我的 geojson 文件链接到它们？

谢谢!

京马

Answer 1

一切尽在 example您提供了...只需查看 html 源代码即可。

文件的名称位于选择标记的值字段中:

<select id="geofile" size="3" multiple>
  <option value="italy-regions.json" selected>italy-regions.json</option>
  <option value="world-countries.json">world-countries.json</option>
</select>

在此示例中，文件与 html 页面位于同一文件夹中:http://labs.easyblog.it/maps/leaflet-geojson-list/examples/italy-regions.json

当选择更改时，将通过 jQuery $.getJSON 加载相应的文件，并销毁传单层并使用加载的数据重新创建。

$('#geofile').on('change', function(e) {

    $.getJSON(this.value, function(json) {

        map.removeLayer(geoLayer);

        geoLayer = L.geoJson(json).addTo(map);
        map.fitBounds( geoLayer.getBounds() );

        geoList.reload( geoLayer );
    });