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>

效果图:

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

以上是 Vue+penlayers实现多边形绘制及展示 的全部内容, 来源链接: utcz.com/p/238745.html

回到顶部