为多个geojson-objects javascript添加单击侦听器

基础概念

GeoJSON 是一种基于 JSON 的地理空间数据交换格式，用于表示简单的地理要素及其非空间属性。GeoJSON 对象可以表示点、线、多边形等地理要素。

类型

GeoJSON 支持以下几种类型：

Feature：表示一个地理要素，包含一个几何对象和其他属性。
Point：表示一个点。
LineString：表示一条线。
Polygon：表示一个多边形。
MultiPoint：表示多个点。
MultiLineString：表示多条线。
MultiPolygon：表示多个多边形。

应用场景

GeoJSON 广泛应用于地理信息系统（GIS）、地图服务、数据分析等领域。

添加单击侦听器

要在多个 GeoJSON 对象上添加单击侦听器，可以使用 JavaScript 和地图库（如 Leaflet 或 Mapbox GL JS）。以下是一个使用 Leaflet 的示例：

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON Click Listener</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        // 创建地图
        var map = L.map('map').setView([51.505, -0.09], 13);

        // 添加底图
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // 示例 GeoJSON 数据
        var geojsonData = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-0.09, 51.505]
                    },
                    "properties": {
                        "name": "Point A"
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-0.06, 51.51]
                    },
                    "properties": {
                        "name": "Point B"
                    }
                }
            ]
        };

        // 添加 GeoJSON 图层
        var geojsonLayer = L.geoJSON(geojsonData).addTo(map);

        // 添加单击侦听器
        geojsonLayer.on('click', function (e) {
            var feature = e.feature;
            alert('Clicked on: ' + feature.properties.name);
        });
    </script>
</body>
</html>