openlayers实现地图测距测面


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了openlayers实现地图测距测面的具体代码,供大家参考,具体内容如下

项目背景vue-cli3.0

public下html需要引入文件

<link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css">
<script src="<%= BASE_URL %>./js/ol.js" type="text/javascript"></script>

这里地图为公共组件,方法写在公共组件的init方法里,kpst._this为地图对象

调用

//测距/面
var draw = me.map._this.interactions.getArray()[10]
me.map._this.removeInteraction(draw);
  if (data.name == '测距' || data.name == '测面') {
  me.map._this.interactions.array_ = arr.slice(0, 10)
  if (data.name == '测距') {
   me.mtype = 'LineString'
  } else {
   me.mtype = 'Polygon'
  }
  me.map._this.measure(me.mtype) //map已挂载到vue原型Vue.prototype.map = map
  } else if (data.name == '清除') {
  me.map._this.clear()
  }

方法挂载

// 测距、面
//创建一个当前要绘制的对象
var sketch
//创建一个帮助提示框对象
var helpTooltipElement;
//创建一个帮助提示信息对象
var helpTooltip;
//创建一个测量提示框对象
var measureTooltipElement;
//创建一个测量提示信息对象
var measureTooltip;
//继续绘制多边形的提示信息
var continuePolygonMsg
//继续绘制线段的提示信息
var continueLineMsg
//帮助提示信息
var helpMsg
//定义矢量数据源
var source = new ol.source.Vector();
//定义矢量图层
var vector = new ol.layer.Vector({
  source: source,
  style: new ol.style.Style({
  fill: new ol.style.Fill({
   color: 'rgba(255,255,255,0.2)'
  }),
  stroke: new ol.style.Stroke({
   color: '#e21e0a',
   width: 2
  }),
  image: new ol.style.Circle({
   radius: 5,
   fill: new ol.style.Fill({
   color: '#ffcc33'
   })
  })
  })
 });
 //创建比例尺控件
 var scaleLineControl = new ol.control.ScaleLine({
  units: 'metric',
  target: 'scalebar',
  className: 'ol-scale-line'
 });
 function measure(mtype) {
  sketch = new ol.Feature();
  // continuePolygonMsg = 'Click to continue drawing the polygon';
  // continueLineMsg = 'Click to continue drawing the line';
  //将矢量图层添加到地图中
  kpst._this.removeLayer(vector);
  kpst._this.addLayer(vector);
  //添加比例尺控件
  kpst._this.removeControl(scaleLineControl);
  kpst._this.addControl(scaleLineControl);
  //鼠标移动触发的函数
  var pointerMoveHandler = function (evt) {
  //如果是平移地图则直接结束
  if (evt.dragging) {
   return;
  }
  //帮助提示信息
  helpMsg = 'Click to start drawing';
  if (sketch) {
   //获取绘图对象的几何要素
   var geom = sketch.getGeometry();
   //如果当前绘制的几何要素是多线段,则将绘制提示信息设置为多线段绘制提示信息
   // if (geom instanceof ol.geom.Polygon) {
   // helpMsg = continuePolygonMsg;
   // } else if (geom instanceof ol.geom.LineString) {
   // helpMsg = continueLineMsg;
   // }
  }
  //设置帮助提示要素的内标签为帮助提示信息
  // if (helpTooltipElement)
  // helpTooltipElement.innerHTML = helpMsg;
  //设置帮助提示信息的位置
  // if (helpTooltip)
  helpTooltip.setPosition(evt.coordinate);
  //移除帮助提示要素的隐藏样式
  // $(helpTooltipElement).removeClass('hidden');
  removeClass(document.getElementsByClassName('tooltip')[0], 'hidden')
  };

  //触发pointermove事件
  kpst._this.on('pointermove', pointerMoveHandler);

  //当鼠标移除地图视图的时为帮助提示要素添加隐藏样式
  document.querySelector('.ol-viewport').onmouseout = function () {
  addClass(document.getElementsByClassName('tooltip')[0], 'hidden')
  }
  // 判断class有无
  function hasClass(ele, cls) {
  if (ele) {
   cls = cls || '';
   if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
   return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
  }
  }
  //添加class
  function addClass(ele, cls) {
  if (!hasClass(ele, cls) && ele) {
   ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
  }
  }
  // 去除class
  function removeClass(ele, cls) {
  if (hasClass(ele, cls) && ele) {
   var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
   while (newClass.indexOf(' ' + cls + ' ') >= 0) {
   newClass = newClass.replace(' ' + cls + ' ', ' ');
   }
   ele.className = newClass.replace(/^\s+|\s+$/g, '');
  }
  }
  //定义一个交互式绘图对象
  var draw;
  //添加交互式绘图对象的函数
  function addInteraction() {
  //创建一个交互式绘图对象
  draw = new ol.interaction.Draw({
   //绘制的数据源
   source: source,
   //绘制类型
   type: mtype,
   //样式
   style: new ol.style.Style({
   fill: new ol.style.Fill({
    color: 'rgba(255,255,255,0.2)'
   }),
   stroke: new ol.style.Stroke({
    color: 'rgba(0,0,0,0.5)',
    lineDash: [10, 10],
    width: 2
   }),
   image: new ol.style.Circle({
    radius: 5,
    stroke: new ol.style.Stroke({
    color: 'rgba(0,0,0,0.7)'
    }),
    fill: new ol.style.Fill({
    color: 'rgba(255,255,255,0.2)'
    })
   })
   })
  });
  //将交互绘图对象添加到地图中
  kpst._this.addInteraction(draw);
  //创建测量提示框
  createMeasureTooltip();
  //创建帮助提示框
  createHelpTooltip();
  //定义一个事件监听
  var listener;
  //定义一个控制鼠标点击次数的变量
  var count = 0;
  //绘制开始事件
  draw.on('drawstart', function (evt) {
   //The feature being drawn.
   sketch = evt.feature;
   //提示框的坐标
   var tooltipCoord = evt.coordinate;
   //监听几何要素的change事件
   //Increases the revision counter and dispatches a 'change' event.
   listener = sketch.getGeometry().on('change', function (evt) {
   //The event target.
   //获取绘制的几何对象
   var geom = evt.target;
   //定义一个输出对象,用于记录面积和长度
   var output;
   if (geom instanceof ol.geom.Polygon) {
    kpst._this.removeEventListener('singleclick');
    kpst._this.removeEventListener('dblclick');
    //输出多边形的面积
    output = formatArea(geom);
    //Return an interior point of the polygon.
    //获取多变形内部点的坐标
    tooltipCoord = geom.getInteriorPoint().getCoordinates();
   } else if (geom instanceof ol.geom.LineString) {
    //输出多线段的长度
    output = formatLength(geom);
    //Return the last coordinate of the geometry.
    //获取多线段的最后一个点的坐标
    tooltipCoord = geom.getLastCoordinate();
   }
   //设置测量提示框的内标签为最终输出结果
   // if (measureTooltipElement)
   measureTooltipElement.innerHTML = output;
   //设置测量提示信息的位置坐标
   // if (measureTooltip)
   measureTooltip.setPosition(tooltipCoord);
   });
   //地图单击事件
   kpst._this.on('singleclick', function (evt) {
   //设置测量提示信息的位置坐标,用来确定鼠标点击后测量提示框的位置
   // if (measureTooltip)
   measureTooltip.setPosition(evt.coordinate);
   //如果是第一次点击,则设置测量提示框的文本内容为起点
   if (count == 0 && measureTooltipElement) {
    measureTooltipElement.innerHTML = "起点";
   }
   //根据鼠标点击位置生成一个点
   var point = new ol.geom.Point(evt.coordinate);
   //将该点要素添加到矢量数据源中
   source.addFeature(new ol.Feature(point));
   //更改测量提示框的样式,使测量提示框可见
   measureTooltipElement.className = 'tooltip tooltip-static';
   //创建测量提示框
   createMeasureTooltip();
   //点击次数增加
   count++;
   });
   //地图双击事件
   kpst._this.on('dblclick', function (evt) {
   //根据
   var point = new ol.geom.Point(evt.coordinate);
   source.addFeature(new ol.Feature(point));
   });
  }, this);
  //绘制结束事件
  draw.on('drawend', function (evt) {
   count = 0;
   //设置测量提示框的样式
   measureTooltipElement.className = 'tooltip tooltip-static';
   //Set the offset for this overlay.
   //设置偏移量
   measureTooltip.setOffset([0, -7]);
   //清空绘制要素
   sketch = null;
   //清空测量提示要素
   measureTooltipElement = null;
   //创建测量提示框
   createMeasureTooltip();
   //Removes an event listener using the key returned by on() or once().
   //移除事件监听
   ol.Observable.unByKey(listener);
   //移除地图单击事件
   kpst._this.removeEventListener('singleclick');
  }, this);
  }
  //创建帮助提示框
  function createHelpTooltip() {
  //如果已经存在帮助提示框则移除
  if (helpTooltipElement) {
   helpTooltipElement.parentNode.removeChild(helpTooltipElement);
  }
  //创建帮助提示要素的div
  if (!helpTooltipElement)
   helpTooltipElement = document.createElement('div');
  //设置帮助提示要素的样式
  helpTooltipElement.className = 'tooltip hidden';
  //创建一个帮助提示的覆盖标注
  helpTooltip = new ol.Overlay({
   element: helpTooltipElement,
   offset: [15, 0],
   positioning: 'center-left'
  });
  //将帮助提示的覆盖标注添加到地图中
  kpst._this.addOverlay(helpTooltip);
  }
  //创建测量提示框
  function createMeasureTooltip() {
  //创建测量提示框的div
  // if (!measureTooltipElement)
  measureTooltipElement = document.createElement('div');
  measureTooltipElement.setAttribute('id', 'lengthLabel');
  //设置测量提示要素的样式
  measureTooltipElement.className = 'tooltip tooltip-measure';
  //创建一个测量提示的覆盖标注
  measureTooltip = new ol.Overlay({
   element: measureTooltipElement,
   offset: [0, -15],
   positioning: 'bottom-center'
  });
  //将测量提示的覆盖标注添加到地图中
  kpst._this.addOverlay(measureTooltip);
  }
  //格式化测量长度
  var formatLength = function (line) {
  //定义长度变量
  var length;
  //计算平面距离
  length = Math.round(line.getLength() * 100) / 100;
  //定义输出变量
  var output;
  //如果长度大于1000,则使用km单位,否则使用m单位
  if (length > 100) {
   output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位
  } else {
   output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位
  }
  return output;
  };
  //格式化测量面积
  var formatArea = function (polygon) {
  //定义面积变量
  var area;
  //获取平面面积
  area = polygon.getArea();
  // }
  //定义输出变量
  var output;
  //当面积大于10000时,转换为平方千米,否则为平方米
  if (area > 1000) {
   output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';
  } else {
   output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';
  }
  return output;
  };
  //添加交互绘图对象
  addInteraction();
 }
 // 清除提示对象
 function clear() {
  source.clear()
  kpst._this.getOverlays().clear();
  kpst._this.removeLayer(vector);
  kpst._this.removeControl(scaleLineControl);
 }
kpst._this.measure = measure
kpst._this.clear = clear

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

Javascript 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 #Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 #Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 #Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 #Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
Openlayers实现点闪烁扩散效果
Sep 24 #Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 #Javascript
You might like
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP 类与构造函数解析
2017/02/06 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
原生js事件的添加和删除的封装
2014/07/01 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
培训专员岗位职责
2014/02/26 职场文书
心理咨询承诺书
2014/05/20 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
支部书记四风对照材料
2014/08/28 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
幼儿园个人总结
2015/02/28 职场文书
Python Parser的用法
2021/05/12 Python
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript