Leaflet

Question

我有 2000 年到 2010 年 30 个地区的人口密度数据。我想为每年制作一个交互式等值线图，然后使用滑块（理想情况下）或单选按钮在年份之间 select。

我可以在第一年获得交互性，但在其他年份则不能。你可以看到一个工作 example here，但让我在下面放一些细节：

为简单起见，只考虑两年。 blocks1995 具有不重叠的多边形 BlockA 和 BlockB（两个区）并且 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

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

我将在此 Leaflet interactive choropleth tutorial 中找到的样板交互代码放入地图中：

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

L.control.layers(null, overlayMaps).addTo(map);

问题是我只向 blocks1995 添加了交互性，但我无法将其添加到 overlayMaps。

我可以使用 Leaflet 插件（我试过 TimeSlider 但还是搞不懂）。

另一种可能性是将 block1995 和 block1996 这两个变量组合成一个具有额外功能的变量 year 或 time 可以使事情变得更容易。 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 is another example where I've implemented radio buttons instead of checkboxes using 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 是工作示例

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

Leaflet - Interactive choropleth map over time

javascript

interactive

geo

choropleth