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 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
eslint 的三大通用规则详解
May 16 Javascript
javascript实现扫雷简易版
Aug 18 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代码技巧的小结
2013/06/02 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python基础教程之缩进介绍
2014/08/29 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python中的asyncio代码详解
2019/06/10 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
大四自我鉴定范文
2013/10/06 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
国培远程培训感言
2014/03/08 职场文书
党员活动日总结
2014/05/05 职场文书
分居协议书范本
2014/11/03 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python