Vue+penlayers实现多边形绘制及展示


Posted in Vue.js onDecember 24, 2020

本文实例为大家分享了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实现多边形绘制及展示

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

Vue.js 相关文章推荐
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
You might like
yii框架中的Url生产问题小结
2012/01/16 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
jquery实现的图片点击滚动效果
2014/04/29 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
Why we need EJB
2016/10/20 面试题
学生会干部自我鉴定2014
2014/09/18 职场文书
大二学生自我检讨书
2014/10/23 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang