Question

我有2000年至2010年密度超过30个区的数据。我想为每年创建一个交互式的等值区域地图，然后使用滑块（理想情况下）或单选按钮来选择年份。

我可以在第一年获得互动，但不会在其他年份的层次上。您可以看到有效的example here，但请在下面提供一些详细信息：

为简单起见，请考虑两年。 Stream具有非重叠多边形BlockA和BlockB（两个区域），blocks1995具有相同的块。他们有一个名为blocks1996的属性，它产生了等值区：

density

我已尝试将其添加到var blocks1995 = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [{ "type": "Feature", "properties": { "time": 1995, "density": 3.1, "nameB": "BlockA" }, "geometry": { "type": "Polygon", "coordinates": [[[50.0, 29.0],[50.0, 29.99],[50.51, 29.99],[50.0, 29.0]]] } }, { "type": "Feature", "properties": { "time": 1995, "density": 1.1, "nameB": "BlockB" }, "geometry": { "type": "Polygon", "coordinates": [[[50.01, 30.0],[50.52, 30.0],[50.52, 30.5]]] } }] }; var blocks1996 = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [{ "type": "Feature", "properties": {"year": 1996, "density": 2.2, "name": "BlockA" }, "geometry": { "type": "Polygon", "coordinates": [[[50.0, 29.0],[50.0, 29.99],[50.51, 29.99]]] } }, { "type": "Feature", "properties": {"year": 1996,"density": 1.2,"name": "BlockB"}, "geometry": { "type": "Polygon", "coordinates": [[[50.01, 30.0],[50.52, 30.0],[50.52, 30.5]]] } }] };

OverlayLayer

我在此Leaflet interactive choropleth tutorial中找到了样板交互代码，然后我又添加回地图：

var blocks1995Layer = L.layerGroup([ L.geoJson(blocks1995)]),
    blocks1996Layer = L.layerGroup([ L.geoJson(blocks1996)]);


var overlayMaps = {
    "Blocks 1995": blocks1995Layer,
    "Blocks 1996": blocks1996Layer
};

var map = new L.map('map', {layers:[blocks1995Layer]})
    .setView([29, 50], 7);

问题是我只在geojson = L.geoJson(blocks1995, { style: density_style, onEachFeature: addToFeature }).addTo(map); L.control.layers(null, overlayMaps).addTo(map);添加了互动功能，但我无法将其添加到blocks1995。

我可以使用Leaflet插件（我尝试过TimeSlider但也无法弄明白）。

另一种可能性是将两个overlayMaps和block1995变量合并为一个具有额外功能block1996或year的变量，这样可以使事情变得更容易。我们的想法是让Leaflet按时间查询（例如，当滑块移动时）并每年生成交互式等值线。

谢谢！

Answer 1

基本上，您没有添加图层来正确控制。目前，你正在做这个

var blocks1995Layer = L.layerGroup([ L.geoJson(blocks1995)]),
    blocks1996Layer = L.layerGroup([ L.geoJson(blocks1996)]);

var overlayMaps =  {
    "Blocks 1995": blocks1995Layer,
    "Blocks 1996": blocks1996Layer
};

geojson = L.geoJson(blocks1995, {
    style: density_style,
    onEachFeature: addToFeature
}).addTo(map);

相反，试试这个

geojson = L.geoJson(blocks1995, {
    style: density_style,
    onEachFeature: addToFeature
}).addTo(map);

geojson1 = L.geoJson(blocks1996, {
    style: density_style,
    onEachFeature: addToFeature
}).addTo(map);

var overlayMaps =  {
    "Blocks 1995": geojson,
    "Blocks 1996": geojson1
};

Here是一个有效的例子

Here是另一个使用this插件实现单选按钮而不是复选框的示例

<强>被修改

根据您的评论，我使用this传单时间滑块插件创建了一个示例。这是代码的一部分。

//I've created 5 geojson layers, in order the slider to look appropriate.
geojson = L.geoJson(blocks1995, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1995" //this is for labeling, you may alter this value if required
});

geojson1 = L.geoJson(blocks1996, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1996"
});

geojson2 = L.geoJson(blocks1997, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1997"
});

geojson3 = L.geoJson(blocks1998, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1998"
});

geojson4 = L.geoJson(blocks1999, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1999"
});

//now add each geojson layer to a single layer group, as the slider take only one layer
var layerGroup = L.layerGroup([geojson, geojson1, geojson2, geojson3, geojson4 ]);

//initiate slider, follow = 1 means, show one feature at a time
var sliderControl = L.control.sliderControl({layer:layerGroup, follow: 1});
map.addControl(sliderControl);//add slider to map
sliderControl.startSlider();//starting slider

Here是工作示例

传单 - 随着时间的推移交互式等值线图

1 个答案: