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与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php常用字符函数实例小结
2016/12/29 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
js Dialog 实践分享
2012/10/22 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
js实现筛选功能
2020/11/24 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
浅谈Django的缓存机制
2018/08/23 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python 读取修改pcap包的例子
2019/07/23 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python中if及if-else如何使用
2020/06/02 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
消防安全员岗位职责
2014/03/10 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
先进员工事迹材料
2014/12/20 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android