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入门·对象属性方法大总结
Oct 01 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
微信小程序switch开关选择器使用详解
Jan 31 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/06/03 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python判断字符串与大小写转换
2015/06/08 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Python气泡提示与标签的实现
2020/04/01 Python
python中return如何写
2020/06/18 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
医务人员自我评价
2014/01/26 职场文书
关于环保的建议书400字
2014/03/12 职场文书
股份转让协议书
2014/04/12 职场文书
关于美容院的活动方案
2014/08/14 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
维稳工作承诺书
2015/01/20 职场文书
天那边观后感
2015/06/09 职场文书
子女赡养老人协议书
2016/03/23 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书