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