【开源WebGIS】07-Openlayers+Vue 测量功能-01

OpenLayers是一个开源的地图显示引擎，支持距离测量和面积测量。距离测量功能用于测量地图上两点间的直线距离；面积测量功能用于测量地图上一个图形的面积，可以方便的实现在地图上的测量。

1 不多bb，先实现基本的功能

基础功能展示

1.1 测量功能按钮和显示结果框的添加

<el-button-group>
   <el-button type="primary" @click="drawVector('LineString')">距离测量</el-button>
   <el-button type="primary" @click="drawVector('Polygon')">面积测量 </el-button>
   <el-button type="primary" @click="drawVector('None')">清除</el-button>
 </el-button-group>
 <el-input v-model="mensureResult"/>

1.2 需要定位一个基础的map

这里我定义了一个map，并且添加了天地图的服务作为基础底图，天地图服务的key需要自己去天地图官网申请.

initMap() {
  const view = new View({
     projection: 'EPSG:3857',
     center: fromLonLat([104.06244609071975, 30.673525713789157]), //地图中心坐标
     zoom: 12,
   });
   const layer = new TileLayer({
     source: new XYZ({
       url:'http://t4.tianditu.com/DataServer?T=vec_w&tk=你自己在天地图申请的keyx={x}&y={y}&l={z}'
     }),
   });
   this.map = new Map({
     layers: [],
     target: 'map-container',
     view: view,
   });
   this.map.addLayer(layer);
   
 },

1.3 定义一个用来存放测量过程绘制要素的图层

需要注意的是我给这个layer添加了一个name字段，将其命名为measureLayer，以方便在后面的时候不需要的时候删除它。

var source = new VectorSource()
 var layer = new VectorLayer({
   source,
   zIndex:100,
   name:'mensureLayer'
 })
 this.map.addLayer(layer)

1.4 定义一个交互事件draw

注意这个draw它的source为上面定义的source，并将其添加到地图中。

this.sketch = new Feature()
this.map.removeInteraction(this.draw)
this.draw = new Draw({
    type:type,
    source:source
    // 注意这里的source是在前面定义过的source，如果不定义这个sauce
    //那么这画出来就没法保存
})
this.map.addInteraction(this.draw)

1.4 对于上面定义的draw进行状态判断

如果选择了测量的按钮，再去判断draw当前的状态，是drawend就意味着绘图完毕，这时候就可以从event事件中拿到对应的 future，并根据测量的类型，使用getGeometry()方法，分别获得它的长度或者面积，并将结果显示到结果显示框内。

this.draw.on('drawend',(evt)=>{
   console.log('结束画')
   this.sketch = evt.feature
   if(type == 'LineString'){
     this.mensureResult = this.sketch.getGeometry().getLength()
   }else if (type =='Polygon'){
     this.mensureResult = this.sketch.getGeometry().getArea()
   }
 })

如果是选择了清除按钮，则需要进行三步操作：

1. 清除draw交互事件
2. 清除测量的图层layer
3. 清除测量的结果mensureResult

// 清除交互
 this.map.removeInteraction(this.draw)
 // 清除测量的图层
 console.log(this.map.getAllLayers())
 this.map.getAllLayers().forEach(element => {
   if (element.values_.name == 'mensureLayer')
     this.map.removeLayer(element)
 });
 // 清除测量结果
 this.mensureResult = null

到这里就基本上把测量长度和面积的功能实现了，但是还有很多细节没有完善，接下来继续完善功能。

获取代码

1. 关注公粽号“老靳的WebGIS”回复ol07获取

参考文章：

https://codesandbox.io/s/measure-forked-clft8u?file=/main.js:812-835

https://blog.csdn.net/MagicMHD/article/details/91372480

https://www.jianshu.com/p/3cd4c25bed47

https://blog.csdn.net/qq_37219845/article/details/105557335