Question

我接管了一位同事撰写的Web应用程序。它在弹出窗口中显示openlayers地图。您可以使用工具选择多边形，并检索多边形内的地址列表。这突然停止了工作 - 唯一的区别是用户现在有Windows 10 PC。我期待它的互联网设置，并在尝试加载后认为其他人可能有想法。

Answer 1

根据问题标题，我会假设问题是在绘制多边形后写入坐标。

使用OpenLayers（v4.3.3）我将绘制多边形后输出不同格式（wkt＆amp; geojson）和几何范围的简单片段放在一起。

对不起，迟到的答案，但我希望它有所帮助：）

var vector = new ol.layer.Vector({
    source: new ol.source.Vector()
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vector
    ],
    target: 'map',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});



var button = $('#pan').button('toggle');
var interaction;
var features = undefined;;
$('div.btn-group button, #point').on('click', function(event) {

    var features;
    var selectedFeatures = undefined;
    map.removeInteraction(interaction);

            interaction = new ol.interaction.Draw({
                type: 'Polygon',
                source: vector.getSource()
            });
            vector.getSource().on('addfeature', function(e) {
                var source = e.target;
                var writer = new ol.format.WKT();
                var geojson = new ol.format.GeoJSON();
                

                if (vector.getSource().getState() === 'ready') {
                    //https://gis.stackexchange.com/questions/179907/openlayers-3-geojson-save-and-load
                    var wkt = writer.writeFeatures(vector.getSource().getFeatures());
                    var geojson = geojson.writeFeatures(vector.getSource().getFeatures());
                    var extent =vector.getSource().getExtent();
                    document.getElementById("export_wkt").innerHTML ='<b>WKT EXPORT:</b>' + wkt;
                    document.getElementById("export_geojson").innerHTML ='<b>GEOJSON EXPORT:</b>' + geojson;
                    document.getElementById("extent").innerHTML ='<b>POLYGON EXTENT:</b>' + extent;
                }
            });
            map.addInteraction(interaction);
 
    var snap = new ol.interaction.Snap({
        source: vector.getSource()
    });
    map.addInteraction(snap);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.2/css/ol.css" type="text/css">
</head>

<body>
    <div class="container">
        <div id="map" class="map"></div>
            <pre>
            <div id="export_wkt"></div>
            <div id="export_geojson"></div>
            <div id="extent"></div>
            </pre>
        <!-- <button type="button" class="btn btn-outline-danger" id="js-remove">Izbriši</button> -->
        <div class="btn-group btn-group-sm" id="bar" role="group" aria-label="Draw">
            <button id="select" type="button" class="btn btn-default active">Draw Polygon</button>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <script src="https://openlayers.org/en/v4.3.2/build/ol.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
        <!-- <script src="functions_draw.js" type="text/javascript"></script> -->
</body>

Openlayers - 绘制多边形后获取坐标

1 个答案: