uniapp 整合 OpenLayers - 测距测面

原创 已于 2024-11-25 09:11:29 修改 · 548 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

于 2024-11-07 16:30:23 首次发布

代码如下（测距、测面和清除）

import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Point from "ol/geom/Point";
import {
  unByKey
} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {Feature } from "ol";
import {getLength} from 'ol/sphere';
import {getArea} from 'ol/sphere';
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style
} from 'ol/style.js';
 
// 测距所需对象
var lineVectorLayer = null;
var lineDraw = null;

// 测面所需对象
var areaVectorLayer = null;
var areaDraw = null;


// 测距
export const measureLineMethod = (map) => {
  clearMeasures(map);//清空测量图层
  // 创建数据源
  var source = new VectorSource();
 
  lineVectorLayer = new VectorLayer({
    id:'Line',
    source: source,
    style: new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new Stroke({
        color: 'red',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    }),
    zIndex:16
  });
  
  map.addLayer(lineVectorLayer)
  
  /**
   * Currently drawn feature.
   * @type {module:ol/Feature~Feature}
   */
  var sketch;
 
 
  /** 测距
   * The help tooltip element.
   * @type {Element}
   */
  var lineHelpTooltipElement;
 
 
  /**
   * Overlay to show the help messages.
   * @type {module:ol/Overlay}
   */
  var lineHelpTooltip;
 
 
  /**
   * The measure tooltip element.
   * @type {Element}
   */
  var measureTooltipElement;
 
 
  /**
   * Overlay to show the measurement.
   * @type {module:ol/Overlay}
   */
  var measureTooltip;
 
 
 
  /**
   * Message to show when the user is drawing a line.
   * @type {string}
   */
  var continueLineMsg = '';
 
  createMeasureTooltip();
  createHelpTooltip();
 
  /**
   * Handle pointer move.
   * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
   */
  var pointerMoveHandler = function (evt) {
    if (evt.dragging) {
      return;
    }
    /** @type {string} */
    var helpMsg = '请点击开始测距';
 
    if (sketch) {
      // 测量时的提示文字
      var geom = (sketch.getGeometry());
      if (geom instanceof LineString) {
        helpMsg = continueLineMsg;
      }
       
    }
 
    // 设置提示对话框
    //lineHelpTooltipElement.innerHTML = helpMsg;// 文字没有颜色
    lineHelpTooltipElement.innerHTML = "<span style='color: red;'>"+helpMsg+"</span>";
    lineHelpTooltip.setPosition(evt.coordinate);
 
    lineHelpTooltipElement.classList.remove('hidden');
  };
  // 监听鼠标移动方法
  map.on('pointermove', pointerMoveHandler);
 
  map.getViewport().addEventListener('mouseout', function () {
    lineHelpTooltipElement.classList.add('hidden');
  });
 
  var draw;// 绘制对象
 
  var formatLength = function (line) {
      //获取投影坐标系
      var sourceProj = map.getView().getProjection();
      //ol/sphere里有getLength()和getArea()用来测量距离和区域面积，默认的投影坐标系是EPSG:3857, 其中有个options的参数，可以设置投影坐标系
      var length = getLength(line, {projection: sourceProj});
      //var length = getLength(line);
      var output;
      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) +
          ' ' + 'km';
      } else {
        output = (Math.round(length * 100) / 100) +
          ' ' + 'm';
      }
      return output;
    };
 
 
  // 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
  for(let layerTmp of map.getLayers().getArray()){
    if(layerTmp.get("name")=="feature"){
      source = layerTmp.getSource();
    }
  }
 
   // 测量距离
  function addLineInteraction() {
    var type = "LineString";
    draw = new Draw({
      source: source,
      type: type,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: 'rgba(0, 200, 255, 0.5)',
          lineDash: [10, 10],
          width: 2
        }),
        image: new CircleStyle({
          radius: 5,
          stroke: new Stroke({
            color: 'rgba(0, 200, 255, 0.7)'
          }),
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          })
        })
      })
    });
  // 赋值
  lineDraw = draw;
  map.addInteraction(lineDraw);
    
    var listener;
    draw.on('drawstart',
      function (evt) {
        // set sketch
        sketch = evt.feature;
 
        /** @type {module:ol/coordinate~Coordinate|undefined} */
        var tooltipCoord = evt.coordinate;
 
        listener = sketch.getGeometry().on('change', function (evt) {
          var geom = evt.target;
          var output;
          if (geom instanceof LineString) {
            output = formatLength(geom);
            tooltipCoord = geom.getLastCoordinate();
          }
          //measureTooltipElement.innerHTML = output;// 文字没有颜色
          measureTooltipElement.innerHTML = "<span style='color: red;'>"+output+"</span>";
          measureTooltip.setPosition(tooltipCoord);
        });
 
       /* //地图双击事件-点位不准确
        map.on('dblclick', function (evt) {
			// 添加点
            var point = new Point(evt.coordinate);
            source.addFeature(new Feature(point));
        }); */
 
      }, this);
 
 
    draw.on('drawend',
      function (evt) {
        //measureTooltipElement.className = 'tooltip tooltip-static';
        measureTooltip.setOffset([0, -7]);
        // unset sketch
        sketch = null;
        // unset tooltip so that a new one can be created
        measureTooltipElement = null;
        createMeasureTooltip();
        unByKey(listener);
        map.un('pointermove', pointerMoveHandler);
        map.removeInteraction(draw);
        lineHelpTooltipElement.classList.add('hidden');
		
		// 下面代码在绘制结束后添加点（线的最后一个坐标点）
		// 获取properties
		//var properties = evt.feature.getProperties();
		//console.log("properties",JSON.stringify(properties));
		// 获取geometry
		var geometry = evt.feature.getGeometry();
		// 获取坐标点集合
		var corrdinates = geometry.getCoordinates();
		//console.log("corrdinates",corrdinates);
		// 创建线
		var lineString = new LineString(corrdinates);
		// 获取线段最后的点坐标
		//console.log("lineString.getLastCoordinate()",lineString.getLastCoordinate());
		var point = new Point(lineString.getLastCoordinate());
		source.addFeature(new Feature(point));

        //var point = new Point(element.getGeometry().getCoordinates())
		//console.log("Point",JSON.stringify(point));
		// 点X值
		//console.log("pointX",point.flatCoordinates[0]);
		// 点Y值
		//console.log("pointY",point.flatCoordinates[1]);

      }, this);
  }
 
  function createHelpTooltip() {
    if (lineHelpTooltipElement) {
      lineHelpTooltipElement.parentNode.removeChild(lineHelpTooltipElement);
    }
    lineHelpTooltipElement = document.createElement('div');
    //lineHelpTooltipElement.className = 'tooltip hidden';
    lineHelpTooltip = new Overlay({
      element:lineHelpTooltipElement,
      offset: [15, 0],
      positioning: 'center-left',
    });
    map.addOverlay(lineHelpTooltip);
  }
 
  function createMeasureTooltip() {
    if (measureTooltipElement) {
      measureTooltipElement.parentNode.removeChild(measureTooltipElement);
    }
    measureTooltipElement = document.createElement('div');
    //measureTooltipElement.className = 'tooltip tooltip-measure';
    measureTooltip = new Overlay({
      element: measureTooltipElement,
      offset: [0, -15],
      positioning: 'bottom-center'
    });
    map.addOverlay(measureTooltip);
  }
 
  // 量测调用
  addLineInteraction();
}

// 测面
export const measurePolygonMethod = (map) =>{
  clearMeasures(map);//清空测量图层
  // 创建数据源
  var source = new VectorSource();
 
  areaVectorLayer = new VectorLayer({
    id:'Area',
    source: source,
    style: new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new Stroke({
        color: 'red',
        width: 2
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33'
        })
      })
    }),
    zIndex:16
  });
 
  map.addLayer(areaVectorLayer);
 
  /**
   * Currently drawn feature.
   * @type {module:ol/Feature~Feature}
   */
  var sketch;
 
 
  /**
   * The help tooltip element.
   * @type {Element}
   */
  var areaHelpTooltipElement;
 
 
  /**
   * Overlay to show the help messages.
   * @type {module:ol/Overlay}
   */
  var areaHelpTooltip;
 
 
  /**
   * The measure tooltip element.
   * @type {Element}
   */
  var measureTooltipElement;
 
 
  /**
   * Overlay to show the measurement.
   * @type {module:ol/Overlay}
   */
  var measureTooltip;
 
 
  /**
   * Message to show when the user is drawing a polygon.
   * @type {string}
   */
  var continuePolygonMsg = '';
 
 
  createMeasureTooltip();
  createHelpTooltip();
 
  /**
   * Handle pointer move.
   * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
   */
  var pointerMoveHandler = function (evt) {
    if (evt.dragging) {
      return;
    }
    /** @type {string} */
    var helpMsg = '请点击开始测面';
 
    if (sketch) {
      var geom = (sketch.getGeometry());
      if (geom instanceof Polygon) {
        helpMsg = continuePolygonMsg;
      }
    }
 
    //areaHelpTooltipElement.innerHTML = helpMsg;//没有颜色
    areaHelpTooltipElement.innerHTML = "<span style='color: red;'>"+helpMsg+"</span>";
    areaHelpTooltip.setPosition(evt.coordinate);
 
    areaHelpTooltipElement.classList.remove('hidden');
  };
  // 监听鼠标移动方法
  map.on('pointermove', pointerMoveHandler);
 
  map.getViewport().addEventListener('mouseout', function () {
    areaHelpTooltipElement.classList.add('hidden');
  });
 
  var draw;
 
 
var formatArea = function (polygon) {
  //获取投影坐标系
  var sourceProj = map.getView().getProjection();
  var area = getArea(polygon, {projection: sourceProj})
  //var area = getArea(polygon);
  //console.info(area)
  var 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;
};
 
  // 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
  for(let layerTmp of map.getLayers().getArray()){
    if(layerTmp.get("name")=="feature"){
      // layer = layerTmp;
      // layerTmp.setSource(null)
      source = layerTmp.getSource();
    }
  }
 
  // 测量面
  function addAreaInteraction() {
    
    var type = "Polygon";
    draw = new Draw({
      source: source,
      type: type,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: 'rgba(0, 200, 255, 0.5)',
          lineDash: [10, 10],
          width: 2
        }),
        image: new CircleStyle({
          radius: 5,
          stroke: new Stroke({
            color: 'rgba(0, 200, 255, 0.7)'
          }),
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          })
        })
      })
    });
    //赋值
    areaDraw = draw;
    map.addInteraction(areaDraw);
 
    var listener;
    draw.on('drawstart',
      function (evt) {
        // set sketch
        sketch = evt.feature;
 
        /** @type {module:ol/coordinate~Coordinate|undefined} */
        var tooltipCoord = evt.coordinate;
 
        listener = sketch.getGeometry().on('change', function (evt) {
          var geom = evt.target;
          var output;
          if (geom instanceof Polygon) {
            output = formatArea(geom);
            tooltipCoord = geom.getInteriorPoint().getCoordinates();
          } 
          //measureTooltipElement.innerHTML = output;// 没有颜色
          measureTooltipElement.innerHTML = "<span style='color: red;'>"+output+"</span>";
          measureTooltip.setPosition(tooltipCoord);
        });
 
        //地图双击事件-绘制结束时有个小黄点
       /* map.on('dblclick', function (evt) {
            var point = new Point(evt.coordinate);
            source.addFeature(new Feature(point));
        });*/
 
 
 
      }, this);
 
 
    draw.on('drawend',
      function (evt) {
        //measureTooltipElement.className = 'tooltip tooltip-static';
        measureTooltip.setOffset([0, -7]);
        // unset sketch
        sketch = null;
        // unset tooltip so that a new one can be created
        measureTooltipElement = null;
        createMeasureTooltip();
        unByKey(listener);
        map.un('pointermove', pointerMoveHandler);
        map.removeInteraction(draw);
        areaHelpTooltipElement.classList.add('hidden');

      }, this);
  }
 
 
 
  function createHelpTooltip() {
    if (areaHelpTooltipElement) {
      areaHelpTooltipElement.parentNode.removeChild(areaHelpTooltipElement);
    }
    areaHelpTooltipElement = document.createElement('div');
    //areaHelpTooltipElement.className = 'tooltip hidden';
    areaHelpTooltip = new Overlay({
      element: areaHelpTooltipElement,
      offset: [15, 0],
      positioning: 'center-left'
    });
    map.addOverlay(areaHelpTooltip);
  }
 
  function createMeasureTooltip() {
    if (measureTooltipElement) {
      measureTooltipElement.parentNode.removeChild(measureTooltipElement);
    }
    measureTooltipElement = document.createElement('div');
    //measureTooltipElement.className = 'tooltip tooltip-measure';
    measureTooltip = new Overlay({
      element: measureTooltipElement,
      offset: [0, -15],
      positioning: 'bottom-center'
    });
    map.addOverlay(measureTooltip);
  }
  // 量测调用
  addAreaInteraction();
  
}

// 清空测量图层
export const clearMeasures = (map) =>{
  
  // 清除测量距离
  if(lineVectorLayer != null){
    lineVectorLayer.getSource().clear();// 清除数据源
    map.removeLayer(lineVectorLayer);// 清除图层
    if(lineDraw != null){
		// 禁止绘制
    	lineDraw.setActive(false);
    	// 结束测距绘制
    	map.removeInteraction(lineDraw);
    	lineDraw = null;
    }
  }
 
  // 清除测面
  if(areaVectorLayer != null){
    areaVectorLayer.getSource().clear();// 清除数据源
    map.removeLayer(areaVectorLayer);// 清除图层
	if(areaDraw != null){
		// 禁止绘制
		areaDraw.setActive(false);
		// 结束测面绘制
		map.removeInteraction(areaDraw);
		areaDraw = null;
	}
  }
  // 清除overlays层
  map.getOverlays().clear();
}

使用方法：

<!-- 逻辑层 -->
<script>
***
***
export default {
	    data () {
            return {
    
            }
        },
        methods:{
        
        }
}

</scripc>
<!-- renderjs层 -->
<script module="ol" lang="renderjs" type="module">
***
***
// 测距测面工具js
import {measureLineMethod,measurePolygonMethod,clearMeasures} from '../../utils/measure/measure.js'
export default {
	    data () {
            return {
    
            }
        },
        methods:{
            method(){
                //measureLineMethod(this.map);
				measurePolygonMethod(this.map)
                //clearMeasures(this.map);
            }
        }
}

</scripc>

破z晓
关注
uniapp之openlayers的使用（一）
weixin_53420085的博客
05-11 1807
最近负责app的项目，使用uniapp+openlayers技术栈实现一些地图的操作。本次技术分享主要是前端方面的，由于之前没有用过openlayers加上uniapp接触的也不深，所以前期写的时候踩了不少坑，希望能本篇博客能帮助刚入坑的小伙伴，话不多说进入正题！
uniapp 整合 OpenLayers - 加载本地离线瓦片地图
最新发布
qq_19688207的博客
10-14 1002
链接: https://pan.baidu.com/s/125q3_yJgiN5bpH8GxJQ_MQ 提取码: kagy。因为,打包后app文件夹中，WWW文件目录没有了，这样就会导致openlayer的相对路径失效，从而无法加载离线地图。在官方基座，上面的代码运行没有问题，但是打包的APP就无法加载离线地图了。"runmode": "liberate",/*(默认为normal)*/下载后解压，之间运行imaps.exe。manifest.json添加配置。
uniapp 整合 OpenLayers
qq_19688207的博客
09-19 1389
命令行：npm install element-plus --save。命令行：npm install -D sass。命令行：npm install ol。
uniapp 整合 OpenLayers - 全图、切换底图、导航、定位
qq_19688207的博客
10-08 1127
1、定义全局对象 data () { return { map:null, yxt:null,// 影像图 dzt:null,// 电子图 view:null, count:0 } }, 2、地图加载 //天地图影像 const tdtYX = new TileLayer({ source: new XYZ({ url: 'htt
uniapp引入openlayers
weixin_43702307的博客
10-21 1965
在uniapp中试图引入openlayers前端库
uniapp中使用openlayer库
梧桐芊羽的博客
08-12 6840
最近需要在uniapp上使用openlayer，于是网上查找相关资料貌似renderjs可以实现。顺便及记录下，可能不完善。 renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 renderjs的主要作用有2个： 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力 在视图层操作dom，运行for web的js库，fs，three.js，echart，mapbox库都可以使用 大致步骤： 1.openlayers官网下载openlayer包，地址如https:/
uniapp 整合 OpenLayers - 加载Geojson数据(在线、离线、点选、点选位置导航)
qq_19688207的博客
10-14 1010
因为,打包后app文件夹中，WWW文件目录没有了，这样就会导致openlayer的相对路径失效，从而无法加载离线地图。在官方基座，上面的代码运行没有问题，但是打包的APP就无法加载离线地图了。manifest.json添加配置。
uniapp 整合 OpenLayers - 加载 arcgis server 图层
qq_19688207的博客
10-11 364
【代码】uniapp 整合 OpenLayer3 - 加载 arcgis server 图层。
openlayers实现地图测距测面
10-14
OpenLayers 是一个流行的开源JavaScript库，...在本文中，我们将深入探讨如何使用OpenLayers实现地图测距和测面功能。 首先，要在项目中使用OpenLayers，你需要在HTML文件中引入其CSS和JS文件，如下所示： ```html ...
openlayers6在uniapp中结合rendjs
u014308676的博客
04-30 1025
在 H5 环境中，RenderJS 的使用可能不是必要的，因为 OpenLayers 已经在浏览器环境中运行得很好。但是，请注意，由于 RenderJS 是在原生环境中运行的，它不能直接访问 Vue 组件的数据或方法。因此，你可能需要通过一些机制（如。API 或 UniApp 的自定义事件）在 Vue 组件和 RenderJS 之间进行通信。在 UniApp 中创建一个新的 Vue 组件（例如。
微信小程序-针对Openlayers3写的一套快速调用的小程序
08-06
OpenLayers3 Toolkit 针对Openlayers3写的一套工具包，基于v3.15.1版本。 开发计划 目前主要计划完成的功能模块： 快速构建地图 地图大小自适应 常用功能集成 简便画点线面 使用说明 在加载ol3toolkit.js前先加载js文件夹里的其他引用包和css，然后在script中简单设置OL3ToolkitOptions对象即可。如 > var OL3ToolkitOptions = {zoomLevel: 10, viewCenter:[120,30]}; 具体实例请参照example.html 常用参数 OL3ToolkitOptions中常用参数包括 targetID: 绑定的div, viewCenter: 地图起始中心坐标, zoomLevel: 初始地图缩放等级, baseMapSource: 底图数据源，暂时只有["OSM",'SATELLITE']两种 其他参数请详见ol3toolkit.js
重写控件使用openLayers实现地图显示交互
12-14
重写webView控件，用于实现地图的显示和交互
用Openlayers实现实时定位
01-19
小马看Gis--用Openlayers实现实时定位 服务端服务方法用来生成GeoJSon串的jar包的源文件。
uniapp 整合 OpenLayers - 添加点、线、面、图片、文字、popup、热力图、聚合和清除
qq_19688207的博客
09-29 646
【代码】uniapp 整合 OpenLayer3 - 添加点、线、面。
uniapp地图组件的使用
m0_56830409的博客
09-18 376
计算地图中多个经纬度的点和自己的距离，当其中有一个点的范围在自己的打卡范围内，即可打卡，否则没在打卡的范围内，不可打卡
openlayers点击图标弹出自定义属性
好巧~我看到你了
01-13 1738
效果图 Html代码 <div id="map"></div> Css代码 #map { width: 100%; height: 100%; } .ole-js-popup { padding: 0; border-radius: 3px; border: none; box-sizing: border-box; box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.15); pointer-events:
uni-app使用openlayers
小猪佩奇
09-15 3620
uni-app 使用openlayers
uni-app实现画刻度尺并能滑动测量
嘀嘀嘀123的博客
05-19 1967
实现刻度尺可以用uni-app里的swiper，新建文件夹components，里面新建swiper-ruler，这样就可以实现刻度尺滚动，刻度尺每一格的大小可以更改。然后在需要引用该index的组件调用，首先引用；在index.vue中。滚动滑块刻度值的变化。
uni-app使用自带map（高德地图），实现定位，撒点，绘制路线，绘制区域
weixin_43972428的博客
03-12 6074
本部分采用自带map组件进行。
openlayers测距测面
10-18
OpenLayers提供了测距和测面的功能，可以通过使用ol.interaction.Draw来实现。具体步骤如下： 1. 创建一个绘制交互对象，指定绘制类型为LineString或Polygon。 ``` var draw = new ol.interaction.Draw({ source: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值