openlayer 我的标注功能

背景:

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

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

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

效果展示:

一、实现步骤

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

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

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

二、添加我的标注

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

以下从几点描述此功能:

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

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

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

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

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

效果展示:

 

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

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

相关文章

经典神经网络(13)GPT-1、GPT-2原理及nanoGPT源码分析(GPT-2)

经典神经网络(13)GPT-1、GPT-2原理及nanoGPT源码分析(GPT-2) 2022 年 11 月,ChatGPT 成功面世,成为历史上用户增长最快的消费者应用。与 Google、FaceBook等公司不同,OpenAI 从初代模型 GPT-1 开始,始终贯彻只有解码器&#xff0…

【机器学习300问】134、什么是主成分分析(PCA)?

假设你的房间堆满了各种各样的物品,书籍、衣服、玩具等等,它们杂乱无章地散落各处。现在,你想要清理房间,但又不想扔掉任何东西,只是希望让房间看起来更整洁,更容易管理。 你开始思考,能否将物品…

深入解读 ThreadLocal 源码及其在 ThreadLocalContext 中的使用

深入解读 ThreadLocal 源码及其在 ThreadLocalContext 中的使用 ThreadLocal 是 Java 中用于提供线程局部变量的一种机制,通过为每个线程提供独立的变量副本,保证了线程之间的数据隔离性。本文将深入解读 ThreadLocal 的源码,并展示其在 Thr…

以数治税时代来临,企业如何应对?

全电发票是数字经济时代发票的新形态,顺应了数字经济潮流。现如今,国家正全力推动行业数字化进程,预计,2025年将基本实现发票全领域、全环节、全要素电子化,实现税务执法、服务、监管与大数据智能化应用深度融合、高效…

Spring事务的源码底层实现

文章目录 事务理论执行过程EnableTransactionManagement底层实现 事务 在线流程图 理论执行过程 通过事务管理器创建一个连接对象connection1设置事务隔离级别、是否只读等conn1.autocommit(false)将conn1存入ThreadLocal中Map<DataSource,Connection>执行目标方法、多…

Session会话与请求域的区别

session会话和请求域&#xff08;也称为request域&#xff09;都是用于存储和管理用户特定信息的重要概念&#xff0c;但它们在作用范围和生命周期上有显著的不同。 请求域 (Request Domain) 作用范围&#xff1a;请求域是面向单次请求的。每次HTTP请求都会创建一个新的request…

Java中的程序异常处理介绍

一、异常处理机制 Java提供了更加优秀的解决办法&#xff1a;异常处理机制。 异常处理机制能让程序在异常发生时&#xff0c;按照代码的预先设定的异常处理逻辑&#xff0c;针对性地处理异常&#xff0c;让程序尽最大可能恢复正常并继续执行&#xff0c;且保持代码的清晰。 Ja…

算法刷题日志 —— 数组和位运算

文章目录 [461. 汉明距离](https://leetcode.cn/problems/hamming-distance/submissions/542447020/)[448. 找到所有数组中消失的数字](https://leetcode.cn/problems/find-all-numbers-disappeared-in-an-array/submissions/)[136. 只出现一次的数字](https://leetcode.cn/pro…

最长回文串

描述&#xff1a; 最长回文串 思路&#xff1a; 统计每个字母出现次数&#xff0c;如果是偶数&#xff0c;ret x;如果是存在奇数的话&#xff0c;就可以放在中间&#xff0c;ret 1. 代码&#xff1a; class Solution { public:int hash[200];int longestPalindrome(str…

记一次rocketMq根据配置文件读取listener consumerGroup异常

记一次rocketMq根据配置文件读取listener consumerGroup异常 引现象处理 引 rocketMq通常需要配置topic和consumerGroup&#xff0c;而这两个参数往往是不会直接定值写死&#xff0c;而是通过application配置文件配置变量的方式来注入。 现象 今天新增了几个topic和consumer…

AI智能修复视频,垃圾画质也变高清 HD——牛小影

很多时候&#xff0c;从网上下载的视频或监控视频都是模糊的。有什么方法或者软件可以让哪些模糊的视频恢复清晰吗&#xff1f;今天就给大家推荐一个可以使模糊的视频变清晰的软件。 我们都知道用PS或者一些修复工具可以修复模糊的图片&#xff0c;但是很多人不知道的是视频也可…

构建LangChain应用程序的示例代码:46、使用 Meta-Prompt 构建自我改进代理的 LangChain 实现

Meta-Prompt 实现 摘要&#xff1a; 本文介绍了 Noah Goodman 提出的 Meta-Prompt 方法的 LangChain 实现&#xff0c;该方法用于构建能够自我反思和改进的智能代理。 核心思想&#xff1a; Meta-Prompt 的核心思想是促使代理反思自己的性能&#xff0c;并修改自己的指令。…

上班族要怎么挑选智能猫砂盆?今年最受欢迎的牌子都在这里了!

对于上班族来说&#xff0c;猫砂盆里的猫屎到底该如何是好&#xff0c;放到下班回来再铲&#xff0c;猫砂的臭味早就飘满屋子&#xff0c;想立刻铲掉吧&#xff0c;班不要上啦&#xff1f;可是不铲就会生细菌&#xff0c;谁也不想花个几千块去给猫咪看病吧&#xff0c;谁不希望…

运算逻辑符的短路特性

在开发时遇到了这样一个问题&#xff1a; public boolean isPasswordNullOrEmpty(Context context) {return getPassword(context) ! null && !getPassword(context).isEmpty; } 这个方法想要实现的效果是获取一个password是否为空的状态&#xff0c;但会出现报错&am…

Linux:进程和计划任务管理

目录 一、程序和进程 1.1、程序 1.2、进程 1.3、线程 1.4、协程 二、查看进程相关命令 2.1、ps命令&#xff08;查看静态的进程统计信息&#xff09; 第一行为列表标题&#xff0c;其中各字段的含义描述如下 2.2、top命令&#xff08;查看进程动态信息&#xff09; 2…

商城积分系统的设计方案(上)-- 需求分析

一、背景 用户在参与公司的促销活动&#xff0c;比如邀请用户下单支付&#xff0c;可以获得虚拟货币。它可以用于解锁学习课程。 商品在定价的时候&#xff0c;需支持虚拟货币&#xff0c;用户在购买该商品的时候&#xff0c;可使用虚拟货币进行支付。 在电商体系中&#xf…

等保2.0自查表,扩展部分

等保2.0自查表&#xff0c;扩展部分&#xff0c;参考标准&#xff1a; GB∕T 22239-2019 《信息安全技术 网络安全等级保护基本要求》 GB∕T 28448-2019 《信息安全技术网络安全等级保护测评要求》 云计算安全 层面 控制点 检查项 三级要求 二级要求 安全物理环境 基础…

android:exported=“false“

书籍&#xff1a; 《第一行代码 Android》第三版 开发环境&#xff1a; Android Studio Jellyfish | 2023.3.1 问题&#xff1a; A launchable activity must be exported as of Android 12, which also makes it available to other apps 新建的activity中的android:exp…

PID算法介绍以及代码实现过程说明

写在正文之前 在上一篇文章就说会在这两天会基于PID写一个文章&#xff0c;这里的原理部分值得大家都看一下&#xff0c;代码部分的实现是基于python的&#xff0c;但是对于使用其他编程语言的朋友&#xff0c;由于我写的很通俗易懂&#xff0c;所以也值得借鉴。 一、PID算法…

最大流的学习代码,匹配问题的学习 使用c++

使用一个例子学习最大流和匹配问题&#xff0c;假如某地有n个出租车司机和m个正在打车的乘客&#xff0c;他们应该如何匹配&#xff1b; #include <iostream> // 用于输入输出 #include <vector> // 用于动态数组 #include <queue> // 用于广度优先…