전단지 - 시간에 따른 대화 형 choropleth지도

Question

2000 년부터 2010 년까지 30 개 이상의 지역의 데이터를 보유하고 있습니다. 나는 매년 대화 형 choropleth 맵을 만들고 싶습니다. 그리고 슬라이더 (이상적으로)를 사용하거나 년 중에서 선택하는 라디오 버튼.

첫 해에는 상호 작용이 가능하지만 다른 해에는 상호 작용할 수 없습니다. example here을 볼 수 있지만 아래에 몇 가지 세부 정보를 넣으십시오.

간단하게 2 년을 고려하십시오. blocks1995에는 겹치지 않는 다각형 BlockA와 BlockB (두 개의 구역)가 있고 blocks1996에는 같은 블록이 있습니다.

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에있는 보일러의 상호 작용 코드를 삽입 한 후 나는 다시 추가 : 그들은 choropleth을 생산 density라는 속성이 지도 :

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

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

문제는 blocks1995에만 대화 형 기능을 추가하는 것이지만 문제는 아닙니다. overlayMaps에 추가 할 수 있습니다.

리플릿 플러그인을 사용해도 좋습니다. (TimeSlider를 시도했지만 해결할 수 없었습니다).

또 다른 가능성은 year 또는 time가 그 일을 더 쉽게 만드는 것입니다 추가 기능을 하나에 두 block1995 및 block1996 변수를 결합하는 것입니다. 아이디어는 리프 렛이 시간에 따라 쿼리 (예 : 슬라이더가 움직일 때)하고 쌍방향 대화를 생성하는 것입니다.

감사합니다.

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 당신은 clearLayers()을 변경할 때 년에 시도하고 새로운 데이터를 추가 할 수 있습니다 작업 예를