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添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
python内存管理分析
2015/04/08 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
详解Python绘图Turtle库
2019/10/12 Python
python第三方库学习笔记
2020/02/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
韩国商务邀请函
2014/01/14 职场文书
2015年效能监察工作总结
2015/04/23 职场文书