小冊子 - 隨着時間的推移互動等值線地圖

Question

我有從2000年到2010年的30個地區的密度數據。 我想爲每年製作交互式的等值線圖，然後使用滑塊（理想情況下）或一個單選按鈕來選擇年份。

我可以在第一年獲得互動性，但不會在其他年份的圖層上獲得。 你可以看到一個工作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按時間查詢（例如，當一個滑塊移動時）並且每年產生交互式的choropleth。

謝謝！

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是工作示例