小程序集arcgis地图显示自定义坐标的功能实现记录!(学习笔记)
最近再做一个新能源回收项目,项目中有个根据回收点坐标数据显示区域内回收点位置,点击图标直接导航到该位置,及分布的需求,研究了一下,实现效果如下,实现起来很简单,代码及效果

回收点位置及分布效果如图:

点击图标导航直达效果:

代码如下
data() {return {longitude: 118.796877, // 初始经度latitude: 32.060255, // 初始纬度scale: 14, // 初始缩放级别markers: [], // 用于存储地图上的标记数据};},onLoad() {// 假设这里你已经通过API获取了ArcGIS图层中的点位数据,并解析成了以下格式: const pointsData = [ { id: 1, latitude: 32.060255, longitude: 118.796877, iconPath: '/static/icondc/icon2.png' },{ id: 2, latitude: 31.943066, longitude: 118.795807, iconPath: '/static/icondc/icon2.png' },{ id: 3, latitude: 32.060005, longitude: 118.788877, iconPath: '/static/icondc/icon2.png' },{ id: 4, latitude: 32.056232, longitude: 118.797241, iconPath: '/static/icondc/icon2.png' },{ id: 5, latitude: 32.05338585150547, longitude: 118.79315867787933, iconPath: '/static/icondc/icon2.png' },// ... 其他点位数据 ]; // 将点位数据转换为小程序map组件可以识别的markers数组 const markers = pointsData.map(point => ({ id: point.id, latitude: point.latitude, longitude: point.longitude, iconPath: point.iconPath, // 自定义图标路径,注意路径可能需要是相对于项目的静态资源路径 width: 50, // 标记宽度 height: 50, // 标记高度 })); this.markers = markers; // 在 uni-app 中,你可以直接修改 data 中的属性来触发视图更新 },methods: {// 用于处理 marker 的点击事件onMarkerTap(event) {const markerId = event.markerId; // 获取当前点击的 marker 的 idconst tappedMarker = this.markers.find(marker => marker.id === markerId); // 根据 id 获取点击的 marker 数据if (!tappedMarker) return; // 如果找不到 marker,则不执行后续操作// 在这里可以弹出一个浮窗提示用户是否导航到这里// 假设有一个自定义的弹窗组件 showDialog 可以接收一个回调函数this.showDialog(() => {// 当用户点击确认后,执行导航操作uni.openLocation({latitude: tappedMarker.latitude,longitude: tappedMarker.longitude,success() {console.log('导航成功');},fail() {console.log('导航失败');}});});},
相关文章:
小程序集arcgis地图显示自定义坐标的功能实现记录!(学习笔记)
最近再做一个新能源回收项目,项目中有个根据回收点坐标数据显示区域内回收点位置,点击图标直接导航到该位置,及分布的需求,研究了一下,实现效果如下,实现起来很简单,代码及效果 回收点位置及分…...
谷歌医疗大模型登Nature,Med-PaLM重磅揭秘!AI医生成绩比肩人类
5月I/O大会上,Med-PaLM 2重磅升级,甚至达到了专家水准。 今天,谷歌揭秘微调后的Med-PaLM,同样在医学问题上一骑绝尘。 研究成果已登Nature。 论文地址:https://www.nature.com/articles/s41586-023-06291-2 这项研究…...
java-字符串相关类的底层原理
在 Java 中,字符串处理是编程中的一个常见任务。Java 提供了多种字符串相关的类,如 String, StringBuilder, StringBuffer 和 CharSequence 等,以满足不同的需求。这些类的底层原理基于 Java 内部的数据结构和算法。在本教程中,我…...
C++模板编程—学习C++类库的编程基础
课程总目录 文章目录 一、详解函数模板二、类模板三、类模板实践:实现向量容器vector四、理解容器空间配置器allocator的重要性 一、详解函数模板 模板的意义:对类型也可以进行参数化了 // 也可以用template<class T>,但class容易和类…...
[每周一更]-(第99期):MySQL的索引为什么用B+树?
文章目录 B树与B树的基本概念B树(Balanced Tree)B树(B-Plus Tree)对比 为什么MySQL选择B树1. **磁盘I/O效率**2. **更稳定的查询性能**3. **更高的空间利用率**4. **并发控制** 其他树结构的比较参考 索引是一种 数据结构&#x…...
详解MySQL的MVCC机制
多版本并发控制(MVCC,Multi-Version Concurrency Control)是MySQL InnoDB存储引擎用于实现事务隔离和提高并发性能的一种机制。MVCC通过在同一数据的多个版本之间进行管理,允许读写操作并发进行,从而避免了传统锁机制带…...
docker部署skywalking
skywalking版本下载 1:拉取skywalking的oap镜像(可以选择自己的版本,最好与ui,agent版本一致) docker pull apache/skywalking-oap-server:9.5.02:启动oap docker run -d -p 11800:11800 -p 12800:12800 --name sw_oap apache/…...
Mac 使用Docker安装Elasticsearch、Kibana 、ik分词器、head
安装ElasticSearch 通过docker安装es docker pull elasticsearch:7.8.1 在本地创建elasticsearch.yml文件 mkdir /Users/ky/Documents/learn/es/elasticsearch.yml 编辑yml文件内容 http: host: 0.0.0.0 xpack.security.enabled: false xpack.security.enrollment.enabled: t…...
【Webpack4打包机制原理解析】
webpack是一个打包模块化 JavaScript 的工具,在 webpack里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。 # 简单版打包模型步骤 我们先从简单的入手…...
如何提高接口响应速度
在非大数据(几万以上记录)的情况下,影响接口响应速度的因素中最大的是查询数据库的次数,其次才是数组遍历和简单数据处理(如根据已有字段增加新的属性,或计算值)。 一般一次数据库查询需要50毫秒…...
项目敏感配置信息加固
概述 引入jasypt做密码等敏感配置信息的加固 项目集成依赖 pom.xml引入jasypt-spring-boot-starter依赖 <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.…...
HCIA-AI课程大纲
该阶段详细介绍各个机器学习范式方法,涵盖有监督、无监督、半监督、强化学习,以及深度学习算法基础,共计 72 课时。 第一节:华为云 ModelArts 云服务开发环境搭建 - (2 课时) - 华为云 ModelArts 云服务简…...
keil program algorithm 出错
前段时间 在 调试下载算法时,遇到一个奇怪的问题 就是 加载下载算法后, 下载算法的RAM空间 大小不能修改为 单片机的最大RAM,只能改到最大4KB的空间大小, 再大就报错 刚开始报错 一直不知道原因,走了很多弯路, 到最…...
SITNE24V2BNQ-3/TR一种瞬态电压抑制器,对标PESD1CAN
SITNE24V2BNQ是一种瞬态电压抑制器,设计用于保护两个汽车控制器区域 网络(CAN)母线不受ESD等瞬变造成的损坏。 SITNE24V2BNQ采用SOT-23封装。标准产品不含铅和卤素。 产品参数 方向:双向通道数:2VRWM(V)(Max):24IPP8/20μS(A)(M…...
Vue3【四】使用Vue2的写法写一个新的组件子组件和根组件
Vue3【四】使用Vue2的写法写一个新的组件 Vue3【四】使用Vue2的写法写一个新的组件 Vue3是向下兼容的,所有可以使用Vue的选项式写法 运行截图 目录结构 文件源码 App.vue <template><div class"app"><h1>你好世界! 我是App根组件<…...
指标体系建设10大坑
在企业经营和运营管理中,指标体系的建设至关重要,它在一定程度上是反映业务的问题状况,影响决策者的决策。但是,在指标体系的建设过程中,常常会存在一些不容忽视的“坑”,今天做个总结,以下为个…...
ubuntu 20.04上docker 使用gpu
要在Docker容器中使用GPU,你需要确保系统上已经安装了正确的NVIDIA驱动程序,并且安装了NVIDIA Container Toolkit。以下是详细的步骤: 1. 安装NVIDIA驱动程序 确保你的系统上已经安装了适当版本的NVIDIA驱动程序。你可以通过运行以下命令来检查驱动程序是否正确安装: nv…...
短剧系统投流版开发,为运营公司投流业务赋能
短剧系统投流版开发是一项复杂的任务,旨在为运营公司的投流业务提供强大的技术支持和赋能。以下是一些关键步骤和考虑因素,以确保短剧系统投流版的成功开发: 一、明确业务需求与目标 首先,需要深入了解运营公司的业务需求、目标…...
入坑必看的几个嵌入式方向热点问题
我们为何要学嵌入式?---需求、薪资、长期发展 嵌入式是成为下一个JAVA吗? 互联网开发和嵌入式开发怎么选? 高薪热门就业方向有哪些? 刚入门,刚毕业,学完没有“工作经验”,能有人要吗&#x…...
电能表如何与智能家居进行有效的融合
随着智能家居技术的不断发展,越来越多的家庭开始使用智能家电、智能照明、智能安防等智能设备,以实现更加便捷、舒适、安全的居住环境。而电能表作为电力系统中不可或缺的一环,不仅承担着计量电能的重要职责,还可以为智能家居系统…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
如何配置一个sql server使得其它用户可以通过excel odbc获取数据
要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据,你需要完成以下配置步骤: ✅ 一、在 SQL Server 端配置(服务器设置) 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到:SQL Server 网络配…...
DiscuzX3.5发帖json api
参考文章:PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下,适配我自己的需求 有一个站点存在多个采集站,我想通过主站拿标题,采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...
《Offer来了:Java面试核心知识点精讲》大纲
文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...
