Vue+penlayers實現多邊形繪制及展示

本文實例為大家分享了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>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。