OpenLayer3自定义测量控件MeasureTool

一直苦恼于OpenLayer3没有现成的测量工具，看了歪果仁做的图层控件，于是自己结合了官网上的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" 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Openlayers测量距离与面积的实现方法

    本文实例为大家分享了Openlayers测量距离与面积的具体代码,供大家参考,具体内容如下 1.地图测量功能 一般的地图的测量功能主要表现在两个方面,一是测量距离,一是测量面积:面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离,下面我们就在Openlayers3中来实现这一功能: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/

  • Openlayers实现距离面积测量

    本文实例为大家分享了Openlayers实现距离面积测量的具体代码,供大家参考,具体内容如下 CSS .ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; } .ol-tooltip-measure { opaci

  • OpenLayers3实现测量功能

    本文实例为大家分享了OpenLayers3实现测量功能的具体代码,供大家参考,具体内容如下 1. 前言 测量功能实现面积的测量以及长度的测量.通过鼠标绘制区域以及长度来进行测量.OpenLayers 3 框架没有提供测量控件,但提供了相应的接口,需要需要基于几何对象的相应接口,结合图形绘制功能实现. 2. 实现思路 (1)新建一个网页,引用 openlayers 3 开发库.jQuery 库与 bootstrap 库,并参照前面显示地图的文章,加载 OSM 瓦片图层. (2)在地图容器中,创建一

  • Openlayers实现测量功能

    本文实例为大家分享了Openlayers实现测量的具体代码,供大家参考,具体内容如下 由于公司项目需要使用到openlayers,就开始学习了openlayers,其中有一个需求需要用到测量功能,就参考<WebGisOpenlayers全面解析>写了一个小demo,话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&qu

  • OpenLayer学习之自定义测量控件

    OpenLayer 学习之自定义测量控件(目前ol3的版本不会抛异常) 一.自定义控件是在继承基类空间基础上实现的,控件不是我写的(毕竟技术有限)最近也在一直在研究源码进行模仿想写出自己的功能更为强大的控件. 二.控件源码 1.css样式设置 .tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 24px 4px 8px; opac

  • OpenLayer3自定义测量控件MeasureTool

    一直苦恼于OpenLayer3没有现成的测量工具,看了歪果仁做的图层控件,于是自己结合了官网上的measure实例和歪果仁的模板鼓捣出了一个测量工具控件. 下载地址 描述 基于Openlayers3所做的自定义控件,支持测量距离(line)和测量面积(area)以及geodesic测量 加载css和js文件后直接引用即可 使用JavaScript原生编写,不需要引入JQuery 使用效果如图: 使用方式 在html页面中引入OpenLayer3的css和js文件后再加入下载的measuretoo

  • Android自定义表格控件满足人们对视觉的需求

    Android自定义表格控件满足人们对视觉的需求

    Android平台已经给我们提供了很多标准的组件,如:TextView.EditView.Button.ImageView.Menu等,还有许多布局控件,常见的有:AbsoluteLayout.LinerLayout.RelativeLayout.TableLayout等.但随着人们对视觉的需求,基本组件已无法满足人们求新求异的要求,于是我们常常会自定义组件,用来实现更美观的UI界面. 实现自定义控件通常有两种途径,一种是继承View类,重写其中的重要方法,另一种是继承ViewGroup类,通过

  • Android自定义日历控件实例详解

    Android自定义日历控件实例详解

    为什么要自定义控件 有时,原生控件不能满足我们对于外观和功能的需求,这时候可以自定义控件来定制外观或功能:有时,原生控件可以通过复杂的编码实现想要的功能,这时候可以自定义控件来提高代码的可复用性. 如何自定义控件 下面我通过我在github上开源的Android-CalendarView项目为例,来介绍一下自定义控件的方法.该项目中自定义的控件类名是CalendarView.这个自定义控件覆盖了一些自定义控件时常需要重写的一些方法. 构造函数 为了支持本控件既能使用xml布局文件声明,也可在ja

  • Android中View自定义组合控件的基本编写方法

    Android中View自定义组合控件的基本编写方法

    有很多情况下,我们只要运用好Android给我提供好的控件,经过布局巧妙的结合在一起,就是一个新的控件,我称之为"自定义组合控件". 那么,这种自定义组合控件在什么情况下用呢?或者大家在做项目时候会发现,某些布局会被重复的利用,同一个布局的XML代码块会被重复的复制黏贴多次,这样会造成代码结构混乱不说,代码量也会增大,各种控件都需要在Java代码中被申明和处理相应的逻辑,工作量着实不小,所以,必须要找到一个合理的"偷懒"的方式,开动脑经去怎么简化以上说的不必要的麻烦

  • Android自定义View控件实现多种水波纹涟漪扩散效果

    Android自定义View控件实现多种水波纹涟漪扩散效果

    效果图 实现思路 这个效果实现起来并不难,重要的是思路 此View满足了多种水波纹涟漪扩散效果,这要求它能满足很多的变化 根据上面的样式,可以看出此View需要满足以下变化 圆圈从中心可循环向外扩散 圆圈之间的扩散间距可以改变 可控制扩散圆的渐变度 圆圈可以是线条样式或者实心样式 圆圈扩散的速度可以控制 适配圆圈不同大小下的扩散效果 具体实现 创建自定义属性 首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <declare-styleable name

  • iOS开发中使用Quartz2D绘图及自定义UIImageView控件

    iOS开发中使用Quartz2D绘图及自定义UIImageView控件

    绘制基本图形 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?)(输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 相同的一套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上. Quartz2D提供了以下几种类型的Graphics Context: Bitmap Graphics Context PDF Grap

  • 自定义ExtJS控件之下拉树和下拉表格附源码

    自定义ExtJS控件之下拉树和下拉表格附源码

    简介 在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么难了.下面是下拉树的代码: 复制代码 代码如下: Ext.define('ComboTreeBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = th

  • android之视频播放系统VideoView和自定义VideoView控件的应用

    android之视频播放系统VideoView和自定义VideoView控件的应用

    Android播放视频,包含系统自带VideoView控件,和自定义VideoView控件,可全屏播放,案例包含了本地视频和网络视频. 1:自定义VideoView控件 2:布局代码 3:Activity代码: 4:网络权限 5:效果图 小结:其中的Uri mUri = Uri.parse("android.resource://" + getPackageName() +"/"+ R.raw.qiche);//本地视频 是加载的本地视频,可以下载一个视频,在res

  • 使用CustomValidator自定义验证控件检查是否有对ListBox控件选择

    使用CustomValidator自定义验证控件检查是否有对ListBox控件选择

    在前网页前端处,我们放置ListBox控件,在数据提交前,检查用户是否有对此控件进行选择? Insus.NET的方法是使用Javascript与CustomValidator自定义验证控件来检查. 可以看到最终结果:  你也想参此例子,可以参考下面数据与准备方法,写一个对象,它将用来产生十个天干. HeavenlyStem.cs 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using

随机推荐