OpenLayer3自定義測量控件MeasureTool

更新時間：2020年09月28日 09:12:19 作者：續(xù)漢冕

這篇文章主要為大家詳細介紹了OpenLayer3自定義測量控件MeasureTool，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一直苦惱于OpenLayer3沒有現(xiàn)成的測量工具，看了歪果仁做的圖層控件，于是自己結合了官網上的measure實例和歪果仁的模板鼓搗出了一個測量工具控件。

下載地址

描述

基于Openlayers3所做的自定義控件，支持測量距離（line）和測量面積（area）以及geodesic測量

加載css和js文件后直接引用即可
使用JavaScript原生編寫，不需要引入JQuery

使用效果如圖：

使用方式

在html頁面中引入OpenLayer3的css和js文件后再加入下載的measuretool.css和measuretool.js

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

之后在初始化map之后加入MeasureTool工具：

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

其中的參數sphereradius 是用來支持geodesic測量設置球體半徑的，可根據不同的模型設置不同的半徑大小，默認大小為6378137，在引入時也可以不傳入該參數。

注：測量工具中的checkbox選中為使用geodesic測量，未選中為不使用geodesic測量，默認為未選中。

完整示例html代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="author" content="giser_yugang@163.com" />
 <title>ol3-MeasureTool使用示例(example)</title>
 <link rel="stylesheet"  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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: