OpenLayers6实战,OpenLayers实现鼠标拖拽方式绘制矩形(拖拽方式绘制长方形和正方形)

专栏目录:
OpenLayers实战进阶专栏目录

前言

本章介绍使用OpenLayers在地图上实现鼠标拖拽方式绘制矩形(拖拽方式长方形和正方形)。

OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的,当然也包括长方形和正方形,但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”,多多少少都会有一些变形(形状不规则),而且也不好控制。本章就是为了解决上述问题,只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。

openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/808658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot中@Value注入静态变量

项目场景: Spring Boot中静态变量想使用Value注入值: 在application.properties或application.yml中定义topic名称: # application.properties test.name测试 Value("${test.name}") public static String name; 这时候打印发…

RocketMQ笔记(六)SpringBoot整合RocketMQ发送延迟消息

目录 一、简介1.1、延迟级别 二、Maven依赖三、application配置四、生产者4.1、同步发送延迟消息4.2、异步发送延迟消息 五、延迟级别修改5.1、 修改Broker端配置5.2、 通过Broker的运维命令修改5.3、 规则遵循 一、简介 在之前的文章中,我讲过了,同步发…

前端小白的学习之路(Vue2 四)

提示:学习vue2的第四天,笔记记录:混入(mixins),插槽(slot),过渡与动画(transition) 目录 一、混入(mixins) 二、插槽(solt) 1.匿名插槽 2.具名插槽 三、过渡与动画(transition) 1.过渡 1)单元素过渡 Ⅰ.通用类名 Ⅱ.指定…

每天学点儿Python(6) -- 列表和枚举

列表是Python中内置的可变序列,类使用C/C中的数组,使用 [ ] 定义列表,列表中的元素与元素之间用英文逗号( , )分隔, 但是Python中列表可以存储任意类型的数据,且可以混存(即类型可以…

图层、窗口、画布、视图

本文内容主要参考《Android图形显示系统》 图形显示系统会涉及到图层、窗口、画布和视图等概念,下面分别对它们进行简单介绍。 1)图层:图层是SurfaceFlinger中的概念,使用Layer表示,SurfaceFlinger在合成最终显示的图…

项目管理-人情世故

综述:对于事业生活,人情世故我觉得在生活工作中比较重要,下面是我说的自己想法,有啥不对的,可以一起沟通确认。 事业上 总的来说,我们大多数为人情世故大家觉得没啥,实际上我觉得也挺重要的。…

Partisia Blockchain 何以落地隐私技术的高能场景应用?

致力于隐私保护、互操作性和可持续创新的 Layer1 区块链新星,Partisia Blockchain 以安全公平标榜,带给加密用户无忧交易的体验环境。对于这样一个融合零知识证明(ZK)技术和多方计算(MPC)的全新项目来说&am…

18_SPI通信外设

SPI通信外设 SPI通信外设SPI外设简介SPI框图SPI基本结构主模式全双工连续传输非连续传输 SPI通信外设 SPI外设简介 STM32内部集成了硬件SPI收发电路,可以由硬件自动执行时钟生成、数据收发等功能,减轻CPU的负担 可配置8位/16位数据帧、高位先行/低位先…

TypeScript尚硅谷学习

第二章:面向对象 面向对象是程序中一个非常重要的思想,它被很多同学理解成了一个比较难,比较深奥的问题,其实不然。面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。 举例来说: 操作…

wsl 2在windows11上的设置

详细参考:Manual installation steps for older versions of WSL | Microsoft Learn 1.系统组件要打开 分别是:Hyper-V、虚拟机平台、适用于Windows的Linux子系统 2.以管理员方式运行命令行,逐步执行下面的命令 update to WSL 2, you must…

opc ua 环境构建(记录一)

1、准备 Siemens Simatic WinCC v7.5 二、配置 SIMATIC NET与S7-200 SMART 集成以太网口OPC 通信(TIA平台) 硬件: ①S7-200 SMART ②PC 机 ( 集成以太网卡) 软件: ① STEP 7-Micro/WIN SMART V2.1 ② STEP 7 Professional(TIA Portal V13 SP1 Upd 9) ③ SIMATIC NET …

在直播间卖云,云厂商终于“疯了”

图片|电影《疯狂的石头》截图 ©自象限原创 作者丨程心 云厂商们,在直播间打起来了! 继阿里云在罗永浩直播间亮相、京东云硬刚友商之后,腾讯云也开始在“直播间”送起了福利。 4月8日,腾讯云发布新一代AIGC存…

设计基于锁的并发数据结构

1. 线程安全的栈容器 #include <exception> #include <memory> #include <mutex> #include <stack>struct empty_stack : std::exception {const char *what () const throw(); };template <typename T> class threadsafe_stack { private:std:…

记录vite打包并上传到npm

开始 起因&#xff1a;我们单位这个项目用的vitereact使用print打印 开发环境没问题、一到打包时就卡住、所以我就想单独打包成组件在引用看看还有问题么、结果还真可以&#xff01;又是离谱的一天 首先需要把npm的分支切换成官网地址、因为只有官网地址才能登陆npm账号 这里说…

FreeRTOS学习 -- 移植

一、添加FreeRTOS源码 在基础工程中新建一个名为FreeRTOS的文件夹&#xff0c;创建FreeRTOS文件夹以后将FreeRTOS的源码添加到这个文件夹中。 portable 文件夹&#xff0c;只需要保留keil、MemMang 和 RVDS这三个文件夹&#xff0c;其他的都可以删除掉。 移植FreeRTOSConfig…

SimOne协作版正式发布!“云+端”一体化,加速自动驾驶技术迭代!

创新的“云端”一体化方案 让11大于2 两端登录 场景共享 本地算法 云端并发 颠覆传统自动驾驶研发工作方式 加速自动驾驶算法迭代与优化 SimOne协作版正式发布&#xff01; 什么是SimOne协作版&#xff1f; SimOne协作版&#xff0c;一个创新的“云端”一体化产品。 它将…

【数学建模】机器人避障问题

已知&#xff1a; 正方形5的左下顶点坐标 ( 80 , 60 ) (80,60) (80,60)&#xff0c;边长 150 150 150机器人与障碍物的距离至少超过 10 10 10个单位规定机器人的行走路径由直线段和圆弧组成&#xff0c;其中圆弧是机器人转弯路径。机器人不能折线转弯&#xff0c;转弯路径由与…

如何在rosbag中获取第一帧数据

文章目录 1. 找出感兴趣的话题名2. 在一个终端中启动rosbag play3. 在另一个终端中使用rostopic echo4. 继续播放bag文件&#xff1a; 1. 找出感兴趣的话题名 首先&#xff0c;你需要知道你感兴趣的话题名称。可以通过rosbag info your_bagfile.bag来查看bag文件中包含的话题。…

代码随想录-算法训练营day02【数组02:滑动窗口、螺旋矩阵】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 https://docs.qq.com/doc/DUGRwWXNOVEpyaVpG?uc71ed002e4554fee8c262b2a4a4935d8977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II &#xff0c;总结 建议大家先独立做题&#xff0c;…

基于 MATLAB 和 App Designer 的 UI 交互框架开发的一款电力系统潮流计算工具

基于 MATLAB 和 App Designer 的 UI 交互框架开发的一款电力系统潮流计算工具 文章目录 基于 MATLAB 和 App Designer 的 UI 交互框架开发的一款电力系统潮流计算工具一、软件介绍二、软件功能1、数据输入 2、潮流作业设置3、 潮流结果报表及可视化三、 软件设计思路1 、牛顿拉…