2017-08-23 17 views
0

私は同僚が作成したWebアプリケーションのサポートを引き継いだ。これは、ポップアップでopenlayersマップを表示します。ツールを使用してポリゴンを選択し、ポリゴン内のアドレスのリストを取得できます。これは突然動作を停止しました - 唯一の違いは、ユーザーが現在Windows 10のPCを持っていることです。私はそのインターネットの設定を期待し、負荷を試した後、他の誰かが考えを持っているかもしれないと思った。Openlayers - ポリゴンを描画した後の座標の取得

答えて

0

質問の見出しに基づいて、私は多角形を描いた後に座標を書くことに問題があると推測します。

OpenLayersの使用(v4.3.3)ポリゴンを描画した後、さまざまな形式(wkt & 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>

関連する問題