Блог

У меня есть проект openlayers. Когда я рисую любое место на карте, я хочу получить координаты нарисованного полигона и информацию о нарисованном месте, такую как название района. Я перепробовал много решений здесь, а также другие советы, но я не могу получить нарисованную координату. Как я могу получить нарисованную многоугольную координату.

Вот мой html-код

    <div id="map" class="map"></div>
    <select id="layer-select" class="layer-select">

        <option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>

    </select>
    <form class="form-inline">
        <label for="type">Geometry type: amp;nbsp;</label>
        <select class="form-control mr-2 mb-2 mt-2" id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
        </select>
        <input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
    </form>
 

Вот код js

   "use strict";
        var TileLayer = ol.layer.Tile;
        var OSM = ol.source.OSM;
        var VectorSource = ol.source.Vector;
        var VectorLayer = ol.layer.Vector;
        var Style = ol.style.Style;
        var Fill = ol.style.Fill;
        var Stroke = ol.style.Stroke;
        var CircleStyle = ol.style.Circle;
        var View = ol.View;
        var Modify = ol.interaction.Modify;
        var Draw = ol.interaction.Draw;
        var Snap = ol.interaction.Snap;
        var Overlay = ol.Overlay;
        var toStringHDMS = ol.coordinate.toStringHDMS;
        var fromLonLat = ol.proj.fromLonLat;
        var toLonLat = ol.proj.toLonLat;

        var raster = new TileLayer({

            preload: Infinity,
            source: new ol.source.BingMaps({
                key: '------------------',
                imagerySet: 'AerialWithLabelsOnDemand',     
            })
        });
        var source = new VectorSource({ wrapX: false });

        var vector = new VectorLayer({
            source: source,

        });


        var map = new ol.Map({
            layers: [
                raster, vector
            ],
            target: 'map',
            view: new View({
                center: fromLonLat([34.9744, 39.0128]),
                zoom: 6,

            })
        });

        var typeSelect = document.getElementById('type');

        var draw; // global so we can remove it later
        function addInteraction() {
            var value = typeSelect.value;
            if (value !== 'None') {
                draw = new Draw({
                    source: source,
                    type: typeSelect.value,
                    
                });
                map.addInteraction(draw);
            }
        }

        typeSelect.onchange = function () {
            map.removeInteraction(draw);
            addInteraction();
        };

        document.getElementById('undo').addEventListener('click', function () {
            draw.removeLastPoint();

        });


        var popup = new Overlay({
            element: document.getElementById('popup'),
        });
        map.addOverlay(popup);

        map.on('click', function (evt) {
            var element = popup.getElement();
            var coordinate = evt.feature;

            var hdms = toStringHDMS(toLonLat(coordinate));

            $(element).popover('dispose');
            popup.setPosition(coordinate);
            $(element).popover({
                container: element,
                placement: 'top',
                animation: false,
                html: true,
                content: '<p>The location you clicked was:</p><code>'   hdms   '</code>',
            });
            $(element).popover('show');
        });
 

 map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
         return feature;
     });
if (feature) {
     var coord = feature.getGeometry().getCoordinates();
     var props = feature.getProperties();
    console.log(props.yourAttributeName);                 
    }        
});