supermap+openlayers距离和面积测算

距离测算，面积测算

最近超图项目要加一个测算功能，距离测算和面积测算，要求在用户鼠标落下之后给出提示，画完之后需要在区域内显示测算结果。最后决定使用overlay+动态添加dom的方式实现。

工具方法

utils.js

import Overlay from 'ol/Overlay'
// 这里是提示文字
export const helpTool = (map, sketch) => {let helpTooltipElement;// 清除历史提示图层map.removeOverlay(map.getOverlayById('measurehelp'))if (helpTooltipElement) {helpTooltipElement.parentNode.removeChild(helpTooltipElement)}// 创建domhelpTooltipElement = document.createElement('div')helpTooltipElement.className = 'tooltip hidden'helpTooltipElement.style.color = '#389bcb';// 实例overlayconst helpTooltip = new Overlay({id: 'measurehelp',element: helpTooltipElement,offset: [15, 0],positioning: 'center-left',})map.addOverlay(helpTooltip)// 笔触监听let pointerMoveHandler = function (evt) {if (evt.dragging) {return}let helpMsg = '请点击开始绘制'if (sketch) {const geom = (sketch.getGeometry())if (geom instanceof Polygon || geom instanceof LineString) {helpMsg = ''}}helpTooltipElement.innerHTML = helpMsghelpTooltip.setPosition(evt.coordinate)helpTooltipElement.classList.remove('hidden')}map.on('pointermove', pointerMoveHandler)// 笔触移出地图后隐藏map.getViewport().addEventListener('mouseout', () => {helpTooltipElement.classList.add('hidden')})return { pointerMoveHandler, helpTooltipElement };
}// 测量结果显示
export const measureTool = (map) => {let measureTooltipElement;// 清除历史渲染map.removeOverlay(map.getOverlayById('measure'))if (measureTooltipElement) {measureTooltipElement.parentNode.removeChild(measureTooltipElement)}// 创建dommeasureTooltipElement = document.createElement('div')measureTooltipElement.className = 'tooltip tooltip-measure'// 实例overlaylet measureTooltip = new Overlay({id: 'measure',element: measureTooltipElement,offset: [0, -15],positioning: 'bottom-center',})map.addOverlay(measureTooltip);return { measureTooltip, measureTooltipElement };
}

在页面中引入工具方法

import { getArea, getLength } from 'ol/sphere'
import { unByKey } from 'ol/Observable.js'
import { LineString, Polygon } from 'ol/geom.js'
import { helpTool, measureTool } from '../util.js'
export default {data() {return {// 监听绘制元素变化listener: null,// 绘制元素sketch: null,// 笔触移动监听pointerMoveHandler: null,// 测绘结果提示measureTooltip: null,// 测绘结果提示的dommeasureTooltipElement: null,// 提示domhelpTooltipElement: null}},methods: {// 测量measure(type) {// 初始化画板this.initDraw({type,});// 测绘时的提示文字 和 测绘结果的提示文字let help = helpTool(this.map),measure = measureTool(this.map);// 提示元素this.helpTooltipElement = help.helpTooltipElement;// 笔触移动监听this.pointerMoveHandler = help.pointerMoveHandler;// 测绘结果提示this.measureTooltip = measure.measureTooltip;// 测绘结果元素this.measureTooltipElement = measure.measureTooltipElement;// 测绘开始监听this.draw.on('drawstart', (evt) => {// 清除历史绘制this.map.getLayers().getArray().forEach((layer) => {if (layer.get('layerName') === 'drawLayer') {layer.getSource().clear()}})// 绘制元素this.sketch = evt.featurelet tooltipCoord = evt.coordinate// 监听绘制元素的变化this.listener = this.sketch.getGeometry().on('change', (e) => {const geom = e.targetlet output// 长度测量if (geom instanceof LineString) {const length = getLength(geom, {projection: 'EPSG:' + this.EPSG})if (length > 100) {output = `${(Math.round(length / 1000 * 100) / 100)}  km`} else {output = `${(Math.round(length * 100) / 100)}  m`}tooltipCoord = geom.getLastCoordinate()} else if (geom instanceof Polygon) {// 面积测量const area = getArea(geom, {projection: 'EPSG:' + this.EPSG})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>`}tooltipCoord = geom.getInteriorPoint().getCoordinates()}// 测绘结果显示this.measureTooltipElement.innerHTML = outputthis.measureTooltipElement.className = 'tooltip tooltip-static'this.measureTooltip.setPosition(tooltipCoord)})})// 绘制结束this.draw.on('drawend', () => {this.measureTooltipElement.className = 'tooltip tooltip-static'this.measureTooltip.setOffset([0, -7])this.sketch = nullthis.helpTooltipElement.classList.add('hidden')})},// 释放unmeasure() {// 清除绘制this.map.getLayers().getArray().forEach((layer) => {if (layer.get('layerName') === 'drawLayer') {layer.getSource().clear()}})// 清除提示this.map.removeOverlay(this.map.getOverlayById('measure'))// 清除监听if (this.pointerMoveHandler) this.map.un('pointermove', this.pointerMoveHandler)if (this.listener) unByKey(this.listener)// 清除画板this.removeDraw();this.map.removeInteraction(this.draw);}}
};

supermap+openlayers距离和面积测算相关推荐

Openlayers测量距离与面积
测量功能距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离,面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小. 本博客参考:https://blog.csdn ...
c++图形中如何判断鼠标点击在一条直线上_中考数学常考题型精讲精练系列:函数图象上点的存在性问题中的距离与面积...
函数图象上点的存在性问题中的距离与面积(下)第1段函数图象上点的存在性问题中的距离与面积(下)第2,3段函数图象上点的存在性问题中的距离与面积(下)第4段判断函数的图像是中考的重要考点,主要有以 ...
【ArcGIS微课1000例】0017：ArcGIS测量距离和面积工具的巧妙使用
文章目录 1 交互式测量 2 测量要素 ArcGIS提供了快速测量距离和面积的工具,通过测量工具可对地图中的线和面进行测量. 工具条: 测量工具位于[工具]工具条上,如下图所示: 测量界面: 功能按钮 ...
（转）Arcgis for Js之GeometryService实现测量距离和面积
http://blog.csdn.net/gisshixisheng/article/details/40540601 距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryServ ...
arcgis js api前端完成面积测算
想找一个不依赖GeometryService量算面积的方法,经过别人的帮助,终于在js帮助页上找到了.就是esri/geometry/geodesicUtils中的geodesicAreas方法,该方 ...
CAD图在线Web测量工具代码实现(测量距离、面积、角度等)
CAD如今在各个领域均得到了普遍的应用并大大提高了工程技术人员的工作效率.在桌面端,AutoCAD测量工具已经非常强大:然后在Web端,如何准确.快速的对CAD图在Web进行测量呢? 功能能Web在 ...
SuperMap怎样实现测面积的代码（上课笔记）
标题SuperMap怎样实现测面积的代码(上课笔记) (作者:李寿宇,撰写时间:2019年1月16日) 1).地图发布以后,引入SuperMap iserver <SuperMap.Includ ...
如何计算机房产面积,4计算机在房产面积测算中的应用.pdf
4计算机在房产面积测算中的应用.pdf 管理科学 ·127· 计算机在房产面积测算中的应用王启龙 (集贤县房地产管理处,黑龙江集贤 155900) 摘要:随着当前房地产开发的不断增大,面积测算已 ...
《房产测量规范》面积测算解释
房产面积测算的内容面积测算系指水平面积测算.分为房屋面积和用地面积测算两类,其中房屋面积测算包括房屋建筑面积.共有建筑面积.产权面积.使用面积等测算. 房屋建筑面积系指房屋外墙(柱)勒脚以上各层的外围 ...

supermap+openlayers距离和面积测算

距离测算，面积测算

工具方法

supermap+openlayers距离和面积测算相关推荐

最新文章

热门文章