OpenLayers demo

Demo – Vue

<template>
  <div>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out" @click="add">Zoom out</button>
    <button id="zoom-in" @click="deleteMap">Zoom in</button>
    <button @click="biginDraw">开始绘制</button>
    <button @click="removeDraw">移除上一步</button>
    <button @click="getkey">获取坐标</button>
    <button @click="finishDraw">结束绘制</button>
    <button @click="addPolygon">添加多边形</button>
    <button @click="removeMap">移除多边形</button>
    <div id="popup" title="Welcome to OpenLayers">

    </div>
    <img id='marker' title='世界人民大和平万岁' @click="clickMark" src="https://pub-resoure.oss-cn-hangzhou.aliyuncs.com/sus-cannabis/static/big-screen/%E7%A7%8D%E5%AD%90%E4%BC%81%E4%B8%9A.png" alt="">
  </div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import {
    Circle as CircleStyle, Fill, Stroke, Style, Icon } from "ol/style";
import {
    Draw, Modify, Snap, Select } from "ol/interaction";
import {
    OSM, Vector as VectorSource } from "ol/source";
import Projection from "ol/proj/Projection";
import ImageLayer from "ol/layer/Image";
import {
    Tile as TileLayer, Vector as VectorLayer, Image } from "ol/layer";
import TileWMS from "ol/source/TileWMS";
import ImageWMS from "ol/source/ImageWMS";
import XYZ from "ol/source/XYZ";
import {
    get, getTransform, transform, fromLonLat } from "ol/proj";
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
import Point from "ol/geom/Point";
import GeoJSON from "ol/format/GeoJSON";
import Overlay from "ol/Overlay";
import WMTS from "ol/source/WMTS";
import {
    WMTS as WMTStile } from "ol/tilegrid/WMTS";
import {
    getTopLeft, getWidth } from "ol/extent";
import {
   
  DragRotateAndZoom,
  defaults as defaultInteractions,
} from "ol/interaction";
import {
   
  ScaleLine,
  defaults as defaultControls,
  ZoomSlider,
  OverviewMap,
} from "ol/control";
import {
    getArea } from "ol/sphere";
// console.log(proj);
export default {
   
  data() {
   
    return {
   
      msg: "1232131",
      map: null,
      raster: null,
      source: null,
      vector: null,
      draw: null,
      projection: null,
      zoom: 0,
    };
  },
  mounted() {
   
    this.projection = get("EPSG:4326");
    //卫星地图
    const myImageLoader = new Image</