Openlayers 3获取线段和多边形点

Question

我正在使用OpenLayers 3在地图上绘制点/段/多边形。我完成的第一部分是绘制点/图像，制作线段/多边形等。现在，我正在尝试检索添加的元素点（坐标），以便为其他会话构建它们。 我当前的进度是仅获得点/图像的坐标，但无法获得线段/多边形的坐标。 任何想法/帮助吗？

<!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

您的问题尚不清楚，也没有显示用于获取点/图像坐标的代码。 但仅对于多边形：

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());
    }
});

如果您不想按其他类型过滤要素，请访问以下有用链接： http : //openlayers.org/en/v3.6.0/apidoc/ol.geom.html#GeometryType

编辑：我以前没有检查过HTML，但是从我看来，我认为您甚至不需要if子句。

Openlayers 3获取线段和多边形点

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-23 11:19:59

Openlayers 3获取线段和多边形点

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-23 11:19:59

解决方案1
1 已采纳 2015-07-23 11:19:59