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

您的问题不是很明确，也不会显示获取点/图像坐标的代码。但只是对于多边形：

.information {height: 100%;position: relative;top: 0;}
.information p{margin: 0;}

如果您不想通过其他类型过滤功能，请点击以下链接：http://jsfiddle.net/2LcpaeLm/

修改我之前没有检查过HTML，但从我看到的情况来看，我认为你甚至不需要if条款。

Openlayers 3获得分段和多边形点

1 个答案: