本文实例为大家分享了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,多边形
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue+penlayers实现多边形绘制及展示”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]