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

谁践踏了优雅 2023-10-01 11:13 23阅读 0赞

## 场景 ##

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

[Vue+Openlayer使用Draw实现交互式绘制线段\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客\_vue 线段][Vue_Openlayer_Draw_BADAO_LIUMANG_QIZHI_-CSDN_vue]

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

![921ceffd371444258c9c2c08030852a4.gif][]

注：

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

## 实现 ##

1、页面上添加按钮与map

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({
            //地图容器ID
            target: "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,Circle
          this.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
            );
          }
          //创建帮助提示要素的div
          self.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,Circle
          this.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
            );
          }
          //创建帮助提示要素的div
          self.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({
            //地图容器ID
            target: "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_Openlayer_Draw_BADAO_LIUMANG_QIZHI_-CSDN_vue]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121287934
[921ceffd371444258c9c2c08030852a4.gif]: https://img-blog.csdnimg.cn/921ceffd371444258c9c2c08030852a4.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi