dzhh-frontend/.svn/pristine/3d/3d9253a70203d09605115753e68f3364599521b3.svn-base

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

</template>

<script>
import Style from "ol/style/Style";
import {Draw} from "ol/interaction";
import VectorLayer from "ol/layer/Vector";
import {Vector as VectorSource} from 'ol/source';
import Stroke from "ol/style/Stroke";
import IconStyle from 'ol/style/Icon';
import Fill from "ol/style/Fill";
export default {
  name: "drawTool",
  data() {
    return {
      onTool: 'none',
      map: {},
      draw: {},
      toolLayer: {}
    };
  },
  inject: ['baseMap'],
  mounted() {
    setTimeout(() => {
      this.map = this.baseMap.map;
      this.initToolLayer()
    }, 300);
  },
  watch: {
    onTool(val) {
      this.removeInteraction()
      this.interaction()
    },
  },
    methods: {
      // 初始化工具图层
      initToolLayer() {
        // 将图形的数据层包上一层图层放入地图
        // 点层样式
        this.toolLayer.Point = new VectorLayer({
          source: new VectorSource({wrapX: false}),
          zIndex: 9,

          style: new Style({
            // 设置线颜色\宽度
            image: new IconStyle({
              offset: [-0,24], //点图片偏移量
              src: require('@/assets/locate-red.png'), // 图片路径
            })
          })
        })
        // 线层 样式
        this.toolLayer.LineString = new VectorLayer({
          source: new VectorSource({wrapX: false}),
          zIndex: 9,
          style: new Style({
            // 设置线颜色\宽度
            stroke: new Stroke({
              width: 4,
              color: "#119aff"
            })
          })
        })

        // 图形层 样式
        this.toolLayer.Polygon = new VectorLayer({
          source: new VectorSource({wrapX: false}),
          zIndex: 9,
          style: new Style({
            // 设置线颜色\宽度
            stroke: new Stroke({
              width: 4,
              color: "#119aff"
            }),
            // 图形区域内颜色
            fill: new 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 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'

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

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

<style scoped>

</style>