Openlayers实现距离面积测量

本文实例为大家分享了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了 注意自己修改一下

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

(0)

相关推荐

  • Openlayers测量距离与面积的实现方法

    本文实例为大家分享了Openlayers测量距离与面积的具体代码,供大家参考,具体内容如下 1.地图测量功能 一般的地图的测量功能主要表现在两个方面,一是测量距离,一是测量面积:面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离,下面我们就在Openlayers3中来实现这一功能: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/

  • OpenLayers3实现测量功能

    本文实例为大家分享了OpenLayers3实现测量功能的具体代码,供大家参考,具体内容如下 1. 前言 测量功能实现面积的测量以及长度的测量.通过鼠标绘制区域以及长度来进行测量.OpenLayers 3 框架没有提供测量控件,但提供了相应的接口,需要需要基于几何对象的相应接口,结合图形绘制功能实现. 2. 实现思路 (1)新建一个网页,引用 openlayers 3 开发库.jQuery 库与 bootstrap 库,并参照前面显示地图的文章,加载 OSM 瓦片图层. (2)在地图容器中,创建一

  • Openlayers实现测量功能

    本文实例为大家分享了Openlayers实现测量的具体代码,供大家参考,具体内容如下 由于公司项目需要使用到openlayers,就开始学习了openlayers,其中有一个需求需要用到测量功能,就参考<WebGisOpenlayers全面解析>写了一个小demo,话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&qu

  • 基于openlayers实现角度测量功能

    基于openlayers的测量功能,官网提供了长度测量和角度测量,但是没有角度测量,在此写一下基于openlayers的角度测量功能,主要方法如下: var formatAngle = function (line) { var coordinates = line.getCoordinates(); var angle=0; var sourceProj = map.getView().getProjection(); for (var i =0, ii = coordinates.lengt

  • Openlayers实现距离面积测量

    本文实例为大家分享了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 { opaci

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • openlayers实现地图测距测面

    本文实例为大家分享了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&qu

  • Openlayers绘制地图标注

    本文实例为大家分享了Openlayers绘制地图标注的具体代码,供大家参考,具体内容如下 1.标注的简介 标注简单点说就是通过图标.文字等方式将我们想展示的内容显示在地图上,着重突出人们所关注的专题内容,从而为用户提供个性化的地图服务: 2.标注方式 在Openlayers3里面,有两种对地理位置点进行标注的方法,一种是通过创建矢量图层然后设置其样式的方法,还有一种就是创建Overlay覆盖层的方法:对于第一种方式,本质上创建的还是一个矢量对象,只是将其表现形式更换了一下,用Style样式进行包

  • OpenLayers实现点要素图层的聚合显示的方法

    目录 1.前言 2.点要素图层的聚合 3.聚合特殊处理一 4.聚合特殊处理二 5..结语 1.前言 在很多情况下,点要素图层中的要素数量可能会成百上千,这时候如果不做任何处理直接加载到地图上不仅会使用户视觉体验下降,而且也会造成地图界面的卡顿.下面这段代码创建了1000个随机点进行显示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="tex

  • vue利用openlayers实现动态轨迹

    目录 实现效果 创建一个地图容器 引入地图相关对象 创建地图对象 创建一条线路 画一条线路 添加起.终点 添加小车 准备开车 完整代码 实现效果 今天介绍一个有趣的gis小功能:动态轨迹播放!效果就像这样: 这效果看着还很丝滑!别急,接下来教你怎么实现.代码示例基于parcel打包工具和es6语法,本文假设你已经掌握相关知识和技巧. gis初学者可能对openlayers(后面简称ol)不熟悉,这里暂时不介绍ol了,直接上代码,先体验下感觉. 创建一个地图容器 引入地图相关对象 import M

  • JS手机端touch事件计算滑动距离的方法示例

    本文实例讲述了JS手机端touch事件计算滑动距离的方法.分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.tar

  • 利用java、js或mysql计算高德地图中两坐标之间的距离

    前言 因为工作的原因,最近在做与地图相关的应用,使用了高德地图,研究了下高德地图计算两坐标距离的方法,官网上提供的开发包中有相关的方法,但是我的产品中比较特殊,无法直接使用提供的方法,所以就自己封装了相关计算方法,供大家参考,下面话不多说了,来一起看看详细的介绍吧. Java实现 首先定义一个用于存储经纬度的类,这里起个名字叫:LngLat package amap; import java.text.DecimalFormat; import java.text.DecimalFormatSy

随机推荐