openlayer点、线、面绘制

<template>
  <div>
    <div id="map-container" ref="mapContainer" class="map-container"></div>
    <div class="formList">
      <div class="input">
        <div class="name">北纬:</div>
        <el-input v-model="mapX" placeholder="请输入内容"></el-input>
      </div>
      <div class="input">
        <div class="name">东经：</div>
        <el-input v-model="mapY" placeholder="请输入内容"></el-input>
      </div>
      <div class="button" @click="clearFeature()">重置</div>
      <div class="button" @click="DW">定位</div>
      <div class="button" @click="BC">保存</div>
      <!-- addArea() -->
      <div class="button" @click="paint(3)">Circle</div>
      <el-button @click="drawPoint('点')">点</el-button>
      <el-button @click="drawPoint('线')">线</el-button>
      <el-button @click="drawPoint('圆')">圆</el-button>
      <el-button @click="drawPoint('多边形')">多边形</el-button>
      <el-button @click="clearDraw">清除绘画</el-button>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";

import { fromLonLat } from "ol/proj";
import { OSM, Vector as VectorSource, Raster as RasterSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Fill, Style, Stroke, Icon, Circle } from "ol/style";
import { Point } from "ol/geom"; //标点,画线
import { fromExtent } from "ol/geom/Polygon";
import Feature from "ol/Feature";
import { Map, View, ol } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import axios from "axios";
import LayerVector from "ol/layer/Vector";
import SourceVector from "ol/source/Vector";
import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";

export default {
  name: "MapComponent",
  data() {
    return {
      mapX: "",
      mapY: "",
      draw: null,
      source: new SourceVector({
        wrapX: false,
      }),
    };
  },
  mounted() {
    this.map = this.initMap();
  },
  methods: {
    //绘制 点 边 线 圆
      drawPoint(drawType) {
      let type = "";
      switch (drawType) {
        case "点":
          type = "Point";
          break;
        case "线":
          type = "LineString";
          break;
        case "圆":
          type = "Circle";
          break;
        case "多边形":
          type = "Polygon";
          break;
        default:
          break;
      }

      if (this.draw) {
        this.map.removeInteraction(this.draw); //removeInteraction 删除交互
      }
      this.draw = new Draw({
        source: this.map.getLayers().array_[1].getSource(),
        type,
      });
      this.map.addInteraction(this.draw); // this.map.addInteraction 设置交互
    },
     //清除会话
    clearDraw() {
      //采取链式操作 减少多余代码显示
      this.map.getLayers().array_[1].getSource().clear();
    },
    //图形绘制
    paint(x) {
      if (this.draw !== null) {
        this.map.removeInteraction(this.draw);
      }
      let geometryFun;
      switch (x) {
        case 1:
          geometryFun = createBox();
          break;
        case 2:
          geometryFun = createRegularPolygon(4);
          break;
        case 3:
          geometryFun = createRegularPolygon(6);
          break;
      }

      this.draw = new Draw({
        source: this.source,
        type: "Circle",
        geometryFunction: geometryFun,
        style: new Style({
          //绘制时候的样式
          fill: new Fill({
            color: "rgba(33,33,33,0.4)",
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 1,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      });
      this.map.addInteraction(this.draw);
    },
    //
    // addArea() {
    //   //根据范围获取多边形
    //   // //矢量标注图层
    //  this.draw = new Draw({
    //     source: this.source,
    //     type: "Circle",
    //     geometryFunction: createBox(),
    //     style: new Style({
    //       //绘制时候的样式
    //       fill: new Fill({
    //         color: "rgba(33,33,33,0.5)",
    //       }),
    //       stroke: new Stroke({
    //         color: "#ffcc33",
    //         width: 4,
    //       }),
    //       image: new Circle({
    //         radius: 7,
    //         fill: new Fill({
    //           color: "#ffcc33",
    //         }),
    //       }),
    //     }),
    //   });
    //   console.log(this.draw,454545)
    //   this.map.addInteraction(this.draw);
    // },

    /**
     * 初始化地图
     */
    initMap() {
      var that = this;
      // 创建地图中心点坐标
      const centerCoordinate = [116.394926, 39.9125];

      // 初始化视图对象
      const view = new View({
        center: centerCoordinate,
        zoom: 8,
        projection: "EPSG:4326",
        // 限制地图缩放最大级别为14，最小级别为10
        maxZoom: 14,
        minZoom: 4,
      });

      // 创建ArcGIS World Street Map图层
      const arcGISLayer = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        }),
      });
      // 在地图层上显示的样式
      this.LayerVector  = new LayerVector({
        source: this.source,
        // 在地图层上显示的样式
        style: new Style({
          fill: new Fill({
            color: "rgba(33,33,33,0.5)",
          }),
          stroke: new Stroke({
            color: "#ffcc33",
            width: 4,
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: "#ffcc33",
            }),
          }),
        }),
      });
      console.log(this.LayerVector,'ved121')
      // 初始化地图对象
      this.map = new Map({
        target: this.$refs.mapContainer,
        layers: [arcGISLayer, this.LayerVector],
        view: view,
      });
      //鼠标单击事件
      this.map.on("singleclick", function (e) {
        that.mapX = e.coordinate[0];
        that.mapY = e.coordinate[1];
        that.addVectorLabel(e.coordinate);
      });

      return this.map;
    },
    // 重置
    clearFeature(layer) {
      console.log(this.draw,'draw')
      console.log(this.source,'source')
      this.source.clear();
      this.vectorSource.clear();
      this.mapX = "";
      this.mapY = "";
    },
    // 定位
    DW() {
      var view = this.map.getView();
      var py = [parseInt(this.mapX), parseInt(this.mapY)];
      //平移地图
      view.setCenter(py);
      this.addVectorLabel([this.mapX, this.mapY]);
      view.setZoom(9);
    },
    //保存
    BC() {
      var parpms = {
        mapX: this.mapX,
        mapY: this.mapY,
      };
      const instance = axios.create({
        baseURL: "https://127.0.0.1",
      });
      instance
        .post("/api/data", parpms)
        .then((response) => {
          // response.data;//请求返回的数据
        })
        .catch((error) => {
          console.log(error);
        });
    },

    // 定义点
    createLabelStyle(feature) {
      return new Style({
        /**{olx.style.IconOptions}类型*/
        image: new Icon({
          anchor: [0.5, 60],
          anchorOrigin: "top-right",
          anchorXUnits: "fraction",
          anchorYUnits: "pixels",
          offsetOrigin: "top-right",
          // offset:[0,10],
          //图标缩放比例
          scale: 0.1,
          //透明度
          opacity: 0.75,
          //图标的url
          src: require("../assets/logo.png"),
        }),
      });
    },

    // 添加坐标点
    addVectorLabel(coordinate) {
      if (this.vectorSource) {
        this.vectorSource.clear();
      } else {
        //矢量标注的数据源
        this.vectorSource = new VectorSource({
          features: [],
        });
      }

      // //矢量标注图层
      this.vectorLayer = new VectorLayer({
        source: this.vectorSource,
      });
      this.map.addLayer(this.vectorLayer);
      //新建一个要素
      var newFeature = new Feature({
        //几何信息
        geometry: new Point(coordinate),
      });
      //设置要素的样式
      newFeature.setStyle(this.createLabelStyle(newFeature));
      this.vectorSource.addFeature(newFeature);
    },
  },
};
</script>

<style>
.map-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.formList {
  position: fixed;
  top: 10px;
  left: 50px;
  display: flex;
}

.formList div {
  margin-left: 20px;
}

.button {
  width: 50px;
  line-height: 40px;
  background-color: #f68e41;
  border-radius: 3px;
  color: #fff;
}

.input {
  display: flex;
}

.input .name {
  line-height: 40px;
  width: 25%;
}
</style>