本文实例为大家分享了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,0,0.6)", width: 2, }), fill: new Fill({ color: "rgba(255,0,0,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, 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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。