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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 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
Terran建筑一览
2020/03/14 星际争霸
PHP可逆加密/解密函数分享
2012/09/25 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
python类和继承用法实例
2015/07/07 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python从子线程中获得返回值的方法
2019/01/30 Python
详解python的四种内置数据结构
2019/03/19 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
医学生临床实习自我评价
2014/03/07 职场文书
师德师风学习材料
2014/12/19 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
公司年会开场白
2015/06/01 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python