[英]Leaflet polygon display charts after click
我是 Leaflet 的新手,我有一個 map,我在上面導入了幾個多邊形。 我的多邊形數據存儲在一個 .js 文件中。
現在我希望在單擊多邊形時顯示簡單的圖表。
我的想法是使用多邊形輪廓數據或單獨文件中可用的數據(文本和數字)。
我想在我的 leaflet map 之外顯示圖表。 它們將始終是相同的圖表,只有當您單擊不同的多邊形時數據會發生變化。
我看到我可以將 D3.js 或 Chart.js 用於圖表。
我的問題是將點擊我的 map 的多邊形與正確圖形的顯示聯系起來。
編輯:這是我目前使用的代碼
<script type="text/javascript" src="file.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([39.0, -98.26], 10);
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href= »http://osm.org/copyright »>OpenStreetMap</a> contributors',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'black',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
var country = L.geoJson(data, {
style: style,
}).addTo(map);
var small= L.geoJson(data2, {
style: style,
}).addTo(map);
var baseMaps = {
"OSM": osmLayer
};
var overlayMaps = {
"Country": country,
"Small": small
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
在我的 2.js 文件中有如下數據:
var data={"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"Zip":"92662","Name":"Paris","density":500},"geometry":{"type":"MultiPolygon","coordinates":xxx ,
]};
我做了很多研究,但不確定是否有可能或如何根據單擊的多邊形顯示圖表(不是彈出窗口中的圖表)。 我需要幫助知道要尋找什么。
謝謝您的幫助
您可能想使用onEachFeature
function countryFunc(feature, layer){
layer.on('click', function(){
// console.log(feature);
/* get your chart now */
});
}
const country = L.geoJson(data, {style: style, onEachFeature:countryFunc}).addTo(map);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.