อยากสอบถามการใช้งาน
timeDimensionControl ถ้าใช้ร่วมกับไฟล์ CSV ต้องเขียนยังไงครับ
ผมลองตัวอย่างเจอแต่ที่ใช้กับข้อมูล geoJson
https://www.mx7.com/view2/BToU4Xg7b9fKrYQk
ข้อมูล CSV
https://www.mx7.com/view2/BToSMQ3Z5J1xPbfc
รูปแผนที่ที่ใช้งาน timeDimensionContro (อันนี้ใช้ร่วมกับ geoJson )
https://www.mx7.com/view2/BToSKmdd6N7AJ1ie
โค๊ดบางส่วน
map_TH.timeDimension = L.timeDimension({period:"P1M"});
var timeDimensionControl = new L.Control.TimeDimensionCustom({
"autoPlay": false,
"loopButton": true,
"maxSpeed": 1,
"minSpeed": 0.1,
"playerOptions": {
"loop": false,
"startOver": true,
"transitionTime": 200
},
"position": "bottomleft",
"timeSliderDragUpdate": true
});
map_TH.addControl(this.timeDimensionControl);
console.log("");
var geoJsonLayer = L.geoJson({"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [4.34858747427388, 50.8508105371924]}, "properties": {"time": "2013-01-31", "style": {"color": "#2166ac"}, "icon": "circle", "iconstyle": {"fillColor": "#2166ac", "fillOpacity": 0.8, "stroke": "true", "radius": 7}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [4.34858747427388, 50.8508105371924]}, "properties": {"time": "2013-02-28", "style": {"color": "#053061"}, "icon": "circle", "iconstyle": {"fillColor": "#053061", "fillOpacity": 0.8, "stroke": "true", "radius": 7}}},
{"color": "#2166ac"}, "icon": "circle", "iconstyle": {"fillColor": "#2166ac", "fillOpacity": 0.8, "stroke": "true", "radius": 7}}}]}, {
pointToLayer: function (feature, latLng) {
if (feature.properties.icon == 'marker') {
if(feature.properties.iconstyle){
return new L.Marker(latLng, {
icon: L.icon(feature.properties.iconstyle)});
}
//else
return new L.Marker(latLng);
}
if (feature.properties.icon == 'circle') {
if (feature.properties.iconstyle) {
return new L.circleMarker(latLng, feature.properties.iconstyle)
};
//else
return new L.circleMarker(latLng);
}
//else
return new L.Marker(latLng);
},
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function(feature, layer) {
if (feature.properties.popup) {
layer.bindPopup(feature.properties.popup);
}
}
})
var timestamped_geo_json = L.timeDimension.layer.geoJson(geoJsonLayer,
{updateTimeDimension: true,
addlastPoint: true,
duration: undefined,
}).addTo(map_TH);
สอบถามการใช้งาน timeDimensionControl ถ้าใช้ร่วมกับไฟล์ CSV ใน Java Script
ผมลองตัวอย่างเจอแต่ที่ใช้กับข้อมูล geoJson https://www.mx7.com/view2/BToU4Xg7b9fKrYQk
ข้อมูล CSV
https://www.mx7.com/view2/BToSMQ3Z5J1xPbfc
รูปแผนที่ที่ใช้งาน timeDimensionContro (อันนี้ใช้ร่วมกับ geoJson )
https://www.mx7.com/view2/BToSKmdd6N7AJ1ie
โค๊ดบางส่วน
map_TH.timeDimension = L.timeDimension({period:"P1M"});
var timeDimensionControl = new L.Control.TimeDimensionCustom({
"autoPlay": false,
"loopButton": true,
"maxSpeed": 1,
"minSpeed": 0.1,
"playerOptions": {
"loop": false,
"startOver": true,
"transitionTime": 200
},
"position": "bottomleft",
"timeSliderDragUpdate": true
});
map_TH.addControl(this.timeDimensionControl);
console.log("");
var geoJsonLayer = L.geoJson({"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [4.34858747427388, 50.8508105371924]}, "properties": {"time": "2013-01-31", "style": {"color": "#2166ac"}, "icon": "circle", "iconstyle": {"fillColor": "#2166ac", "fillOpacity": 0.8, "stroke": "true", "radius": 7}}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [4.34858747427388, 50.8508105371924]}, "properties": {"time": "2013-02-28", "style": {"color": "#053061"}, "icon": "circle", "iconstyle": {"fillColor": "#053061", "fillOpacity": 0.8, "stroke": "true", "radius": 7}}},
{"color": "#2166ac"}, "icon": "circle", "iconstyle": {"fillColor": "#2166ac", "fillOpacity": 0.8, "stroke": "true", "radius": 7}}}]}, {
pointToLayer: function (feature, latLng) {
if (feature.properties.icon == 'marker') {
if(feature.properties.iconstyle){
return new L.Marker(latLng, {
icon: L.icon(feature.properties.iconstyle)});
}
//else
return new L.Marker(latLng);
}
if (feature.properties.icon == 'circle') {
if (feature.properties.iconstyle) {
return new L.circleMarker(latLng, feature.properties.iconstyle)
};
//else
return new L.circleMarker(latLng);
}
//else
return new L.Marker(latLng);
},
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function(feature, layer) {
if (feature.properties.popup) {
layer.bindPopup(feature.properties.popup);
}
}
})
var timestamped_geo_json = L.timeDimension.layer.geoJson(geoJsonLayer,
{updateTimeDimension: true,
addlastPoint: true,
duration: undefined,
}).addTo(map_TH);