ol绘制线条demo演示

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Tile, Vector as VectorLayer } from "ol/layer";
import { OSM, Vector as VectorSource } from "ol/source";
import { Style, Fill, Stroke, Circle } from "ol/style";
import Feature from "ol/Feature";
import { Point } from "ol/geom";
import { Draw } from 'ol/interaction'

export default {
  data() {
    return {
      map: null,   // 地图实例
      layersArr: [],   // 存储图层
      featureArr: [],   // 存储数据源中要素
      sourceArr: []   // 存储图层数据源
    };
  },
  methods: {
    // 初始化地图的函数
    initMap() {
      this.createLayer();
      this.map = new Map({
        target: "mymap",
        view: new View({
          center: [0, 0],
          zoom: 5
        }),
        layers: this.layersArr
      });
      this.addInteraction();
    },

    // 创建图层的函数
    createLayer() {
      this.createSource();
      // 创建基础的瓦片图层
      let tileLayer = new Tile({
        source: this.sourceArr[0]
      });
      // 创建一层覆盖的矢量图层
      let vectorLayer = new VectorLayer({
        source: this.sourceArr[1],
        style: new Style({
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33"
            })
          }),
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)"
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 2
          })
        })
      });
      this.layersArr.push(tileLayer, vectorLayer);
    },

    // 创建图层的数据源
    createSource(){
      let osmSource = new OSM();
      let vectorSource = new VectorSource();
      this.sourceArr.push( osmSource, vectorSource );
    },

    // 给地图添加交互行为
    addInteraction(){
      let draw = new Draw({
        type: 'LineString',
        source: this.sourceArr[1],
        style: new Style({
           fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)'
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)'
              })
            })
        })
      });
      this.map.addInteraction( draw );
    }

  
  },
  mounted() {
    this.initMap();
  }
};
</script>