OpenLayer 3カスタム測定コントロールMeass reTool

2631 ワード

OpenLayer 3に既存の測定ツールがないことに悩んでいましたが、歪んだ果仁が作ったレイヤーコントロールを見て、自分で公式サイトのmeasreのインスタンスと曲がった果仁のテンプレートを結合して、測定ツールコントロールを叩きました。
ダウンロード
説明
Openlayers 3によるカスタムコントロールは、測定距離と測定面積（area）とgeodesic測定をサポートします。

cssとjsファイルを読み込み、直接参照すればいいです。

JavaScriptを使用して、JQuery

を導入する必要はありません。
使用効果は図の通りです。

使い方
htmlページにOpenLayer 3のcssとjsファイルを導入し、ダウンロードしたmeass retool.cssとmeass retool.jsを追加します。


<link rel="stylesheet" href="measureTool.css" type="text/css">
<script type="text/javascript" src="measureTool.js"></script>

その後、mapを初期化した後、Meass reToolツールを追加します。


var MeasureTool = new ol.control.MeasureTool({
 sphereradius : 6378137,//sphereradius
});
map.addControl(MeasureTool);

これらのパラメータスフィアadiusは、geodesic測定をサポートして球半径を設定するものであり、異なるモデルによって異なる半径の大きさを設定することができ、デフォルトの大きさは6378137であり、導入時にはこのパラメータに入らなくてもよい。
注：測定ツールの中のcheckboxはgeodesicを使って測定することに選択されています。geodesicを使わない測定には選択されていません。デフォルトは未選択です。
完全な例のhtmlコード:


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="author" content="[email protected]" />
 <title>ol3-MeasureTool    (example)</title>
 <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
 <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
 <link rel="stylesheet" href="measureTool.css" type="text/css">
 <script type="text/javascript" src="measureTool.js"></script>

 <style>
  #map{
  height: 80%;
  width: 90%;
  }

  </style>
 </head>
 <body>
 <div id="map" class="map"></div>

 <script type="text/javascript">
  var map = new ol.Map({
  layers: [
   new ol.layer.Tile({
   source: new ol.source.OSM()
   })
  ],
  target: 'map',
  view: new ol.View({
   center: [11575000, 3602500],
   zoom: 14
  })
  });

  var MeasureTool = new ol.control.MeasureTool({
  sphereradius : 6378137,//sphereradius
  });
  map.addControl(MeasureTool);
 </script>

 </body>
</html>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

Linuxにおけるzip圧縮とunzip解凍命令及び使用の詳細

webview内のiframe内のイベントの解決には利用できない問題があります。