当前位置: 首页 > news >正文

openlayers+vue的bug

使用addInteraction添加交互draw绘制,预期removeInteraction删除交互draw绘制时不再绘制,但是删除绘制不起作用,各种找原因,结果把data中的map变量注释掉即可,原因未知。

<template><div><div id="map" style="position:absolute;width:100vw;height:100vh"></div><div style="position: absolute; left: 50px; top:10px"><el-button @click="addInteractions">绘制</el-button><el-button @click="removeInteractions">取消</el-button></div></div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
import "ol/ol.css";
import GeoJSON from 'ol/format/GeoJSON'
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import { Select, Modify, Draw, Snap } from 'ol/interaction';
import { Tile, Vector as VectorLayer } from 'ol/layer'
import { Point } from 'ol/geom'
import { XYZ, TileWMS, Vector as VectorSource } from 'ol/source'
import MapOne from '@/components/MapOne/index.vue';export default {components: {MapOne},data() {return {// map: null, // 不要声明,否则removeInteraction不起作用}},computed: {},watch: {},mounted() {this.initMap()},created() {},methods: {initMap() {this.map = new Map({target: "map",view: new View({center: fromLonLat([113.53450137499999, 34.44104525]),zoom: 5}),layers: [new TileLayer({source: new XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'}),}),],});this.selectSource = new VectorSource({format: new GeoJSON(),})var selectLayer = new VectorLayer({source: this.selectSource,})this.map.addLayer(selectLayer)},addInteractions() {this.select = new Select({wrapX: false,});this.modify = new Modify({features: this.select.getFeatures(),});this.draw = new Draw({type: 'Polygon',source: this.selectSource,});this.snap = new Snap({source: this.selectSource,});this.changeInteractions('draw')},removeInteractions() {this.map.removeInteraction(this.modify);this.map.removeInteraction(this.select);this.map.removeInteraction(this.draw);this.map.removeInteraction(this.select);},changeInteractions(value) {this.removeInteractions();switch (value) {case 'draw': {this.map.addInteraction(this.draw);this.map.addInteraction(this.snap);break;}case 'modify': {this.map.addInteraction(this.select);this.map.addInteraction(this.modify);this.map.addInteraction(this.snap);break;}default: {// pass}}},}
}

http://www.lryc.cn/news/209214.html

相关文章:

  • 实时数仓-Hologres介绍与架构
  • asp.net教务管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计
  • 爬虫、数据清洗和分析
  • SpringBoot | SpringBoot中实现“微信支付“
  • 基于SSM和VUE的留守儿童信息管理系统
  • VMware 16开启虚拟机电脑就蓝屏W11解决方法
  • 【Bug——VMware Workstation】虚拟机桥接网络没有 VMnet0
  • centos中安装Mysql8.0
  • 简化对象和函数写法
  • GB/T28181流媒体相关协议详解
  • 十进制转二进制的算法代码 ← Python
  • 智慧垃圾站:AI视频智能识别技术助力智慧环保项目,以“智”替人强监管
  • LeetCode 面试题 16.07. 最大数值
  • PS 安装教程 2022版(全网最详细图文教程)
  • [Python] OSError: [E050] Can‘t find model ‘en_core_web_sm‘.
  • 集合总结(Java)
  • 【ONE·Linux || 网络基础(一)】
  • Day12力扣打卡
  • SQL注入原理及思路(mysql)
  • vue核心面试题汇总【查缺补漏】
  • 使用WebStorm创建和配置TypeScript项目
  • vue源码分析(四)——vue 挂载($mount)的详细过程
  • 真机环境配置教程
  • 新电脑第一次重启后蓝屏
  • k8s statefulSet 学习笔记
  • gitlab 通过变量连接自建K8S
  • LuatOS-SOC接口文档(air780E)--mcu - 封装mcu一些特殊操作
  • 第14期 | GPTSecurity周报
  • 【数据结构】优先级队列
  • c语言宏相关高级用法