SuperMap iClient3D for WebGL三维场景与二维地图联动

作者：Lzzzz

在城市规划，应急救援，旅游规划等项目场景中，普遍存在通过二维地图定位区域或路线，三维场景展示布局细节的情况，那么，如何使三维场景与二维地图联动起来呢，一起来看看如何实现吧！

最终效果

实现步骤

  • 监听二维地图的平移事件，并更新三维场景的相机位置。
  • 在三维场景移动时，获取相机位置，同时更新二维地图的中心点。

关键代码

定义信号变量

定义信号变量，保证地图联动效果和场景联动效果同一时间只能触发一个  防止循环调用。

        // 监听鼠标进入地图和 SuperMap3D 容器的区域，以确定当前激活的是哪个var activeMap = true;document.getElementById('map').addEventListener('pointerenter', () => {activeMap = true;});// 监听鼠标进入 SuperMap3D 容器的区域，以确定当前激活的是地图还是场景document.getElementById('Container').addEventListener('pointerenter', () => {activeMap = false;});

地图监听

// 监听地图中心变化，并更新 SuperMap3D 的相机位置map.getView().on('change:center', () => {if (activeMap) {const center = map.getView().getCenter();const cartographic = SuperMap3D.Cartographic.fromCartesian(viewer.camera.position);const height = cartographic.height; // 获取高度// 更新 MySuperMap3D 的相机位置const cartesian = SuperMap3D.Cartesian3.fromDegrees(center[0], center[1], height); // 设定一定高度viewer.camera.flyTo({destination: cartesian,duration: 0 // 立即移动});};});

场景监听

        // 监听相机位置变化事件，以更新 OpenLayers 地图的视点viewer.camera.changed.addEventListener(() => {if (activeMap) return;const camera = viewer.camera;// 从相机的世界坐标获取经纬度const cartographic = SuperMap3D.Cartographic.fromCartesian(camera.position);// 获取高度并打印以检查const latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);const longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);// 更新 OpenLayers 地图的视点map.getView().setCenter([longitude, latitude]);});

项目完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>地图场景联动</title><link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet"><link href="./css/bootstrap.min.css" rel="stylesheet"><link href="./css/pretty.css" rel="stylesheet"><link href="./css/bootstrap-select.min.css" rel="stylesheet"><script src="./js/jquery.min.js"></script><script src="./js/bootstrap.min.js"></script><script src="./js/bootstrap-select.min.js"></script><script src="./js/config.js"></script><script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script><script type="text/javascript" src="/examples/js/include-web.js"></script><script type="text/javascript" src="/examples/dist/openlayers/include-openlayers.js"></script>
</head>
<body>
<div id="Container"></div>
<div id='loadingbar' class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>
</div>
<div id="map" class="map" style="width:400px;height: 450px; position: absolute;top:580px">
</div><script>function onload(SuperMap3D) {var EngineType = getEngineType();var viewer = new SuperMap3D.Viewer('Container', {contextOptions: {contextType: Number(EngineType), // Webgl2:2 ; WebGPU:3}});viewer.scenePromise.then(function(scene){init(SuperMap3D, scene, viewer);});}function init(SuperMap3D, scene, viewer) {viewer.resolutionScale = window.devicePixelRatio;viewer.imageryLayers.addImageryProvider(new SuperMap3D.TiandituImageryProvider({credit : new SuperMap3D.Credit('天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局'),token: URL_CONFIG.TOKEN_TIANDITU}));var imageryLayers = viewer.imageryLayers;//初始化天地图全球中文注记服务，并添加至影像图层var labelImagery = new SuperMap3D.TiandituImageryProvider({mapStyle : SuperMap3D.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）token: URL_CONFIG.TOKEN_TIANDITU});imageryLayers.addImageryProvider(labelImagery);var map = new ol.Map({target: 'map',view: new ol.View({center: [0,0],zoom: 1,projection: "EPSG:4326",multiWorld: true}),layers: [new ol.layer.Tile({source: new ol.source.Tianditu({key: "1d109683f4d84198e37a38c442d68311",projection: "EPSG:4326"})}), new ol.layer.Tile({source: new ol.source.Tianditu({key: "1d109683f4d84198e37a38c442d68311",isLabel: true,projection: "EPSG:4326"})})]});// 监听鼠标进入地图和 SuperMap3D 容器的区域，以确定当前激活的是哪个var activeMap = true;document.getElementById('map').addEventListener('pointerenter', () => {activeMap = true;});// 监听鼠标进入 SuperMap3D 容器的区域，以确定当前激活的是地图还是场景document.getElementById('Container').addEventListener('pointerenter', () => {activeMap = false;});// 监听地图中心变化，并更新 SuperMap3D 的相机位置map.getView().on('change:center', () => {if (activeMap) {const center = map.getView().getCenter();const cartographic = SuperMap3D.Cartographic.fromCartesian(viewer.camera.position);const height = cartographic.height; // 获取高度// 更新 MySuperMap3D 的相机位置const cartesian = SuperMap3D.Cartesian3.fromDegrees(center[0], center[1], height); // 设定一定高度viewer.camera.flyTo({destination: cartesian,duration: 0 // 立即移动});};});// 监听相机位置变化事件，以更新 OpenLayers 地图的视点viewer.camera.changed.addEventListener(() => {if (activeMap) return;const camera = viewer.camera;// 从相机的世界坐标获取经纬度const cartographic = SuperMap3D.Cartographic.fromCartesian(camera.position);// 获取高度并打印以检查const latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);const longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);// 更新 OpenLayers 地图的视点map.getView().setCenter([longitude, latitude]);});$('#loadingbar').remove();}if (typeof SuperMap3D !== 'undefined') {window.startupCalled = true;onload(SuperMap3D);}
</script>
</body>
</html>

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

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

相关文章

AWS SQS跨账户访问失败排查指南

AWS SQS跨账户访问失败排查指南

引言 在使用AWS SQS（Simple Queue Service）时，跨账户访问是常见的业务场景。例如，账户A的应用程序向队列发送消息，账户B的消费者从队列拉取消息。尽管AWS官方文档明确支持此类配置，但在实际应用中，由于权限模型的复杂性，开发者和运维人员常会遇到“策略已配置但无法接…
阅读更多...
win本地vscode通过代理远程链接linux服务器

win本地vscode通过代理远程链接linux服务器

时间&#xff1a;2025.2.28 1. win本地下载nmap.exe nmap官网 https://nmap.org/或者 https://nmap.org/download#windows下载win版本并安装。 2. vscode插件Remote-SSH 插件下载Remote-SSH 3. 配置 按照图中顺序配置ssh 1.点击左侧工具栏的“小电视”图标 2.点击ssh的…
阅读更多...
基于ArcGIS Pro、Python、USLE、INVEST模型等多技术融合的生态系统服务构建生态安全格局

基于ArcGIS Pro、Python、USLE、INVEST模型等多技术融合的生态系统服务构建生态安全格局

生态安全是指生态系统的健康和完整情况。生态安全的内涵可以归纳为&#xff1a;一&#xff0c;保持生态系统活力和内外部组分、结构的稳定与持续性&#xff1b;二&#xff0c;维持生态系统生态功能的完整性&#xff1b;三&#xff0c;面临外来不利因素时&#xff0c;生态系统具…
阅读更多...
Java 入门 （超级详细）

Java 入门 （超级详细）

一、什么是Java Java是一种高级编程语言&#xff0c;由Sun Microsystems公司于1995年推出。Java具有跨平台性、面向对象、健壮性、安全性、可移植性等特点&#xff0c;被广泛应用于企业级应用开发、移动应用开发、大数据处理、云计算等领域。Java程序可以在不同的操作系统上运…
阅读更多...
神经网络 - 激活函数（Swish函数、GELU函数）

神经网络 - 激活函数（Swish函数、GELU函数）

一、Swish 函数 Swish 函数是一种较新的激活函数&#xff0c;由 Ramachandran 等人在 2017 年提出&#xff0c;其数学表达式通常为 其中 σ(x) 是 Sigmoid 函数&#xff08;Logistic 函数&#xff09;。 如何理解 Swish 函数 自门控特性 Swish 函数可以看作是对输入 x 进行“…
阅读更多...
学习笔记08——ConcurrentHashMap实现原理及源码解析

学习笔记08——ConcurrentHashMap实现原理及源码解析

1. 概述 为什么需要ConcurrentHashMap&#xff1f; 解决HashMap线程不安全问题&#xff1a;多线程put可能导致死循环&#xff08;JDK7&#xff09;、数据覆盖&#xff08;JDK8&#xff09; 优化HashTable性能&#xff1a;通过细粒度锁替代全局锁&#xff0c;提高并发度 对比…
阅读更多...
算法之排序算法

算法之排序算法

排序算法 ♥常见排序算法知识体系详解♥ | Java 全栈知识体系 算法 - 排序 | CS-Notes 面试笔记 十大经典排序算法总结 | JavaGuide
阅读更多...
C#释放内存空间的方法

C#释放内存空间的方法

目录 前言释放 C# 对象内存的六种方法1、手动释放内存空间2、使用 Using 语句3、使用 垃圾回收器4、GC.Collect() 方法5、GC.WaitForPendingFinalizers() 方法6、WeakReference 类 注意 前言 当不再需要对象时释放内存空间对于防止内存泄漏和提高应用程序性能至关重要。C# 提供…
阅读更多...
pg pg_prewarm用法

pg pg_prewarm用法

按照插件 > create extension pg_prewarm ;缓存表 > test# select pg_prewarm(weather,buffer ) ; pg_prewarm > ------------ > 1缓存表部分内容 test# select pg_prewarm(weather,buffer,main,0,0) ;pg_prewarm ------------1 (1 row)表大小只有0号…
阅读更多...
C语言总结目录

C语言总结目录

一、数据类型【文章链接】 二、标识符【文章链接】​​​​​​​ #编译GCC 三、程序结构语句 四、输入输出函数 五、数组 六、指针 七、数组指针&&指针数组 八、排序算法 九、结构体 十、链表 十一、宏定义 十二、文件读写 十三、静态库&&动态库…
阅读更多...
Lua | 每日一练 (5)

Lua | 每日一练 (5)

&#x1f4a2;欢迎来到张胤尘的技术站 &#x1f4a5;技术如江河&#xff0c;汇聚众志成。代码似星辰&#xff0c;照亮行征程。开源精神长&#xff0c;传承永不忘。携手共前行&#xff0c;未来更辉煌&#x1f4a5; 文章目录 Lua | 每日一练 (5)题目参考答案浅拷贝深拷贝使用场景…
阅读更多...
HOW - 在Windows浏览器中模拟MacOS的滚动条

HOW - 在Windows浏览器中模拟MacOS的滚动条

目录 一、原生 CSS 代码实现模拟 macOS 滚动条额外优化应用到某个特定容器 二、Antd table中的滚动条场景三、使用第三方工具/扩展 如果你想让 Windows 里的滚动条 模拟 macOS 的效果&#xff08;细窄、圆角、隐藏默认轨道&#xff09;。 可以使用以下几种方案&#xff1a; 一…
阅读更多...
服务器租用：静态BGP和动态BGP分别指什么？

服务器租用：静态BGP和动态BGP分别指什么？

今天小编主要来带大家一起了解一下静态BGP和动态BGP分别是指什么&#xff1f; BGP主要是用在不同网络之间进行交换路由信息的协议&#xff0c;通常是用在互联网当中&#xff0c;而静态BGP和动态BGP是两种不同的方法来配置BGP路由&#xff0c;静态BGP路由是由手动配置的&#xf…
阅读更多...
版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点

版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点

版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点 引言正文引言 必读文章 ------ 版图自动化连接算法开发 00001 ------ 直接连接两个给定的坐标点。 此处，我们对给定点的坐标进行一下限制，因为是只添加一个点，因…
阅读更多...
JavaEE--计算机是如何工作的

JavaEE--计算机是如何工作的

一、一台计算机的组成部分 1.CPU&#xff08;中央处理器&#xff09; 2.主板&#xff08;一个大插座&#xff09; 3.内存&#xff08;存储数据的主要模板&#xff09; 4.硬盘&#xff08;存储数据的主要模板&#xff09; 内存和硬盘对比&#xff1a; 内存硬盘读写速度快慢存…
阅读更多...
电源测试系统有哪些可以利用AI工具的科技？？

电源测试系统有哪些可以利用AI工具的科技？？

AI技术的发展对电源模块测试系统的影响是深远的&#xff0c;不仅协助系统提升了测试效率和精度&#xff0c;还推动了测试方法的创新和智能化。那么在电源测试系统中哪些模块可以利用AI工具实现自动化测试? 1. 自动化测试与效率提升 智能测试流程优化 AI算法可以自动优化测试…
阅读更多...
React 之 Redux 第二十八节 学习目标与规划大纲及概要讲述

React 之 Redux 第二十八节 学习目标与规划大纲及概要讲述

接下来 开始Redux 全面详细的文档输出&#xff0c;主要基于一下几个方面&#xff0c;欢迎大家补充指正 一、Redux 基础概念 为什么需要 Redux&#xff1f; 前端状态管理的挑战&#xff08;组件间通信、状态共享&#xff09; Redux 解决的问题&#xff1a;集中式、可预测的状态…
阅读更多...
通过多线程同时获取H264和H265码流

通过多线程同时获取H264和H265码流

目录 一.RV1126 VI采集摄像头数据并同时编码H264、H265的大概流程​编辑​编辑 1.1初始化VI模块&#xff1a; 1.2H264、H265的VENC模块初始化&#xff1a; 1.3VI分别绑定H264的VENC层和H265的VENC层&#xff1a; ​​​​​​​1.4开启H264线程采集H264的VENC数据&#xff…
阅读更多...
unity lua属性绑定刷新

unity lua属性绑定刷新

我们现在有一个 角色属性类叫heroModel,内容如下,当heroModel中的等级发生变化的时候&#xff0c;我们需要刷新界面显示等级信息&#xff0c;通常我们是在收到等级升级成功的协议的时候&#xff0c;发送一个事件&#xff0c;UI界面接受到这个事件的时候&#xff0c;刷新一下等级…
阅读更多...
vscode+vue前端开发环境配置

vscode+vue前端开发环境配置

目录 一、安装Vue二、使用vue新建项目 一、安装Vue 在node.js安装好之后&#xff0c; npm config set registry https://registry.npmmirror.com# 安装vue相关工具&#xff0c;webpack用来项目构建、打包、资源整合等。 npm install webpack -g# 安装vue-cli脚手架 npm insta…
阅读更多...
最新文章

Copyright @ 2022~2023