OpenLayer3自定義測量控件MeasureTool
更新時(shí)間：2020年09月28日 09:12:19 作者：續(xù)漢冕
這篇文章主要為大家詳細(xì)介紹了OpenLayer3自定義測量控件MeasureTool，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一直苦惱于OpenLayer3沒有現(xiàn)成的測量工具，看了歪果仁做的圖層控件，于是自己結(jié)合了官網(wǎng)上的measure實(shí)例和歪果仁的模板鼓搗出了一個(gè)測量工具控件。
下載地址
描述
基于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);
其中的參數(shù)sphereradius 是用來支持geodesic測量設(shè)置球體半徑的，可根據(jù)不同的模型設(shè)置不同的半徑大小，默認(rèn)大小為6378137，在引入時(shí)也可以不傳入該參數(shù)。
注：測量工具中的checkbox選中為使用geodesic測量，未選中為不使用geodesic測量，默認(rèn)為未選中。
完整示例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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Highcharts使用簡例及異步動(dòng)態(tài)讀取數(shù)據(jù)
Highcharts 是一個(gè)用純JavaScript編寫的一個(gè)圖表庫， 能夠很簡單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用，通過本文給大家介紹Highcharts使用簡例及異步動(dòng)態(tài)讀取數(shù)據(jù)的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法
今天小編就為大家分享一篇layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下2016-03-03
JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JS點(diǎn)擊鏈接后慢慢展開隱藏著圖片的方法,實(shí)例分析了javascript操作圖片的隱藏與現(xiàn)實(shí)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
11款基于JavaScript的文件管理器，大多數(shù)免費(fèi)開源，功能并不遜色于那些專業(yè)的文件管理程序。2009-10-10
js實(shí)現(xiàn)輪播圖效果 z-index實(shí)現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
利用js判斷手機(jī)是否安裝某個(gè)app的多種方案
這篇文章主要介紹了利用js檢測手機(jī)是否安裝某個(gè)app的多種方案，當(dāng)判斷后如果安裝了直接打開，如果有沒有安裝將自動(dòng)跳轉(zhuǎn)到下載的界面，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要給大家介紹了關(guān)于uniapp圖片展示自適應(yīng)等比例縮放方法的相關(guān)資料,在uniapp頁面展示中會(huì)遇到圖片展示問題,等比縮放或者自適應(yīng)view大小,需要的朋友可以參考下2023-10-10
本文主要介紹了JS變量及其作用域的相關(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03