openlayer 我的标注功能

news2024/7/4 6:21:30

背景:

通过openlayer库,可以在地图上实现绘制点、线、面。

并把绘制的结果添加到我的标注的弹框。

我的标注功能,包括:我的标注查询结果的数据展示;添加分组;添加我的标注;编辑分组、删除分组;以及分组下的对应的所有我的标注信息,操作包括:定位、编辑、删除、收藏等功能。

效果展示:

一、实现步骤

1.权限问题:登录成功后才能使用“我的标注”功能

2.“我的标注”按钮绑定事件,打开“我的标注”页面

3.我的标注页面,静态布局以及页面逻辑

二、添加我的标注

这一块是重点。打开“添加我的标注”的页面,初始化触发drawType(2)绘制面的方法,即默认绘制面。其它的,我们还可以绘制点、线、面、圆、矩形等。

以下从几点描述此功能:

1.触发drawType()方法,开始绘制;并且在开始绘制、结束绘制添加信息helpTips帮助信息提示框,包括:单击开始绘制、双击结束绘制、单击第一个点结束绘制等提示语言。

2.标注类型,选中高亮状态,并且触发对应的绘制方法。

3.标注样式,分为两种:绘制点,可以更换标注的图标icon;绘制几何图形,通过颜色选择器colorpicker组件,可以更换颜色color

4.绘制结束,把绘制的几何要素的经纬度进行回填(做一个展示)

5.依次验证所填写的表单项。点击提交,传参,接口请求成功。

效果展示:

 

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

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

相关文章

6.26.3 基于Transformer的深度神经网络在数字乳腺断层合成图像上的乳腺癌分类

开发一种有效的深度神经网络模型,该模型结合了相邻图像部分的上下文,以检测数字乳腺断层合成(DBT)图像上的乳腺癌。 数字乳房断层合成(DBT)是一种医学成像技术,其中检测器围绕患者以有限角度旋转并记录多幅图像。然后将这些图像重建为二维(2D…

猫头虎 最新 Linux 系统查看服务器温度的方法大全

猫头虎 🐯最新 Linux 系统查看服务器温度的方法大全🌟 摘要 本文详细介绍了如何在 Linux 系统中查看服务器温度的方法,涵盖了多种工具和命令的使用,包括 lm-sensors、hwmon、thermal 以及其他相关工具。 这些方法适用于各种 Lin…

制作高校专属PPT时,如何将校徽设置成透明底色?无须PS

目录 示例:以清华大学为例 1必应搜索“清华大学校徽” 2保存清华大学校徽及校名。 3将校徽导入到PPT中 ​4 选中校徽,然后依次选择“图片格式”-->颜色-->设置透明色​编辑 5出现“画笔”,由于截图的缘故,画笔没有在截…

简单的同步压缩变换脊线检测(PythonMATLAB)

由于 Heisenberg 测不准原理,线性时频变换方法无法同时在时间和频率方向达到最佳的时频分布,窗函数和小波函数的选择也降低了各方法的自适应性。同样,二次型变换方法难以在去除交叉干扰项的同时保证较高的能量集中度。为了解决该问题&#xf…

vue表头字段添加鼠标悬浮提示

<el-table-column prop"jfScore" align"center" min-width"100px"><template slot"header" slot-scope"scope"><div><span>信用积分</span><el-tooltip:aa"scope"class"it…

Jetpack - Navigation: 一个全面的安卓开发指南

引言 导航是任何安卓应用程序中至关重要的部分。无缝地在不同的屏幕之间移动并传递数据&#xff0c;对于流畅的用户体验来说至关重要。在这篇博客中&#xff0c;我们将深入探讨Jetpack的Navigation组件&#xff0c;这个强大的框架旨在简化安卓应用中的导航。我们将涵盖从设置和…

TCP、UDP详解

TCP和UDP是传输层的两个重要协议&#xff0c;也是面试中经常会被问到的&#xff0c;属于面试高频点。今天&#xff0c;我们来学习这两个协议。 1.区别 1.1 概括 TCP&#xff1a;有连接&#xff0c;可靠传输&#xff0c;面向字节流&#xff0c;全双工 UDP&#xff1a;无连接…

vue3 【提效】自动注册组件 unplugin-vue-components 实用教程

还在为每次都要导入组件而烦恼吗 &#xff1f; // 每次都需手动导入组件 import webName from /components/webName.vue用 unplugin-vue-components 来帮你吧&#xff0c;以后组件直接拿来用即可&#xff0c;无需再导入啦 &#xff01; <webName />使用流程 1. 安装 un…

nodejs安装(2024最最最最新版)

node官网 Index of /dist/https://nodejs.org/dist/ 选择版本 我比较喜欢16.20.1或者是14.16.1,这两个版本简直天下无敌了 下一步 选择这个,下载下来一个文件 一直点击下一步,就安装成功了 可能遇见的问题 1.安装了node,为什么不生效还是以前自己电脑安装的版本? 答: 可…

第四天 怎么又迟到了呀 哎啥时候来准时上个课呀

泛型编程 Traits实现&#xff0c;是什么 泛型编程&#xff08;Generic Programming&#xff09;是一种通过编写与特定类型无关的代码来实现代码复用和抽象的编程范式。 在C中&#xff0c;模板&#xff08;Templates&#xff09;是实现泛型编程的主要手段。 Traits&#xff0…

计算机组成原理——系统总线

题目:计算机使用总线结构便于增减外设,同时__C____。 A.减少了信息传送量 B.提高了信息传输速度 C.减少了信息传输线的条数 1. 总线的分类 1.1. 片内总线 芯片内部的总线 在CPU芯片内部,寄存器与寄存器之间、寄存器与逻辑单元ALU之间 1.1.1. 数据总线 双向传输总线 数…

欢乐钓鱼大师攻略:卡鱼骨、典藏鱼、藏宝图怎么钓?

《欢乐钓鱼大师》是一款以钓鱼为核心玩法的休闲模拟手游&#xff0c;通过逼真的画面和丰富的钓鱼体验吸引了大量玩家。本文将为你详细介绍这款游戏的亮点、常见问题以及一些实用的游戏技巧&#xff0c;帮助你在《欢乐钓鱼大师》中获得更愉快的游戏体验。 辅助工具 1. 辅助工具…

OSM数据导入至PostgreSQL

好几年没写博客了&#xff0c;最近博士小论文扩展准备添加个路网数据增加定位准确性 用的读取代码是github上的代码&#xff0c;使用openstreet数据。 1&#xff0c;从BBBbike划定区域下载路网数据&#xff0c;BBBike extracts OpenStreetMap (OSM, Garmin, Shapefile etc.) …

1.1电路模型

1.1电路模型 任何实际电路由以下三部分组成&#xff1a; ①提供电能的能源 – 电源 ②用电装置 – 负载 ③传输电能的金属连线 – 导线 实际电路完成的功能&#xff1a;主要有以下两个方面&#xff1a; &#xff08;1&#xff09;进行能量的产生、传输和转换。&#xff08;如…

C++之STL(十)

1、适配器 2、函数适配器 #include <iostream> using namespace std;#include <algorithm> #include <vector> #include <functional>bool isOdd(int n) {return n % 2 1; } int main() {int a[] {1, 2, 3, 4, 5};vector <int> v(a, a 5);cou…

boss直聘招聘数据爬取及可视化分析2.0

boss直聘招聘数据爬取及可视化分析2.0 一、需求介绍二、完整代码2.1 爬虫代码2.2 数据可视化模块一、需求介绍 笔者在前两篇介绍boss直聘招聘数据爬取和可视化分析的博客的基础上,对代码和功能进行了完善。在数据爬取的模块,代码更加简洁易懂,且性能更加稳定;在数据可视化…

linux基于wifi,Xshell的远程连接

最近有个比赛&#xff0c;要使用ros小车但是系统是ubuntu20.04无桌面系统刚开始接触linux的我啥都不会&#xff0c;就一个简单的连接wifi都搞了3天才搞通。再此进行一个总结。参考博客原文链接&#xff1a;https://blog.csdn.net/qq_51491920/article/details/126221940 一、什…

2024年全国青少年信息素养大赛图形化编程复赛样题_6547网

第 1 题 问答题 【编程实现】 按空格键随机切换背景&#xff0c;让背景对应的角色造型显示在舞台上。 【具体要求】 对角色编程&#xff0c;当按下空格键时&#xff0c;背景随机切换&#xff1b; 角色切换成对应的造型显示在舞台上&#xff1b; 角色说“我是”和它的造…

这谁顶得住啊!AI绘画模型竟然可以画出质量逼真的黑丝!

今天看到一个有趣的AI绘画玩法&#xff0c;用SD画黑丝&#xff01;话不多说&#xff0c;开始今天的实战演练。 首先做好准备工作&#xff1a;部署好本地Stable Diffuison 然后就轮到今天的主角上场了 黑丝Lora模型&#xff1a;perfectpantyhose 这是一款叫perfectpantyhose…

使用容器配置文件构建任意应用镜像_并将应用镜像推送到公共仓库共享_应用分享与启动---分布式云原生部署架构搭建012

上面我们编写好了应用,并且,安装好了redis 现在我们把应用打包成镜像. 以前是这样做的,不方便,因为需要在服务器上,安装jdk什么的,现在有了 镜像就不用,给服务器安装镜像什么的了 以后所有机器都安装docker以后,就直接运行就可以了 首先看一下,安装java应用,需要 用到openjd…