地图技术知识：openlayers学习之绘制点、线、多边形、圆（鼠标绘制）

组件代码

<template>
  <div>
    <div>
      <span>Geometry type &nbsp;&nbsp;&nbsp;</span>
      <select v-model="typeSelected"
              @change="getTypeSelected">
        <option value="Point">点</option>
        <option value="LineString">线</option>
        <option value="Polygon">多边形</option>
        <option value="Circle">圆</option>
        <option value="None">无</option>
      </select>
      <button @click="getAllFeatures">获取添加的元素</button>
    </div>
    <div id="map"
         ref="rootmap"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Vector as LayerVec, Image } from 'ol/layer'
import { Vector as SourceVec, ImageWMS } from "ol/source";
import { Style, Stroke } from "ol/style";
import Draw from "ol/interaction/Draw";
import Projection from 'ol/proj/Projection'
export default {
  data () {
    return {
      typeSelected: 'Point',
      map: null,
      vectorBox: null,
      drawLayer: null,
      draw: null
    };
  },
  mounted () {
    let that = this
    let mapUrl = "http://111.229.215.211:8080/geoserver/sxmap/wms"
    let mapName = "sxmap:hfshape"
    let myCode = "EPSG:404000"
    let myUnits = 'degrees'
    //wms的边界范围
    let extent = [-5783.940779486906, 2420.684125662136, -3999.448596040022, 5088.623484956386]
    //wms作底图
    let wmsLayer = [
      new Image({
        source: new ImageWMS({
          ratio: 1,
          url: mapUrl,
          params: {
            'FORMAT': 'image/png',
            'VERSION': '1.1.1',
            "STYLES": '',
            "LAYERS": mapName,
            "exceptions": 'application/vnd.ogc.se_inimage',
          }
        })
      })
    ];
    // 坐标系
    let projection = new Projection({
      code: myCode,
      units: myUnits,
      global: false
    })
    //定义地图对象
    that.map = new Map({
      layers: wmsLayer,
      target: 'map',
      view: new View({
        projection,
        zoom: 4,
        maxZoom: 20,
      }),
    });
    // 根据范围让地图元素居中显示  重点
    that.map.getView().fit(extent, that.map.getSize());
    // 监听singleclick事件
    that.map.on('singleclick', function (e) {
      console.log("coordinate", e.coordinate)
    })
    //创建矢量容器
    let vectorBox = new SourceVec({
      features: []
    })
    that.vectorBox = vectorBox
    //创建图层
    let drawLayer = new LayerVec({
      source: vectorBox
    })
    that.drawLayer = drawLayer
    //将图层添加到地图上
    that.map.addLayer(drawLayer)
    // 添加绘制工具
    this.addDraw()
  },
  methods: {
    getTypeSelected () {
      this.draw && this.map.removeInteraction(this.draw);
      //再根据typeSelect的值重新设置新的Interaction
      this.addDraw();
    },
    addDraw () {
      let value = this.typeSelected;
      if (value !== 'None') {
        this.draw = new Draw({
          source: this.drawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: 'blue',
              width: 3
            })
          })
        });
        this.map.addInteraction(this.draw);
      }
    },
    getAllFeatures () {
      let that = this
      let Features = that.vectorBox.getFeatures()
      console.log('Features', Features)
      if (Features && Features.length) {
        console.log(Features[0].getGeometry().flatCoordinates)
      }
    }
  }
};
</script>

<style lang="less" scoped>
#map {
  height: 500px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
</style>

效果图

参考文档

参考文档01
参考文档02