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,一经查实,立即删除!

相关文章

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

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

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

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

18_SPI通信外设

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

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存…

记录vite打包并上传到npm

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

FreeRTOS学习 -- 移植

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

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

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

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

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

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

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

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

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

【Vue3语法单文件——自用】

1. Vue3基础语法 <script setup> import { ref,computed } from vue// 定义响应式的变量 const count ref(0) const author ref({name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery] }) //定义props const props defineProps(…

[RK3399 Linux] 移植Linux 5.2.8内核详解

背景是在RK3399上面移植Rockchip官方提供的u-boot 2017.09 一、linux内核 1.1 源码下载 内核源码下载地址为:《https://www.kernel.org/》: 也可以到内核镜像网址下载https://mirrors.edge.kernel.org/pub/linux/kernel/,这里下载速度更快。 如果下载速度太慢,无法下载,…

蓝牙app设计(方案二) E4A (时钟 优缺点)

例程改的! 主界面 虽然上面有搜索功能,但是本人建议先自行配对在使用,这样更好用,把要使用的设备收藏一下更好找哦(这样就是橙色的了,只需要点对应蓝牙左边) 代码修改部分 原版是不停向下滚动显示,这样个人觉得不太好看,所以加了个时钟,到对应时钟周期清空(达到刷…

BGP小实验

光只是知道理论还不行&#xff0c;还是要多动手练练&#xff0c;就练一个bgp实验吧&#xff0c;梳理一下做题思路 实验要求&#xff1a; 大体要求就是&#xff1a;R1的环回可以ping通R2-R5的环回&#xff0c;R5同理 思路&#xff1a; 基础配置&#xff1a; 第一步先把地址环…

二叉树练习day.7

530.二叉搜索树的最小绝对差 链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 示例 1&…

【记录】Prompt模板|作为甲方怎么清晰专业地描述自己的需求(又名“乙方,给你的甲方扔个GPT解放自己吧”)

这篇Prompt摘抄并修改自朋友送给我的书的第49页5.2.3让ChatGPT构建提示&#xff0c;质量挺不错&#xff0c;支持一下她的博客&#xff1a;【好书推荐2】AI提示工程实战&#xff1a;从零开始利用提示工程学习应用大语言模型。 书长这样&#xff1a; 不啰嗦了&#xff0c;正文如…

多张图如何制作一图一码?图片批量转二维码的制作方法

二维码现在经常被用来作为图片的载体&#xff0c;将图片生成二维码之后通过扫描二维码的方式来查看图片信息&#xff0c;那么如果遇到需要将几十张图片分别单独制作二维码的需求时&#xff0c;有什么方法能够一次性批量建码呢&#xff0c;相信有很多的小伙伴对这个问题的解决方…

arm64位系统中编译ffmpeg

大致过程仍然和x86平台一致&#xff1a; ./configure xxxxmakemake install 所需要变化的是需要在 ./configure xxxx 后面多加几个编译选项 cd ffmpeg ./configure (x64下的依赖配置&#xff1a;......)--prefixbin --archaarch64 --target-oslinux --enable-cross-compile …