OpenLayers工具栏（vue中使用）

效果如下



这只是一小部分效果图片，因为动态图片超出大小，只能放静态图片。

完整代码部分

<template>
  <!-- 绘制、编辑、输出GeoJson数据 -->
  <div ref="map" id="map">
    <div class="btns">
      <button @click="drawFeature">绘制</button>
      <button @click="editorFeature" v-text="editorBtnText"></button>
      <button @click="outputJson">输出Json</button>
      <button @click="measure('distence')">距</button>
      <button @click="measure('area')">面</button>
      <button @click="measure('angle')">角</button>
      <button @click="fullscreen" v-html="textarr"></button>
      <button @click="single">坐标</button>
      <button @click="clear">清除</button>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import {
      Vector as VectorSource, OSM } from "ol/source";
import {
      Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import {
      GeoJSON } from "ol/format";
// 交互 Select在选择功能时触发。Modify用于修改功能几何的交互。Draw绘制功能几何的交互。
import {
      Draw, Modify, Select } from "ol/interaction";

import Overlay from "ol/Overlay";
// 线条几何形状。
import {
      LineString } from "ol/geom";
// 具有几何和其他属性属性属性的地理特征的矢量对象，类似于像 GeoJSON 这样的矢量文件格式中的特征。
import Feature from "ol/Feature";
// 使用返回的键或
import {
      unByKey } from "ol/Observable";
// 获取几何形状的球形长度和面积
import {
      getLength, getArea } from "ol/sphere";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Circle from "ol/style/Circle";
// import Icon from "ol/style/Icon";
// import { transform } from "ol/proj";
// import Point from "ol/geom/Point";
export default {
     
  data() {
     
    return {
     
      map: null,
      vectorLayer: null,
      vectorSource: null,
      draw: null,
      select: null,
      modify: null,
      editorBtnText: "编辑",

      textarr: "全屏",
      measureType: "diatence",
      tipDiv: null,
      pointermoveEvent: null, // 地图pointermove事件
      sketchFeature: null, // 绘制的要素
      geometryListener: null, // 要素几何change事件
      measureResult: "0", // 测量结果
    };
  },
  mounted() {
     
    // 底图
    var baseLayer = new TileLayer({
     
      source: new OSM(),
    });
    // 矢量图层源
    this.vectorSource = new VectorSource({
     
      wrapX: false,
    });
    // 矢量图层
    this.vectorLayer = new VectorLayer({
     
      source: this.vectorSource,
    });

    this.map = new Map({
     
      layers: [baseLayer, this.vectorLayer],
      target: "map",
      view: new View({
     
        projection: "EPSG:4326",
        center: [104.06531800244139, 30.65852484539117],
        zoom: 10,
      }),
    });
  },
  methods: {
     
    drawFeature() {
     
      this.draw = new Draw({
     
        source: this.vectorSource,
        // 用此实例绘制的几何形状类型。
        type: "Polygon",
      });
      // addInteraction  将给定的交互添加到地图中
      this.map.addInteraction(this.draw);
      // 绘制完成
      this.draw.on("drawend", () => {
     
        //  removeInteraction 从地图中删除给定的交互。
        this.map.removeInteraction(this.draw);
        this.draw = null;
      });