个人中心
gpt4 book ai didi

javascript - 获取 OpenLayers 中绘制要素的坐标

转载 作者：搜寻专家 更新时间：2023-11-01 04:51:41 25 4
gpt4 key购买 nike

我正在尝试使用 OpenLayers 3 创建在线 map 。

我是 OpenLayers 的新手，我想做的就是获取我在 map 上绘制的点、线、多边形的坐标。我知道有一个可用的 featuresadded 参数，但我无法正确实现它。

谁能告诉我如何获取绘制要素的坐标(在 alert() 或 console.log 中)的正确方向？

非常感谢!!

这是我的代码:

<html>
<head>
    <script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <style type="text/css">
        body {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: small;
        }
        #map {
            clear: both;
            position: relative;
            border: 1px solid black;
        }            
       #wrapper {
           width: 337px;
           height: 50px;                            
       }            
       #location {
          float: right;
          font-family: Arial, Verdana, sans-serif; 
          font-size: 12px; 
          color: #483D8B;
          background-color: white;
       }
       #nodelist{
          font-family: Arial, Verdana, sans-serif; 
          font-size: 14px; 
          color: #000000;
          font-style: normal;
          background-color: white;
       }
</style>
<script type="text/javascript">
var map;
var draw;
var transformed_coordinate;
var vector;

function init() {
    var view = new ol.View({
    center: ol.proj.transform([13.1929, 55.718],'EPSG:4326', 'EPSG:3857'),
    zoom: 12
    });

var myZoom = new ol.control.Zoom();
var myZoomSlider = new ol.control.ZoomSlider();
var zoomToExtentControl = new ol.control.ZoomToExtent({
    extent: [1453297.22,7490484.81,1483872.03,7513415.91]
});

var myScaleLine = new ol.control.ScaleLine()

var neighborhood = new ol.source.ImageWMS({
    url: 'http://localhost:8090/geoserver/project/wms',
        params: {'LAYERS': 'project:Neighborhood'}
});

var roads = new ol.source.ImageWMS({
    url: 'http://localhost:8090/geoserver/project/wms',
        params: {'LAYERS': 'project:Roads_all'}
});

var source = new ol.source.Vector({wrapX: false});

vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 255, 0, 0.5)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
            color: '#ffcc33'
            })
        })
    })      
});

var layers = [
    new ol.layer.Image({
        source: neighborhood
    }),
    new ol.layer.Image({
        source: roads
    }),
    vector
]   

map = new ol.Map({
    layers: layers,
    target: 'map',
    view: view
}); 

map.addControl(myZoom);
map.addControl(myZoomSlider);
map.addControl(zoomToExtentControl);
map.addControl(myScaleLine);

map.on('singleclick', function(evt){
    var coord = evt.coordinate;
    transformed_coordinate = ol.proj.transform(coord, "EPSG:3857", "EPSG:4326");
    //console.log(transformed_coordinate);
})

function onFeaturesAdded(event){
    var bounds = event.features[0].geometry.getBounds();
    var answer = "bottom: " + bounds.bottom  + "\n";
    answer += "left: " + bounds.left  + "\n";
    answer += "right: " + bounds.right  + "\n";
    answer += "top: " + bounds.top  + "\n";
    alert(answer);
}

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

function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        var geometryFunction, maxPoints;
        if (value === 'Square') {
        value = 'Circle';
        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
        } else if (value === 'Box') {
            value = 'LineString';
            maxPoints = 2;
            geometryFunction = function(coordinates, geometry) {
                if (!geometry) {
                    geometry = new ol.geom.Polygon(null);
                }
                var start = coordinates[0];
                var end = coordinates[1];
                geometry.setCoordinates([
                    [start, [start[0], end[1]], end, [end[0], start[1]], start]
                ]);
                return geometry;
            };
        }
        draw = new ol.interaction.Draw({
            source: source,
            type: /** @type {ol.geom.GeometryType} */ (value),
            geometryFunction: geometryFunction,
            maxPoints: maxPoints
        });
        map.addInteraction(draw);
    }
}

/**
 * Let user change the geometry type.
 * @param {Event} e Change event.
 */
typeSelect.onchange = function(e) {
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();
} //end init


</script>
</head>

<body onload="init()">  
<div id="map" style="width: 800px; height: 600px"></div>
<form class="form-inline">
    <label>Geometry type &nbsp;</label>
    <select id="type">
        <option value="None">None</option>
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
    </select>
</form>
</body>
</html>

最佳答案

注册 listener在 ol.source.Vector 上等待绘制的特征被添加:

source.on('addfeature', function(evt){
    var feature = evt.feature;
    var coords = feature.getGeometry().getCoordinates();
});

关于javascript - 获取 OpenLayers 中绘制要素的坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33129271/

25 4 0
文章推荐： Javascript UMD - 根、工厂在哪里/如何定义？
文章推荐： javascript - 检测 2 个字符串中第一个差异的位置
文章推荐： javascript - string[0].toUpperCase() 没有返回预期结果？
文章推荐： javascript - 如何在codeMirror中高亮语法
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com