室内地图制作-电子地图管理系统源代码公开-室内地图 开源-SDK调用指南(二)

一、室内外电子地图可视化制图项目需求

室内外地图开发需满足开发者可以在Android、iOs、web应用中加入地图相关的功能,包括:地图展示、地图交互、在地图上绘制路线、POI点、搜索、AR导航、蓝牙点位、离线地图等功能。

在开源室内地图编辑-电子地图管理系统源代码公开-SDK调用实战指南(一)一文中我们提到了基础室内地图的基础呈现、2D/3D切换、图地图POI点击以及坐标转换的实现代码。今天,我们将深入探讨电子地图室内外一体化技术,并通过实例代码展示如何实现室内外一体化电子地图的集成与应用。

二、室内外电子地图切换

开发者可以实现电子地图室内外无缝切换,用户移动地图并缩放,将自动切换室内外模式,比如初始视角是室外电子地图:

放大某一栋楼后可平滑切换到室内地图,无需进行格外的按钮点击,如下图所示: 

三、室内电子地图源代码

以下代码展示了如何在电子地图上进行室内外切换:

<html lang="en"><head><title>模式切换</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><script src="https://www.wxb3d.com/saas/sdk/v1.1/VgoMap.umd.js"></script><link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1.1/VgoMap.umd.css">
</head>
<style>html,body {width: 100%;height: 100%;padding: 0px;margin: 0px;box-sizing: border-box;position: relative;}.card {position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);z-index: 1;padding: 10px;border-radius: 10px;font-size: 12px;background-color: #fff;}
</style><body><div id="mapContainer" style="width: 100%; height: 100%;"></div><div class="card">移动地图并缩放,将自动切换室内外模式</div>
</body>
<script>let mapId = '1661676290278822678' // 您创建的地图ID// 初始化地图let map = new VgoMap.Map({el: 'mapContainer',id: mapId,})map.on('loaded', () => {console.log('地图加载成功')})
</script></html>

在本文中,我们通过代码示例,详细介绍了一些电子地图的室内外切换。开发者可以根据自己的应用场景灵活实现,从而开发出更智能、更高效的基于地图服务的应用。接下来我会分享关于室内地图制作有关的楼层控件、指南针控件、电子地图缩放放大等控件的操作,大家可以期待一下,也欢迎大家跟我分享。

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

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

相关文章

Docker安装Mysql5.7,解决无法访问DockerHub问题

Docker安装Mysql5.7&#xff0c;解决无法访问DockerHub问题 简介 Docker Hub 无法访问&#xff0c;应用安装失败&#xff0c;镜像拉取超时的解决方案。 摘要 &#xff1a; 当 Docker Hub 无法访问时&#xff0c;可以通过配置国内镜像加速来解决应用安装失败和镜像拉取超时的…

Apple Vision Pro市场表现分析:IDC最新数据揭示的真相

随着AR/VR技术逐渐成熟并被更多消费者接受,2024年第二季度(Q2)成为这一领域的一个重要转折点。根据国际数据公司(IDC)发布的最新报告,整个AR/VR市场在本季度经历了显著的增长。接下来,我们将深入探讨Apple Vision Pro在这股增长浪潮中的具体表现。 市场背景 2024年Q2,…

第五届光学与图像处理国际学术会议(ICOIP 2025)征稿中版面有限!

第五届光学与图像处理国际学术会议&#xff08;ICOIP 2025&#xff09; 2025 5th International Conference on Optics and Image Processing (ICOIP 2025&#xff09; 重要信息 时间地点&#xff1a;2025年4月25-27日丨中国西安 截稿日期&#xff1a;2024年12月16日23:59 …

k8s和ipvs、lvs、ipvsadm,iptables,底层梳理,具体是如何实现的

计算节点的功能&#xff1a; 提供容器运行的环境 kube-proxy的主要功能&#xff1a; 术业有专攻&#xff0c; kube-proxy的主要功能可以概括为4个字 网络规则 那么kube-proxy自己其实是个daemonset控制器跑的 每个节点上都有个的pod 它负责网络规则 其实呢 它还是个小…

vue3中watch的用法以及使用场景以及与watchEffect的使用对比

在 Vue 3 中&#xff0c;watch 和 watchEffect 是响应式系统的重要工具&#xff0c;帮助开发者监听数据变化并执行副作用操作。为了让你更好地理解 watch 和 watchEffect 的用法及其区别&#xff0c;这里将详细解释它们的使用方式、适用场景以及它们在基本类型和引用类型上的监…

maven本地打jar包依赖

本地工程的pom文件中引入了mysql依赖&#xff0c;但是在maven库中没有拉下来&#xff0c;可以到mysql官网下载jar包&#xff0c;使用maven手动打包到本地仓库中&#xff1a; 官网地址&#xff1a;MySQL :: Download MySQL Connector/J (Archived Versions) 在jar包所在位置的路…

06_Linux 文件权限与管理命令

系列文章导航&#xff1a;01_Linux基础操作CentOS7学习笔记-CSDN博客 文章目录 Linux 文件权限与管理命令一、Linux 文件类型二、用户/组管理用户相关文件用户信息解析用户密码管理&#xff1a;shadow 阴影文件解析用户管理命令1. **useradd**&#xff1a;添加新用户2. **user…

揭开C++ STL的神秘面纱之string:提升编程效率的秘密武器

目录 &#x1f680;0.前言 &#x1f688;1.string 构造函数 &#x1f69d;1.1string构造函数 &#x1f69d;1.2string拷贝构造函数 &#x1f688;2.string类的使用 &#x1f69d;2.1.查询元素个数或空间 返回字符串中有效字符的个数&#xff1a;size lenth 返回字符串目…

JavaScript 中如何实现函数缓存

在JavaScript中&#xff0c;函数缓存是一种优化技术&#xff0c;它通过将函数的计算结果存储起来&#xff0c;以避免在后续调用中重复计算相同的值。这特别适用于那些计算成本高昂且输入参数有限的函数。以下是实现函数缓存的几种常见方法&#xff1a; 1. 使用对象作为缓存 这…

AI赋能R-Meta分析核心技术:从热点挖掘到高级模型、助力高效科研与论文发表

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面&#xff0c;成为Science、Nature论文的…

【机器学习】13. 决策树

决策树的构造 策略&#xff1a;从上往下学习通过recursive divide-and-conquer process&#xff08;递归分治过程&#xff09; 首先选择最好的变量作为根节点&#xff0c;给每一个可能的变量值创造分支。然后将样本放进子集之中&#xff0c;从每个分支的节点拓展一个。最后&a…

通过ssh端口反向通道建立并实现linux系统的xrdp以及web访问

Content 1 问题描述2 原因分析3 解决办法3.1 安装x11以及gnome桌面环境查看是否安装x11否则使用下面指令安装x11组件查看是否安装gnome否则使用下面指令安装gnome桌面环境 3.2 安装xrdp使用下面指令安装xrdp&#xff08;如果安装了则跳过&#xff09;启动xrdp服务 3.3 远程服务…

为什么需要MQ?MQ具有哪些作用?你用过哪些MQ产品?请结合过往的项目经验谈谈具体是怎么用的?

需要使用MQ的主要原因包括以下几个方面‌&#xff1a; ‌异步处理‌&#xff1a;在分布式系统中&#xff0c;使用MQ可以实现异步处理&#xff0c;提高系统的响应速度和吞吐量。例如&#xff0c;在用户注册时&#xff0c;传统的做法是串行或并行处理发送邮件和短信&#xff0c;这…

混个1024勋章

一眨眼毕业工作已经一年了&#xff0c;偶然进了游戏公司成了一名初级游戏服务器开发。前两天总结的时候&#xff0c;本来以为自己这一年没学到多少东西&#xff0c;但是看看自己的博客其实也有在进步&#xff0c;虽然比不上博客里的众多大佬&#xff0c;但是回头看也算是自己的…

Ruby CGI Cookie

Ruby CGI Cookie 在Web开发中,Cookie是一种常用的技术,用于在用户浏览器和服务器之间存储和传递信息。Ruby作为一种流行的编程语言,提供了CGI(Common Gateway Interface)库来处理Cookie。本文将详细介绍如何在Ruby中使用CGI库来创建、读取、修改和删除Cookie。 Cookie的…

如何检查前端项目和 Node 项目中未被使用的依赖包

前言 在日常的开发工作中&#xff0c;随着项目的不断迭代和功能的逐渐增加&#xff0c;我们难免会安装许多依赖包。时间一长&#xff0c;项目中可能会存在一些不再使用的依赖包。这些未被使用的依赖包不仅会增加项目的体积&#xff0c;还可能带来安全隐患。 本文将介绍如何检查…

如果自建 ChatGPT,我会如何从 Model、Inference runtime 构建整个系统

ChatGPT 是一个基于 LLM 的对话系统。本文将介绍如何构建一个类似 ChatGPT 的系统&#xff0c;包括从模型、推理引擎到整体架构的构建过程。 系统概览 让我们关注最核心的对话部分。 如上图所示&#xff0c;web 负责与用户进行交互&#xff0c;server 接受用户的对话请求&…

算法的学习笔记—数组中只出现一次的数字(牛客JZ56)

&#x1f600;前言 在数组中寻找只出现一次的两个数字是一道经典的问题&#xff0c;通常可以通过位运算来有效解决。本文将详细介绍这一问题的解法&#xff0c;深入解析其背后的思路。 &#x1f3e0;个人主页&#xff1a;尘觉主页 文章目录 &#x1f970;数组中只出现一次的数字…

JavaScript 第27章:构建工具与自动化

在现代JavaScript开发中&#xff0c;构建工具、代码转换工具、代码质量和代码格式化工具对于提高开发效率、保持代码整洁以及确保代码质量有着至关重要的作用。下面将分别介绍Webpack、Babel、ESLint和Prettier的配置与使用&#xff0c;并给出一些示例。 1. 构建工具&#xff…

Vue组件学习 | 一、 Router组件

各位程序员1024节日快乐~ Vue Router 是 Vue.js 的官方路由管理器&#xff0c;它和 Vue.js 的核心深度集成&#xff0c;让构建单页面应用&#xff08;SPA&#xff09;变得简单。以下是 Vue Router 的基本用法 Vue Router 基本用法 安装 Vue Router 首先&#xff0c;你需要安…