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 相关文章推荐
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue实现登录功能
Dec 31 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python中的yield浅析
2014/06/16 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
大学生简历中个人的自我评价
2013/10/06 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
跑出一片天观后感
2015/06/08 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
年终工作总结范文
2019/06/20 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android