当前位置: 首页 > 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}}},}
}

相关文章:

openlayers+vue的bug

使用addInteraction添加交互draw绘制&#xff0c;预期removeInteraction删除交互draw绘制时不再绘制&#xff0c;但是删除绘制不起作用&#xff0c;各种找原因&#xff0c;结果把data中的map变量注释掉即可&#xff0c;原因未知。 <template><div><div id"…...

实时数仓-Hologres介绍与架构

本文是向大家介绍Hologres是一款实时HSAP产品&#xff0c;隶属阿里自研大数据品牌MaxCompute&#xff0c;兼容 PostgreSQL 生态、支持MaxCompute数据直接查询&#xff0c;支持实时写入实时查询&#xff0c;实时离线联邦分析&#xff0c;低成本、高时效、快速构筑企业实时数据仓…...

asp.net教务管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机毕业设计

一、源码特点 asp.net 教务管理信息系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言 开发 asp.net教务管理系统 应用技术&a…...

爬虫、数据清洗和分析

爬虫、数据清洗和分析是在数据科学、数据挖掘和网络爬虫开发领域中常见的概念。 爬虫&#xff08;Web Scraping&#xff09;&#xff1a;爬虫是一种自动化程序或脚本&#xff0c;用于从互联网上的网站上提取信息。这些信息可以是文本、图像、视频或其他类型的数据。爬虫通常会…...

SpringBoot | SpringBoot中实现“微信支付“

SpringBoot中实现"微信支付": 1.“微信支付”产品2."微信支付"接入流程3.“微信小程序支付”时序图&#xff1a;3.1 “商家端JSAPI下单” 接口3.2 “微信小程序端调起支付” 接口 4.微信支付准备工作&#xff1a;4.1 获得微信支付平台证书、商户私钥文件4…...

基于SSM和VUE的留守儿童信息管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…...

VMware 16开启虚拟机电脑就蓝屏W11解决方法

问题现象 解决方法 控制面板->程序->启用或关闭windows功能->勾选虚拟机平台->重启...

【Bug——VMware Workstation】虚拟机桥接网络没有 VMnet0

此时 没有VMnet0用来桥接网络。 接下来进行解决 1.找到安装VM的路径&#xff0c;在安装的目录里面找到如图所示的三个文件&#xff1a; 2.依次点击鼠标右键 将这三个文件依次安装如图所示&#xff1a; 二.windows下的操作 1.首先 找到电脑的控制面板->网络和internet->…...

centos中安装Mysql8.0

其实和mysql5.7的安装差不多 1.root用户 2.更新密钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 3.安装mysql yum库 rpm -Uvh https://dev.mysql.com/ get/mysql80-community-release-el7-2.noarch.rpm 4.通过上两步&#xff0c;我们就可以使用yum去安装…...

简化对象和函数写法

简化对象写法&#xff1a; 传统写法&#xff1a; var x 10, y 20; var obj {x: x, y: y};简化写法&#xff1a; var x 10, y 20; var obj {x, y};简化函数写法&#xff1a; 传统写法&#xff1a; function add(x, y) {return x y; }简化写法&#xff1a; var add …...

GB/T28181流媒体相关协议详解

GB/T28181流媒体相关协议详解 文章目录 GB/T28181流媒体相关协议详解1 GB/T28181协议中使用的应用层协议介绍2 实时视频点播协议交互流程2.1 设备注册2.2 设备保活2.3 视频播放 总结 本文主要主要针对28181协议中视频流的部分&#xff0c;来阐述视频流通过28181协议如何进行视频…...

十进制转二进制的算法代码 ← Python

【算法分析】 本算法需要用到的Python知识点&#xff1a; 1.求余%&#xff0c;整除 //。例如&#xff0c;7%21&#xff0c;7//23&#xff0c;而7/23.5。 2.Python列表的 append 及 pop 函数。 • append(x) 函数用于将 x 添加到现有列表中。 • pop() 函数默认移除列表中…...

智慧垃圾站:AI视频智能识别技术助力智慧环保项目,以“智”替人强监管

一、背景分析 建设“技术先进、架构合理、开放智能、安全可靠”的智慧环保平台&#xff0c;整合环境相关的数据&#xff0c;对接已建业务系统&#xff0c;将环境相关数据进行统一管理&#xff0c;结合GIS技术进行监测、监控信息的展现和挖掘分析&#xff0c;实现业务数据的快速…...

LeetCode 面试题 16.07. 最大数值

文章目录 一、题目二、C# 题解 一、题目 编写一个方法&#xff0c;找出两个数字a和b中最大的那一个。不得使用if-else或其他比较运算符。 示例&#xff1a; 输入&#xff1a; a 1, b 2 输出&#xff1a; 2 点击此处跳转题目。 二、C# 题解 找出最大的数&#xff0c;本质还是…...

PS 安装教程 2022版(全网最详细图文教程)

目录 一.简介 二.安装步骤 软件&#xff1a;PS版本&#xff1a;2022语言&#xff1a;简体中文大小&#xff1a;2.83G安装环境&#xff1a;Win10&#xff08;1903&#xff09;及以上版本&#xff0c;64位操作系统硬件要求&#xff1a;CPU2.0GHz 内存4G(或更高&#xff0c;不支…...

[Python] OSError: [E050] Can‘t find model ‘en_core_web_sm‘.

OSError: [E050] Can’t find model ‘en_core_web_sm’. It doesn’t seem to be a Python package or a valid path to a data directory. 下载模型 python -m spacy download en_core_web_sm加载模型 import spacy# 加载英语模型 nlp spacy.load("en_core_web_sm&q…...

集合总结(Java)

Collection 常用方法 package com.test01;import java.util.ArrayList; import java.util.Collection; /*添加元素---boolean add(E e);移除元素---boolean remove(Object c);判断元素是否存在---boolean contains(Object c);*/ public class S {public static void main(Str…...

【ONE·Linux || 网络基础(一)】

总言 主要内容&#xff1a;简述网络传输流程&#xff08;TCP/IP五层模式概念认知&#xff0c;Mac地址、端口号、网络字节序等&#xff09;&#xff0c;演示socke套接字编程&#xff08;UDP模式&#xff09;。 文章目录 总言1、基础简述1.1、计算机网络背景1.2、认识网络协议&a…...

Day12力扣打卡

打卡记录 找出满足差值条件的下标 II&#xff08;双指针维护最大最小&#xff09; 链接 采用双指针保留间隔 indexDifference 进行遍历&#xff0c;求出慢指针对应一路遍历过来的最大值和最小值。 class Solution { public:vector<int> findIndices(vector<int>…...

SQL注入原理及思路(mysql)

数据库知识 mysql数据库 show database; #列出所有数据库 show tables; #列出所有表名 show columns from 表名; #列出表的列 select * from 表名 #查询数据库中某表的信息 select * from 表名 where 列xx #查询某表中符合列xx的信息 select * from 表名 order by 数字 #用于将…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...