点击后传单多边形显示图表

Question

我是 Leaflet 的新手，我有一张地图，我在上面导入了几个多边形。 我的多边形数据存储在 .js 文件中。
现在，我希望在单击多边形时显示简单的图表。
我的想法是使用多边形轮廓数据或单独文件中可用的数据（文本和数字）。
我想在传单地图之外显示图表。它们将始终是相同的图表，只有当您单击不同的多边形时数据会发生变化。
我看到我可以将 D3.js 或 Chart.js 用于图表。
我的问题是将我的地图多边形上的点击与正确图形的显示联系起来。

编辑： 这是我目前使用的代码

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

我做了很多研究，但不确定是否可能或如何根据单击的多边形显示图表（不是弹出式图表）。我需要帮助知道要寻找什么。

感谢您的帮助

Answer 1

您可能想使用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);