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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
解读Vue组件注册方式
May 15 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 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对象Object的概念 介绍
2012/06/14 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
Node.js assert断言原理与用法分析
2019/01/04 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
简述python Scrapy框架
2020/08/17 Python
用python对oracle进行简单性能测试
2020/12/05 Python
pandas针对excel处理的实现
2021/01/15 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
平面设计师的工作职责
2013/11/21 职场文书
感恩之星事迹材料
2014/05/03 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
八月一日观后感
2015/06/10 职场文书
工作收入证明范本
2015/06/12 职场文书
初中数学教学反思范文
2016/02/17 职场文书
七年级作文之我的梦想
2019/10/16 职场文书