场景

Vue+Openlayer使用Draw实现交互式绘制线段：

Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客_vue 线段

在上面已经实现交互式绘制线段基础上，怎样实现测量距离。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、页面上添加按钮与map

<template><div><div><el-button type="primary" @click="beginCalDistance">开始测距</el-button><el-button type="primary" @click="cancleCalDistance">取消测距</el-button></div><div id="app"><div id="map" class="map"></div></div></div>
</template>

2、引入相关依赖

//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill, Style, Stroke } from "ol/style";
//导入相关模块
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { TileWMS, Vector as VectorSource } from "ol/source";
import { Select, Draw } from "ol/interaction";
import { getLength } from "ol/sphere";
import { LineString } from "ol/geom";
import Overlay from "ol/Overlay";

3、声明变量

export default {name: "olMapImageWMSDrawLineAndCalDistance",data() {return {map: null, // map地图layer: null, //地图图层lineLayer: null, //线图层draw: null,lineSource: null,coordinate: [],measureTooltipElement: null,measureTooltip: null,sketch: null,geom: null,};},

4、在页面初始化之后调用初始化地图的方法

//初始化地图initMap() {//地图图层this.layer = new TileLayer({source: new TileWMS({//不能设置为0，否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true,},serverType: "geoserver",}),});//线的图层this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [this.layer, this.lineLayer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 14,minZoom: 6, // 地图缩放最小级别maxZoom: 19,}),});},

5、开始测试按钮的点击事件中

    //开始测距beginCalDistance() {//调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circlethis.onAddInteraction("LineString");//创建一个新的测距提示this.createMeasureTooltip();},

调用绘图功能并传递类型为线以及给地图添加交互onAddInteraction方法

   // 绘图工具onAddInteraction(type) {let self = this;//勾绘矢量图形的类this.draw = new Draw({//source代表勾绘的要素属于的数据集source: self.lineSource,//type 表示勾绘的要素包含的 geometry 类型type: type,});//绘制开始时触发的事件this.draw.on("drawstart", function (evt) {self.sketch = evt.feature;//提示框的坐标var tooltipCoord = evt.coordinate;//定义一个事件监听，监听几何要素的change事件var listener = self.sketch.getGeometry().on("change", function (evt) {//获取绘制的几何对象self.geom = evt.target;//定义一个输出对象，用于记录长度var output;//判断交互类型是否为线if (self.geom instanceof LineString) {//输出多线段的长度output = self.formatLength(self.geom);//获取多线段的最后一个点的坐标tooltipCoord = self.geom.getLastCoordinate();}//设置测量提示框的内标签为最终输出结果self.measureTooltipElement.innerHTML = output;self.measureTooltipElement.className ="ol-tooltip ol-tooltip-static draw_km";//设置测量提示框的位置坐标self.measureTooltip.setPosition(tooltipCoord);});});//绘制结束时触发的事件this.draw.on("drawend", function (e) {//输出坐标信息const geometry = e.feature.getGeometry();let pointArr = geometry.getCoordinates();self.coordinate.push(pointArr);console.log("self.coordinate=" + self.coordinate);//移除交互self.removeDraw();});//添加交互self.map.addInteraction(this.draw);},

创建测距提示的方法createMeasureTooltip

    //创建一个新的测距提示createMeasureTooltip() {let self = this;//如果已经存在帮助提示框则移除if (self.measureTooltipElement) {self.measureTooltipElement.parentNode.removeChild(self.measureTooltipElement);}//创建帮助提示要素的divself.measureTooltipElement = document.createElement("div");//设置帮助提示要素的样式self.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";//创建一个帮助提示的覆盖标注self.measureTooltip = new Overlay({element: self.measureTooltipElement,offset: [0, -15],positioning: "bottom-center",});//将帮助提示的覆盖标注添加到地图中self.map.addOverlay(self.measureTooltip);},

其中又用到测量距离的方法formatLength

    // 测量距离formatLength(line) {//计算平面距离var length = getLength(line);//定义输出变量var output;//如果长度大于1000，则使用km单位，否则使用m单位if (length > 1000) {output = Math.round((length / 1000) * 100) / 100 + " " + "km";} else {output = Math.round(length * 100) / 100 + " " + "m";}return output;},

6、取消测距方法的点击事件

    // 取消测距cancleCalDistance() {let self = this;this.map.removeInteraction(this.draw);this.lineSource.clear();let layerArr = this.map.getOverlays();var deleteOverlayArr = [];layerArr.forEach((item) => {if (item.values_.element.className ==="ol-tooltip ol-tooltip-static draw_km") {deleteOverlayArr.push(item);}});deleteOverlayArr.forEach((item) => {self.map.removeOverlay(item);});},

7、完整示例代码


<template><div><div><el-button type="primary" @click="beginCalDistance">开始测距</el-button><el-button type="primary" @click="cancleCalDistance">取消测距</el-button></div><div id="app"><div id="map" class="map"></div></div></div>
</template><script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill, Style, Stroke } from "ol/style";
//导入相关模块
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { TileWMS, Vector as VectorSource } from "ol/source";
import { Select, Draw } from "ol/interaction";
import { getLength } from "ol/sphere";
import { LineString } from "ol/geom";
import Overlay from "ol/Overlay";export default {name: "olMapImageWMSDrawLineAndCalDistance",data() {return {map: null, // map地图layer: null, //地图图层lineLayer: null, //线图层draw: null,lineSource: null,coordinate: [],measureTooltipElement: null,measureTooltip: null,sketch: null,geom: null,};},mounted() {this.initMap();},methods: {//开始测距beginCalDistance() {//调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circlethis.onAddInteraction("LineString");//创建一个新的测距提示this.createMeasureTooltip();},// 取消测距cancleCalDistance() {let self = this;this.map.removeInteraction(this.draw);this.lineSource.clear();let layerArr = this.map.getOverlays();var deleteOverlayArr = [];layerArr.forEach((item) => {if (item.values_.element.className ==="ol-tooltip ol-tooltip-static draw_km") {deleteOverlayArr.push(item);}});deleteOverlayArr.forEach((item) => {self.map.removeOverlay(item);});},// 绘图工具onAddInteraction(type) {let self = this;//勾绘矢量图形的类this.draw = new Draw({//source代表勾绘的要素属于的数据集source: self.lineSource,//type 表示勾绘的要素包含的 geometry 类型type: type,});//绘制开始时触发的事件this.draw.on("drawstart", function (evt) {self.sketch = evt.feature;//提示框的坐标var tooltipCoord = evt.coordinate;//定义一个事件监听，监听几何要素的change事件var listener = self.sketch.getGeometry().on("change", function (evt) {//获取绘制的几何对象self.geom = evt.target;//定义一个输出对象，用于记录长度var output;//判断交互类型是否为线if (self.geom instanceof LineString) {//输出多线段的长度output = self.formatLength(self.geom);//获取多线段的最后一个点的坐标tooltipCoord = self.geom.getLastCoordinate();}//设置测量提示框的内标签为最终输出结果self.measureTooltipElement.innerHTML = output;self.measureTooltipElement.className ="ol-tooltip ol-tooltip-static draw_km";//设置测量提示框的位置坐标self.measureTooltip.setPosition(tooltipCoord);});});//绘制结束时触发的事件this.draw.on("drawend", function (e) {//输出坐标信息const geometry = e.feature.getGeometry();let pointArr = geometry.getCoordinates();self.coordinate.push(pointArr);console.log("self.coordinate=" + self.coordinate);//移除交互self.removeDraw();});//添加交互self.map.addInteraction(this.draw);},//删除交互removeDraw() {this.map.removeInteraction(this.draw);},//创建一个新的测距提示createMeasureTooltip() {let self = this;//如果已经存在帮助提示框则移除if (self.measureTooltipElement) {self.measureTooltipElement.parentNode.removeChild(self.measureTooltipElement);}//创建帮助提示要素的divself.measureTooltipElement = document.createElement("div");//设置帮助提示要素的样式self.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";//创建一个帮助提示的覆盖标注self.measureTooltip = new Overlay({element: self.measureTooltipElement,offset: [0, -15],positioning: "bottom-center",});//将帮助提示的覆盖标注添加到地图中self.map.addOverlay(self.measureTooltip);},//初始化地图initMap() {//地图图层this.layer = new TileLayer({source: new TileWMS({//不能设置为0，否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true,},serverType: "geoserver",}),});//线的图层this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [this.layer, this.lineLayer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 14,minZoom: 6, // 地图缩放最小级别maxZoom: 19,}),});},// 测量距离formatLength(line) {//计算平面距离var length = getLength(line);//定义输出变量var output;//如果长度大于1000，则使用km单位，否则使用m单位if (length > 1000) {output = Math.round((length / 1000) * 100) / 100 + " " + "km";} else {output = Math.round(length * 100) / 100 + " " + "m";}return output;},},
};
</script><style scoped>
.map {width: 100%;height: 800px;
}
</style>

Vue+Openlayers实现绘制线段并测量距离显示相关推荐

【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)
目录一.量距二.量面三.清除测量四.页面结构注意参考一.量距 // 距离测量measureLineSpace() {this.removeMeasure();let _this = th ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
183：vue+openlayers 设置线段样式：粗细、渐变颜色、箭头及线头样式
第183个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中修饰线段的样式.绘制两个线段,利用FlowLine的样式规则来设置矢量线段粗细.渐变颜色,设置箭头和线头样式. ...
地图测试距离的软件,‎App Store 上的“距离 - 在地图上绘制并测量距离”
沿地图绘制路线以测量距离,使用此应用轻松解决.现在有面积测量和自定义系数. 用法 ---- 触摸即可.在地图上绘制一条路线以测定距离.放大镜将帮您进行精确的绘制和测量. ◆ 在移动和测量模式之间切换. ...
Vue+Openlayers+el-radio实现切换地图显示
场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏: Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_BADAO_LIUMANG_ ...
216：vue+openlayers 加载GPX数据，导出geojson文件
第216个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载GPX数据,显示图形, 导出geojson文件. GPX(GPS eXchange Format,GPS交换 ...
031：vue+openlayers加载GPX数据（代码示例）
第031个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中加载GPX数据,显示图形. GPX(GPS eXchange Format,GPS交换格式)是一个XML格式,为 ...
050：vue+openlayers使用Popup组件显示经纬度坐标（代码示例）
第050个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中使用popup的形式来显示出经纬度坐标,本示例是采用引用扩展的方式,相比以往的添加方式,减少了不少的代码量. 直 ...
151：vue+openlayers 使用图片来标识不同地图，点击更换底图
第151个点击查看专栏目录本示例的目的是介绍演示如何在vue+openlayers中根据visible的值来显示不同的地图,hover按钮弹出切换弹窗, 每种地图用图片来标识,hover到图片上后 ...

Vue+Openlayers实现绘制线段并测量距离显示

场景

实现

Vue+Openlayers实现绘制线段并测量距离显示相关推荐

最新文章

热门文章