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

Question

从2000年到2010年,我有30多个地区的密度数据.我想为每年创建一个交互式的等值区域地图,然后使用滑块(理想情况下)或单选按钮来选择年份.

我可以在第一年获得互动,但不会在其他年份的层次上.你可以在这里看到一个有用的例子,但是让我在下面提供一些细节:

为简单起见,请考虑两年.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交互式等值理论教程中的样板交互代码放到了我的地图上:

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

这是一个有效的例子

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

编辑

根据你的评论,我使用这个传单时间滑块插件创建了一个例子.这是代码的一部分.

//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

这是工作示例