Openlayers实现距离面积测量


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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 {
 opacity: 1;
 font-weight: bold;
 }
 .ol-tooltip-static {
 background-color: #ffcc33;
 color: black;
 border: 1px solid white;
 }
 .ol-tooltip-measure:before,
 .ol-tooltip-static:before {
 border-top: 6px solid rgba(0, 0, 0, 0.5);
 border-right: 6px solid transparent;
 border-left: 6px solid transparent;
 content: "";
 position: absolute;
 bottom: -6px;
 margin-left: -7px;
 left: 50%;
 }
 .ol-tooltip-static:before {
 border-top-color: #ffcc33;
}

具体实现

let layer_1 =new ol.layer.Tile({
  source: new ol.source.OSM()
 });
 let source = new ol.source.Vector();
 let 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: '#ffcc33',
  width: 2
  }),
  image: new ol.style.Circle({
  radius: 7,
  fill: new ol.style.Fill({
   color: '#ffcc33'
  })
  })
 })
 });
 let map=new ol.Map({
 layers: [
  layer_1 ,vector
 ],
 view: new ol.View({
  center: [-11000000, 4600000],
  zoom: 5,
 
 }),
 target: 'map'
 });
 let count=0;
 let draw;
 let sketch=new ol.Feature();
 let listener;
 let helpTooltipElement;
 let helpTooltip;
 let measureTooltipElement;
 let measureTooltip;
 let continuePolygonMsg="继续点击绘制多边形";
 let continueLineMsg="继续点击绘制线";
 createMeasureTooltip();
 createHelpTooltip();
 let pointerMoveHandler=function(evt){
 if (evt.dragging) {
  return;
 }
 /** @type {string} */
 let helpMsg = 'Click to start drawing';
 
 if (sketch) {
  let geom = (sketch.getGeometry());
  if (geom instanceof ol.geom.Polygon) {
  helpMsg = continuePolygonMsg;
  } else if (geom instanceof ol.geom.LineString) {
  helpMsg = continueLineMsg;
  }
 }
 helpTooltipElement.classList.remove('hidden');
 };
 map.on('pointermove', pointerMoveHandler);
 map.getViewport().addEventListener('mouseout', function() {
 });
 let formatLength=function (line) {
 let length = ol.sphere.getLength(line);
 let output;
 if(length>100){
  output=(Math.round(length/1000*100)/100)+''+'km'
 }else{
  output=(Math.round(length*100)/100)+''+'m'
 }
 return output;
 };
 let formatArea=function (polygon) {
 let area = ol.sphere.getArea(polygon);
 let output;
 if(area>10000){
  output=(Math.round(area/1000000*100)/100)+''+'km<sup>2</sup>'
 }else{
  output=(Math.round(area*100)/100)+''+'m<sup>2</sup>'
 }
 return output;
 };
 function addInteraction(){
 let type="Polygon";
 draw=new ol.interaction.Draw({
  source:source,
  type:type,
  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)'
   })
  })
  }),
  snapTolerance:50
 });
 
 map.addInteraction(draw);
 map.on('singleclick',function (evt) {
  measureTooltip.setPosition(evt.coordinate);
  if(count==0){
  measureTooltipElement.innerHTML='起点'
  }else{
  measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
  measureTooltip.setOffset([0, -20]);
  // unset sketch
  sketch = null;
  // unset tooltip so that a new one can be created
  measureTooltipElement = null;
  createMeasureTooltip();
  //map.removeInteraction(draw);
  }
  createMeasureTooltip();
  //点击次数增加
  count++;
 });
 draw.on('drawstart',function (evt) {
  sketch=evt.feature;
  let tooltipCoord=evt.coordinate;
  listener=sketch.getGeometry().on('change',function (evt) {
  let geom=evt.target;
  let output;
  if(geom instanceof ol.geom.Polygon){
   map.removeEventListener('singleclick');
   output=formatArea(geom);
   tooltipCoord=geom.getInteriorPoint().getCoordinates();
  }else if(geom instanceof ol.geom.LineString){
   output=formatLength(geom);
   tooltipCoord=geom.getLastCoordinate();
 
  }
  measureTooltipElement.innerHTML = output;
  measureTooltip.setPosition(tooltipCoord);
  })
 });
 
 draw.on('drawend',
  function() {
  measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
  measureTooltip.setOffset([0, -7]);
  // unset sketch
  sketch = null;
  // unset tooltip so that a new one can be created
  measureTooltipElement = null;
  createMeasureTooltip();
  map.removeInteraction('singleclick');
  count=0;
  ol.Observable.unByKey(listener);
  });
 }
 
 function createHelpTooltip() {
 if (helpTooltipElement) {
  helpTooltipElement.parentNode.removeChild(helpTooltipElement);
 }
 helpTooltipElement = document.createElement('div');
 helpTooltipElement.className = 'ol-tooltip hidden';
 helpTooltip = new ol.Overlay({
  element: helpTooltipElement,
  offset: [15, 0],
  positioning: 'center-left'
 });
 map.addOverlay(helpTooltip);
 }
 
 /**
 * Creates a new measure tooltip
 */
 function createMeasureTooltip() {
 if (measureTooltipElement) {
  measureTooltipElement.parentNode.removeChild(measureTooltipElement);
 }
 measureTooltipElement = document.createElement('div');
 measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
 measureTooltip = new ol.Overlay({
  element: measureTooltipElement,
  offset: [-30, -30],
  positioning: 'center-center'
 });
 map.addOverlay(measureTooltip);
 }
 /**
  * Let user change the geometry type.
  */
 addInteraction();

参考官网教程 

在线引用地址

<link rel="stylesheeth" ref="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>

多了一个singleclick来用于显示距离测量时每个线段节点到起点的距离

绘制类型我写死为Polygon了 注意自己修改一下

Openlayers实现距离面积测量

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

Javascript 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
js实现简单的计算器功能
Jan 16 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 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
react-intl实现React国际化多语言的方法
Sep 27 #Javascript
You might like
php实现文件下载更能介绍
2012/11/23 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python hashlib模块的使用示例
2020/10/09 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
铭立家具面试题
2012/12/06 面试题
2014年健康教育实施方案
2014/02/17 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
电气工程自动化求职信
2014/03/14 职场文书
环境整治工作方案
2014/05/18 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
体育教师教学随笔
2015/08/15 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers