Блог

Главная - Вопросы по программированию - Получить идентификатор, соответствующий листовке javascript

Получить идентификатор, соответствующий листовке javascript

#leaflet

Вопрос:

Как я могу получить идентификатор, который я дал полигону, щелкнув?

 var geojson = {
                "type": "FeatureCollection",
                "features": [{
                    "postalAreaId": item.PostalAreaId,
                    "type": "Feature",
                    "properties": {
                        "name": "Coors Field",
                        "amenity": "Baseball Stadium",
                        "popupContent": "This is where the Rockies play!"
                    },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": []
                    }
                }]
            };

введите описание изображения здесь

Ответ №1:

Вы можете использовать опцию onEachFeature при рисовании объектов на карте… Возможным решением было бы:

 var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "postalAreaId": 1,
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-105.00341892242432, 39.75383843460583],
            }
        },
        {
            "postalAreaId": 2,
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates":     [-105.0008225440979, 39.751891803969535],
            }
        }]
};
var map = L.map('map').setView([39.74739, -105], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data amp;copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, '  
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);

function onEachFeature(feature, layer) {
    layer.on('click', function (e) {
        alert(feature.postalAreaId)
    })
}

L.geoJSON(geojson, {
    onEachFeature: onEachFeature
}).addTo(map); 
 html, body {
    height: 100%;
    margin: 0;
}

#map {
    width: 600px;
    height: 400px;
} 
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<div id='map'></div>

В данном случае я использую click , но вы также можете использовать mousein и mouseout . В принципе, внутри onEachFeature функции вы добавляете прослушиватель, который будет проверять события, происходящие на каждом объекте карты.

Комментарии:

1. Спасибо, это было здорово, Как я могу проверить позицию пользователя, не нажимая, находится ли она в многоугольнике или нет

2. Я хочу получить статус пользователя из браузера, а затем опубликовать его usaupload.com/4Xij/2021-09-25_17-33-49.jpg

Метки: ,