Openlayers 3 获取线段和多边形点

Question

我正在使用 OpenLayers 3 在地图上绘制 points/segments/polygons。我完成的第一部分是绘制 points/images，制作 segments/polygons 等。现在我试图检索添加的元素 points(coordinates) ，以便为其他会话构建它们。我目前的进展只是获取 point/image 的坐标，但无法获取 segment/polygon 的坐标。任何想法/帮助??

<!DOCTYPE html>
<html>
<head>
    <title>Draw and modify features example</title>
    <script src="jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="ol.js"></script>

</head>
<body>
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
            </div>
            <form class="form-inline">
                <label>Geometry type &nbsp;</label>
                <select id="type">
                    <option value="Point">Point</option>
                    <option value="LineString">LineString</option>
                    <option value="Polygon">Polygon</option>
                </select>
            </form>
        </div>

    </div>
    <script type="text/javascript">
            var icons = [
                "stop_sign.png",
                "Argentina_P-32.svg.png"
            ];

            var source = new ol.source.XYZ({
                    url : 'tiles/{z}/{x}/{y}.png'
                });

            var map = new ol.Map({
                    layers : [new ol.layer.Tile({
                            source : source
                        })],
                    target : 'map',
                    view : new ol.View({
                        center : [3300000, 6000000],
                        zoom : 9
                    })
                });

            var features = new ol.Collection();
            var featureOverlay = new ol.layer.Vector({
                    source : new ol.source.Vector({
                        features : features
                    }),
                    style : new ol.style.Style({
                        fill : new ol.style.Fill({
                            color : 'rgba(255, 255, 255, 0.2)'
                        }),
                        stroke : new ol.style.Stroke({
                            color : '#ffcc33',
                            width : 2
                        }),
                        image : new ol.style.Icon({
                            anchor : [0.5, 0.5],
                            offset : [0, 0],
                            opacity : 1,
                            scale : 1,
                            src : icons[1]
                        })
                    })
                });
            featureOverlay.setMap(map);

            var modify = new ol.interaction.Modify({
                    features : features,

                    deleteCondition : function (event) {
                        return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
                    },
                });

            map.addInteraction(modify);

            var draw; // global so we can remove it later
            function addInteraction() {
                console.log(1);
                draw = new ol.interaction.Draw({
                        features : features,
                        type :
                        (typeSelect.value)
                    });
                map.addInteraction(draw);
            }

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

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

            addInteraction();

</script>
</body>
</html>

Answer 1

您的问题不是很清楚，您也没有显示获取 point/image 坐标的代码。但仅适用于多边形：

var polyFeatures = featureOverlay.getSource();

var coordsMulti = [];
var coordsSingle = [];

polyFeatures.forEachFeature(function (polyFeature) {
    if (polyFeature.getGeometry().getType() === 'Polygon') {
        // this will get you all polygon coordinates
        coordsMulti.push(polyFeature.getGeometry().getCoordinates());

        // this will get you central coordinate of polygon
        coordsSingle.push(polyFeature.getGeometry().getInteriorPoint());
    }
});

如果您不想按其他类型过滤要素，这里很有用 link：http://openlayers.org/en/v3.6.0/apidoc/ol.geom.html#GeometryType

编辑： 我之前没有检查过你 HTML，但据我所知，我认为你甚至不需要 if 子句。

Openlayers 3 获取线段和多边形点

Openlayers 3 get segment and polygon points

javascript

openstreetmap

openlayers-3