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

矫情吗；* 2023-10-11 16:31 69阅读 0赞

## 场景 ##

Vue中使用Openlayers加载Geoserver发布的TileWMS：

[Vue中使用Openlayers加载Geoserver发布的TileWMS\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_Openlayers_Geoserver_TileWMS_BADAO_LIUMANG_QIZHI_-CSDN]

在上面的基础上实现加载地图显示，如果要实现在地图上交互式绘制线段效果如下

![a6e9253914c649b4b8c91ed3524fc7ab.gif][]

OpenLayers 中负责勾绘交互的是 interaction 中的 draw interaction，

默认支持绘制的图形类型包含 Point（点）、LineString（线）、Polygon（面）和Circle（圆）。

触发的事件包含 drawstart和drawend，分别在勾绘开始时候（单击鼠标）和结束时候触发（双击鼠标）。

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客][BADAO_LIUMANG_QIZHI_CSDN]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、导入基本模块

//导入基本模块
    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'

2、声明draw对象和显示线的图层以及存取绘制完之后的坐标数组。

data() {
        return {
          map: null, // map地图
          layer:null, //地图图层
          lineLayer:null, //线图层
          draw: null,
          lineSource:null,
          coordinate: [],
       };
      },

3、页面加载完之后初始化地图，并声明各个图层

mounted() {
        this.initMap();
      },

方法实现

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,
            }),
          });

4、设置画笔样式

// 获取点击地图的坐标(选中样式)
          let selectedStyle = new Style({
              fill: new Fill({
                  color: 'rgba(1, 210, 241, 0.2)'
              }),
              stroke: new Stroke({
                  color: 'yellow',
                  width: 4
              })
          })
          // 选择线的工具类
          this.selectTool = new Select({
              multi: true,
              hitTolerance: 10, // 误差
              style: selectedStyle // 选中要素的样式
          })

5、添加交互并调用绘图工具

//添加交互
          this.map.addInteraction(this.selectTool)
          //调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circle
          this.onAddInteraction('LineString')

绘图工具实现

// 绘图工具
        onAddInteraction(type) {
            let self = this
            //勾绘矢量图形的类
            this.draw = new Draw({
                //source代表勾绘的要素属于的数据集
                source: self.lineSource,
                //type 表示勾绘的要素包含的 geometry 类型
                type: type
            })
    
            //绘制结束时触发的事件
            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)
        },

6、完整示例代码

<template>
        <div id="app">
          <div id="map" class="map"></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'
    export default {
      name: "olMapImageWMSDrawLine",
      data() {
        return {
          map: null, // map地图
          layer:null, //地图图层
          lineLayer:null, //线图层
          draw: null,
          lineSource:null,
          coordinate: [],
       };
      },
      mounted() {
        this.initMap();
      },
      methods: {
    
        // 绘图工具
        onAddInteraction(type) {
            let self = this
            //勾绘矢量图形的类
            this.draw = new Draw({
                //source代表勾绘的要素属于的数据集
                source: self.lineSource,
                //type 表示勾绘的要素包含的 geometry 类型
                type: type
            })
    
            //绘制结束时触发的事件
            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)
        },
        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,
            }),
          });
    
          // 获取点击地图的坐标(选中样式)
          let selectedStyle = new Style({
              fill: new Fill({
                  color: 'rgba(1, 210, 241, 0.2)'
              }),
              stroke: new Stroke({
                  color: 'yellow',
                  width: 4
              })
          })
          // 选择线的工具类
          this.selectTool = new Select({
              multi: true,
              hitTolerance: 10, // 误差
              style: selectedStyle // 选中要素的样式
          })
          //添加交互
          this.map.addInteraction(this.selectTool)
          //调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circle
          this.onAddInteraction('LineString')
    
        },
      },
    };
    </script>
    
    <style scoped>
    .map {
      width: 100%;
      height: 800px;
    }
    </style>

[Vue_Openlayers_Geoserver_TileWMS_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949
[a6e9253914c649b4b8c91ed3524fc7ab.gif]: https://img-blog.csdnimg.cn/a6e9253914c649b4b8c91ed3524fc7ab.gif
[BADAO_LIUMANG_QIZHI_CSDN]: https://blog.csdn.net/badao_liumang_qizhi