本文例項為大家分享了Vue+penlayers實現多邊形繪製展示程式碼，供大家參考，具體內容如下

<!--
 * @Description: 繪製多邊形
 * @Author: Dragon
 * @Date: 2020-12-17 16:02:06
 * @LastEditTime: 2020-12-18 17:20:33
 * @LastEditors: Dragon
-->

<template>
 <div>
  <div class="query-wrap">
   <el-button type="primary" @click="drawStart('Polygon')">
    {{ isDraw ? "繪製區域" : "重新繪製" }}
   </el-button>
  </div>
  <div id="map"></div>
 </div>
</template>

<script>
import "ol/ol.css";
import { Map,View } from "ol";
import { Image as ImageLayer,Vector as VectorLayer } from "ol/layer";
import { ImageStatic,Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";

import Draw from "ol/interaction/Draw";
import { Style,Fill,Stroke } from "ol/style";

import { GeoJSON } from "ol/format";
import staticMap from "@/assets/map.png";

export default {
 data() {
  return {
   map: null,// 地圖
   imgx: 0,// 當前地圖寬
   imgy: 0,// 當前地圖高
   isDraw: true,// 是否繪製
   draw: null,source: null,vector: null,styles: [
    new Style({
     stroke: new Stroke({
      color: "rgba(255,0.6)",width: 2,}),fill: new Fill({
      color: "rgba(255,0.3)",],geojsonObject: {
     'type': 'FeatureCollection','features': [
      {
       'type': 'Feature','geometry': {
        'type': 'Polygon','coordinates': [
         [
          [97.16862961519749,322.26517247174047],[117.3211820327625,481.9353954724479],[1.056456546810466,489.6863771715114],[13.458027265312012,320.71497613192776],[97.16862961519749,322.26517247174047]
                   ]
        ],},};
 },methods: {
  // 初始化地圖
  initMap() {
   let extent = [0,this.imgx,this.imgy];
   let projection = new Projection({
    code: "xkcd-image",units: "pixels",extent: extent,});
   let $this = this;
   this.map = new Map({
    target: "map",layers: [
     new ImageLayer({ // 展示地圖層
      source: new ImageStatic({
       url: staticMap,projection: projection,imageExtent: extent,new VectorLayer({
      source: new VectorSource({
       features: new GeoJSON().readFeatures($this.geojsonObject),style: $this.styles,view: new View({
     projection: projection,center: getCenter(extent),zoom: 2,maxZoom: 18,});

   this.source = new VectorSource({ wrapX: false })
   this.vector = new VectorLayer({
    source: this.source,style: this.styles
   })
   this.map.addLayer(this.vector)
  },// 開始繪製多邊形
  drawStart(type) {
   let that = this;
   if(this.isDraw) {
    this.isDraw = false
    this.draw = new Draw({
     source: this.source,type: type,});
    this.map.addInteraction(this.draw);
    this.draw.on("drawend",function (evt) {
     that.drawingEnd(evt);
    });
   } else {
    this.source.clear()
    this.map.removeInteraction(this.draw);
    this.isDraw = true
   }
   
  },// 構建多邊形結束
  drawingEnd(evt) {
   let that = this
   const geo = evt.feature.getGeometry();
   const t = geo.getType();
   if (t === "Polygon") {
    // 獲取座標點
    const points = geo.getCoordinates();
    console.warn(points,"繪製結束，點座標")
    this.map.removeInteraction(this.draw); // 移除繪製
   }
  },mounted() {
  let that = this;
  let img = new Image();
  setTimeout(function() {
   img.src = staticMap;
   img.onload = function (res) {
    that.imgx = res.target.width;
    that.imgy = res.target.height;
    that.initMap();
   };
  },500)
  
 },};
</script>

<style>
#map {
 width: 100%;
 height: calc(100vh - 50px);
}
</style>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。