openlayers绘制自定义点线面样式,带清除功能Vue版

初学openlayers 有不足之处还望轻喷,多谢
项目用的是vue,elementUI,以及scss
啊…本来点线面都录制了一个gif图,因为某些原因 只剩下一个线的了,将就看着吧

在画线和面的时候,双击地图为停止绘制,也可以通过切换绘制属性手动停止绘制,具体内容注释里有
还有 我的点用的图片是static/img/marker.png,请根据情况替换路径

<template>
  <div id="map_box">
    <div id="map"></div>
    <div class="btn_box">
      <el-radio-group v-model="onTool">
        <el-radio-button label="none">
          无
        </el-radio-button>
        <el-radio-button label="Point">点</el-radio-button>
        <el-radio-button label="LineString">线</el-radio-button>
        <el-radio-button label="Polygon">面</el-radio-button>
      </el-radio-group>
    </div>
    <div class="clearBtn">
      <el-button @click="clearFeature('Point')">清除点</el-button>
      <el-button @click="clearFeature('LineString')">清除线</el-button>
      <el-button @click="clearFeature('Polygon')">清除面</el-button>
    </div>
  </div>
</template>

<script>

  export default {
    props: [],
    data() {
      return {
        onTool: 'none',
        map: {},
        draw: {},
        toolLayer: {}
      }
    },
    mounted() {
      this.initMap()
      this.initToolLayer()
    },
    methods: {
      // 初始化地图
      initMap() {
        let self = this
        let center = [119.17, 31.95];
        let mapLayer = new ol.layer.Tile({
	        source: new ol.source.XYZ({
                // 本人项目中的地图服务为内网 这里替换官网的地图
		        url: `https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=0e6fc415256d4fbb9b5166a718591d71`
	        }),
	        // 数据源坐标系
	        // projection: 'EPSG:3858',
        })
        // 初始化地图样式
        this.map = new ol.Map({
          target: document.getElementById('map'),
          // 数据源数组
          layers: [
            mapLayer
          ],
          view: new ol.View({
            // projection: projection.getCode(), // EPSG:4326
            // 地图盒子坐标系
              // 依稀记得低版本是不支持4326的 这里用的是5.2 是支持的
              // 本人项目中数据源坐标是3858 但给我的坐标数据是4326的 于是设置地图盒子的坐标系为4326
            projection: 'EPSG:4326',
            center: center,
            zoom: 12
          }),
          // 地图交互 https://openlayers.org/en/latest/apidoc/module-ol_interaction.html
          interactions: ol.interaction.defaults({
            // 关闭双击缩放地图 默认true
            doubleClickZoom: false,
            // 是否能拖动 默认true,那我为啥写?玩!
            dragPan:true
          })
        });
        self.map.on('click', function (e) {
          console.log(e);
        })
      },
      // 初始化工具图层
      initToolLayer() {
        // 将图形的数据层包上一层图层放入地图
        // 点层样式
        this.toolLayer.Point = new ol.layer.Vector({
          source: new ol.source.Vector({wrapX: false}),
          zIndex: 9,
          style: new ol.style.Style({
            // 设置线颜色\宽度
            image: new ol.style.Icon({
              // anchor: markSettings.markAnchor, //点图片偏移量
              src: 'static/img/marker.png', // 图片路径
            })
          })
        })
        // 线层 样式
        this.toolLayer.LineString = new ol.layer.Vector({
          source: new ol.source.Vector({wrapX: false}),
          zIndex: 9,
          style: new ol.style.Style({
            // 设置线颜色\宽度
            stroke: new ol.style.Stroke({
              width: 4,
              color: "#119aff"
            })
          })
        })

        // 图形层 样式
        this.toolLayer.Polygon = new ol.layer.Vector({
          source: new ol.source.Vector({wrapX: false}),
          zIndex: 9,
          style: new ol.style.Style({
            // 设置线颜色\宽度
            stroke: new ol.style.Stroke({
              width: 4,
              color: "#119aff"
            }),
            // 图形区域内颜色
            fill: new ol.style.Fill({
              color: "rgba(57,160,255,0.5)"
            })
          })
        })
          // 点线面图层放入地图盒子
        for (let k in this.toolLayer) {
          this.map.addLayer(this.toolLayer[k])
        }
      },

      // 绘制点线面
      interaction() {
        if (this.onTool !== 'none') {
        	//this.onTool的值即为绘制的类型
          this.draw = new ol.interaction.Draw(
            {
              source: this.toolLayer[this.onTool].getSource(),
              // 绘制类型 点线面
              type: this.onTool,
              // 绘制时停止点击事件
              stopClick:true
            }
          )
          this.map.addInteraction(this.draw)
          this.draw.on("drawend", (evt) => {
            if (evt.feature != null) {
              //通过改变onTool的值间接触发removeInteraction函数 可以结束绘制
              // this.onTool = 'none'

                // 绘制结束之后 绘制出的点线面数据
              evt.feature.getGeometry().getCoordinates()


            }
          }, this);
        }
      },
      // 手动停止绘制
      removeInteraction() {
        this.map.removeInteraction(this.draw)
      },
      // 清除数据
      clearFeature(layer){
        this.toolLayer[layer].getSource().clear()
      }
    },
    watch: {
      onTool(val) {
        this.removeInteraction()
        this.interaction()
      },
    }
  }
</script>

<style lang="scss">
  #map_box {
    height: 100%;
    #map {
      width: 100%;
      height: 100%;
    }
    .btn_box {
      position: fixed;
      top: .5em;
      right: .5em;
    }
    .ol-zoom {
      top: auto;
      left: auto;
      right: .5em;
      bottom: .5em;
    }
    .ol-attribution {
      display: none;
    }
    .clearBtn {
      position: fixed;
      top: 5.5rem;
      right: .5rem;
    }
  }
</style>