OpenLayer3自定义测量控件MeasureTool


Posted in Javascript onSeptember 28, 2020

一直苦恼于OpenLayer3没有现成的测量工具,看了歪果仁做的图层控件,于是自己结合了官网上的measure实例和歪果仁的模板鼓捣出了一个测量工具控件。

下载地址

描述

基于Openlayers3所做的自定义控件,支持测量距离(line)和测量面积(area)以及geodesic测量

  • 加载css和js文件后直接引用即可
  • 使用JavaScript原生编写,不需要引入JQuery

使用效果如图:

OpenLayer3自定义测量控件MeasureTool

使用方式

在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" 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
Openlayers实现距离面积测量
Sep 28 #Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 #Javascript
JS sort排序详细使用方法示例解析
Sep 27 #Javascript
vue中实现点击变成全屏的多种方法
Sep 27 #Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 #Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 #Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP安全配置详细说明
2011/09/26 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python中__name__的使用实例
2015/04/14 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python数据结构之单链表详解
2017/09/12 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python交易记录链的实现过程详解
2019/07/03 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
工作岗位说明书模板
2014/05/09 职场文书
代理人委托书
2014/09/16 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技