SuperMap iClient3D for WebGL 影像数据可视范围控制
在共享同一影像底图的服务场景中，如何基于用户权限体系实现差异化的数据可视范围控制？SuperMap iClient3D for WebGL提供了自定义区域影像裁剪的方法。让我们一起看看吧！
一、数据制作
对于上述视频中的地图制作，此处不做讲述，如有需要可访问：Online 开发者中心
可视化案例中提供了详细的代码、数据下载链接及数据制作过程。
二、实现思路
影像数据可视范围控制的实现思路如下图所示：
三、关键代码
遍历Geojson数据获取坐标数组关键代码如下：
if (data.type === "MultiPolygon") {// 处理 MultiPolygon 类型的数据，可能包含多个多边形for (let i = 0; i < data.coordinates.length; i++) {for (let j = 0; j < data.coordinates[i].length; j++) {// 获取当前多边形的坐标数组let positions = data.coordinates[i][j];// 用于存储转换后的笛卡尔坐标let superMapPositions = [];for (let k = 0; k < positions.length; k++) {// 将经纬度坐标转换为地理坐标对象，高度设为 0var cartographic = SuperMap3D.Cartographic.fromDegrees(positions[k][0], positions[k][1], 0);// 将地理坐标对象转换为笛卡尔坐标var cartesian = SuperMap3D.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);superMapPositions.push(cartesian);}// 转换为经纬度和高度数组let finalPositions = [];for (let k = 0, len = superMapPositions.length; k < len; k++) {// 将笛卡尔坐标转换为地理坐标对象var cartographic = SuperMap3D.Cartographic.fromCartesian(superMapPositions[k]);// 将弧度制的经度转换为角度制var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);// 将弧度制的纬度转换为角度制var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);// 获取高度值var h = cartographic.height;// 将经纬度和高度值依次添加到数组中finalPositions.push(longitude);finalPositions.push(latitude);finalPositions.push(h);}// 将当前多边形的位置信息添加到 allPositions 数组中allPositions = allPositions.concat(finalPositions);}}
} else if (data.type === "Polygon") {// 处理 Polygon 类型的数据，只包含一个多边形let positions = data.coordinates[0];let superMapPositions = [];for (let i = 0; i < positions.length; i++) {var cartographic = SuperMap3D.Cartographic.fromDegrees(positions[i][0], positions[i][1], 0);var cartesian = SuperMap3D.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);superMapPositions.push(cartesian);}// 转换为经纬度和高度数组let finalPositions = [];for (let i = 0, len = superMapPositions.length; i < len; i++) {var cartographic = SuperMap3D.Cartographic.fromCartesian(superMapPositions[i]);var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);var h = cartographic.height;finalPositions.push(longitude);finalPositions.push(latitude);finalPositions.push(h);}// 将当前多边形的位置信息赋值给 allPositions 数组allPositions = finalPositions;
}四、示例完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义区域影像裁剪</title><link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet"><link href="./css/pretty.css" rel="stylesheet"><script src="./js/jquery.min.js"></script><script src="./js/spectrum.js"></script><script src="./js/config.js"></script><script src="./js/tooltip.js"></script><script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.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="toolbar" class="param-container tool-bar"><div class="param-item"><select id="citySelector" style="width: 150px"><option value="" selected disabled hidden>请选择所属区域</option><option value="guiyang_city">贵阳市</option><option value="anshun_city">安顺市</option><option value="bijie_city">毕节市</option><option value="liupanshui_city">六盘水市</option><option value="tongren_city">铜仁市</option><option value="zunyi_city">遵义市</option><option value="qiandongnan_prefecture">黔东南</option><option value="qiannan_prefecture">黔南</option><option value="qianxinan_prefecture">黔西南</option></select></div></div><script>// 定义各城市中心点经纬度信息const cityCenters = {"guiyang_city": [106.713478, 26.578341],"anshun_city": [105.934854, 26.224645],"bijie_city": [105.291238, 27.302327],"liupanshui_city": [104.831343, 26.590612],"tongren_city": [109.188523, 27.704321],"zunyi_city": [106.932211, 27.707422],"qiandongnan_prefecture": [107.983421, 26.587345],"qiannan_prefecture": [107.501234, 26.234567],"qianxinan_prefecture": [104.902345, 25.098765]};// 页面加载完成后执行的函数，初始化 SuperMap3D 地图function onload(SuperMap3D) {// 通过 config.js 中的 getEngineType 函数，获取引擎类型（EngineType），用于设置启动方式let EngineType = getEngineType();// 创建一个 SuperMap3D 的 Viewer 实例，将其显示在 id 为 'Container' 的容器中let viewer = new SuperMap3D.Viewer('Container', {contextOptions: {// 设置 WebGL 上下文类型，Webgl2 对应值为 2，WebGPU 对应值为 3contextType: Number(EngineType),}});// 当场景加载完成后，调用 init 函数进行初始化操作viewer.scenePromise.then(function (scene) {init(SuperMap3D, scene, viewer);});}// 初始化地图场景的函数function init(SuperMap3D, scene, viewer) {// 设置地图的分辨率比例，根据设备的像素比进行调整viewer.resolutionScale = window.devicePixelRatio;$('#loadingbar').remove();// 存储添加的影像图层let tmpLayer = viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({url: "http://localhost:8090/iserver/services/map-GuiZhou/rest/maps/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%9C%B0%E5%BD%A2%E5%9B%BE",}));// 设置所加载的影像背景透明，将白色背景设为透明tmpLayer.transparentBackColor = SuperMap3D.Color.fromCssColorString('#ffffff');// 设置透明背景的容差，即与指定颜色相近的颜色也会被视为透明tmpLayer.transparentBackColorTolerance = Number(0.1);// 让地图飞到影像所在的位置，以便用户能看到影像viewer.flyTo(tmpLayer);// 监听城市选择框的 change 事件，当用户选择不同的城市时触发$('#citySelector').change(function () {// 获取用户选择的城市的值var selectedCity = $(this).val();if (selectedCity) {// 根据选择的城市加载对应的 JSON 边界数据文件$.getJSON('./data/json/' + selectedCity + '.json', function (data) {// 用于存储所有多边形的位置信息let allPositions = [];if (data.type === "MultiPolygon") {// 处理 MultiPolygon 类型的数据，可能包含多个多边形for (let i = 0; i < data.coordinates.length; i++) {for (let j = 0; j < data.coordinates[i].length; j++) {// 获取当前多边形的坐标数组let positions = data.coordinates[i][j];// 用于存储转换后的笛卡尔坐标let superMapPositions = [];for (let k = 0; k < positions.length; k++) {// 将经纬度坐标转换为地理坐标对象，高度设为 0var cartographic = SuperMap3D.Cartographic.fromDegrees(positions[k][0], positions[k][1], 0);// 将地理坐标对象转换为笛卡尔坐标var cartesian = SuperMap3D.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);superMapPositions.push(cartesian);}// 转换为经纬度和高度数组let finalPositions = [];for (let k = 0, len = superMapPositions.length; k < len; k++) {// 将笛卡尔坐标转换为地理坐标对象var cartographic = SuperMap3D.Cartographic.fromCartesian(superMapPositions[k]);// 将弧度制的经度转换为角度制var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);// 将弧度制的纬度转换为角度制var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);// 获取高度值var h = cartographic.height;// 将经纬度和高度值依次添加到数组中finalPositions.push(longitude);finalPositions.push(latitude);finalPositions.push(h);}// 将当前多边形的位置信息添加到 allPositions 数组中allPositions = allPositions.concat(finalPositions);}}} else if (data.type === "Polygon") {// 处理 Polygon 类型的数据，只包含一个多边形let positions = data.coordinates[0];let superMapPositions = [];for (let i = 0; i < positions.length; i++) {var cartographic = SuperMap3D.Cartographic.fromDegrees(positions[i][0], positions[i][1], 0);var cartesian = SuperMap3D.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);superMapPositions.push(cartesian);}// 转换为经纬度和高度数组let finalPositions = [];for (let i = 0, len = superMapPositions.length; i < len; i++) {var cartographic = SuperMap3D.Cartographic.fromCartesian(superMapPositions[i]);var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);var h = cartographic.height;finalPositions.push(longitude);finalPositions.push(latitude);finalPositions.push(h);}// 将当前多边形的位置信息赋值给 allPositions 数组allPositions = finalPositions;}// 移除之前的裁剪区域，避免重叠viewer.scene.globe.removeImageryClipRegion("clip", [tmpLayer]);// 添加新的裁剪区域，根据选择的城市边界对影像进行裁剪viewer.scene.globe.addImageryClipRegions({position: allPositions,layers: [tmpLayer],name: "clip"});// 获取所选城市的中心点坐标const [lon, lat] = cityCenters[selectedCity];// 创建地理坐标对象const center = SuperMap3D.Cartographic.fromDegrees(lon, lat);// 创建笛卡尔坐标对象const centerCartesian = SuperMap3D.Cartesian3.fromRadians(center.longitude, center.latitude, 530000);// 让地图飞到城市中心点viewer.camera.flyTo({destination: centerCartesian,duration: 3 // 飞行时间，单位为秒});});}});}// 检查 SuperMap3D 是否已经定义，如果已经定义则调用 onload 函数进行初始化if (typeof SuperMap3D!== 'undefined') {onload(SuperMap3D);}</script>
</body></html>相关文章：
SuperMap iClient3D for WebGL 影像数据可视范围控制
在共享同一影像底图的服务场景中，如何基于用户权限体系实现差异化的数据可视范围控制？SuperMap iClient3D for WebGL提供了自定义区域影像裁剪的方法。让我们一起看看吧！ 一、数据制作 对于上述视频中的地图制作，此处不做讲述&am…...
API网关相关知识点
目录 API网关基础知识总结 | JavaGuide Spring Cloud Gateway常见问题总结 | JavaGuide API网关 | 小傅哥 bugstack 虫洞栈 美团: 百亿规模API网关服务Shepherd的设计与实现 vivo: 微服务 API 网关架构实践 唯品会: 高吞吐消息网关的探索与思考 API网关基础知识总结 | J…...
Opencv 图像形态学操作
3.1 形态学-腐蚀操作 img cv2.imread(CSDN.png) cv2.imshow(CSDN, img) cv2.waitKey(0) cv2.destroyAllWindows如果腐蚀核的覆盖区域内的所有像素值都满足条件（阈值），则中心像素的值保持不变；如果有任何像素值不满足条件&#x…...
Readability.js 与 Newspaper提取网页内容和元数据
在当今信息爆炸的时代，网页内容的提取和处理变得尤为重要。无论是从新闻网站、博客还是教程网站中提取内容，都需要一个高效、准确的工具来帮助我们去除无关信息，提取出有价值的正文内容。这不仅能够提高我们的工作效率，还能让我们…...
小程序Three Dof识别 实现景区AR体验
代码工程 GitCode - 全球开发者的开源社区,开源代码托管平台 dof...
腾讯2025年软件测试面试题
以下是基于腾讯等一线互联网公司软件测试岗位的面试趋势和技术要求，025年出现的软件测试面试题。这些问题涵盖了基础知识、自动化测试、性能测试、安全测试、编程能力等多个方面，供参考和准备。 一、基础知识 软件测试的基本概念...
SSL域名证书怎么续期？
在当今数字化时代，网站的安全性已成为企业和个人不可忽视的重要因素。SSL域名证书作为保障网站数据传输安全的关键工具，其重要性不言而喻。然而，SSL证书并非永久有效，它们通常有一个固定的有效期，到期后需要进行续期以…...
Grok3使用体验与模型版本对比分析
文章目录 Grok的功能DeepSearch思考功能绘画功能Grok 3的独特功能 Grok 3的版本和特点与其他AI模型的比较 最新新闻：Grok3被誉为“地球上最聪明的AI” 最近，xAI公司正式发布了Grok3，并宣称其在多项基准测试中展现了惊艳的表现。据官方消息&am…...
《算法宝典：全类型题目索引》
目录 🌴递归、搜索与回溯 一、递归 二、二叉树中的深搜 三、穷举vs暴搜vs深搜vs回溯vs剪枝 四、综合练习 五、FloodFill 算法 六、记忆化搜索 🌵优选算法 一、双指针 二、滑动窗口 三、二分查找 四、前缀和 五、位运算 六、模拟 七、分治 …...
Windows 11 部署 GPUStack 运行 DeepSeek
1. 介绍 DeepSeek 是一个强大的深度学习框架，适用于图像识别、自然语言处理等任务。GPUStack 是一个高效的 GPU 资源管理工具，能够帮助用户更好地利用 GPU 资源进行深度学习任务。本文将详细介绍如何在 Windows 11 系统上部署 GPUStack 并运行 DeepSeek…...
LangChain教程 - RAG - PDF问答
系列文章索引 LangChain教程 - 系列文章 在现代自然语言处理（NLP）中，基于文档内容的问答系统变得愈发重要，尤其是当我们需要从大量文档中提取信息时。通过结合文档检索和生成模型（如RAG，Retrieval-Augment…...
)
Windows 图形显示驱动开发-WDDM 3.2-自动显示切换(十二)
API 更改 ADS 功能增加了以下公共 API 功能： 枚举系统中的多路复用器设备。查询有关多路复用器的信息，例如，它连接了哪些目标，以及当前切换到哪个目标。触发多路复用器切换。如何检测多路复用器是否已切换。 枚举系统中的多路复…...
《当齐天大圣踏入3A游戏世界：黑神话·悟空的破壁传奇》：此文为AI自动生成
国产 3A 游戏的破晓之光 2024 年 8 月 20 日，这一天注定被铭记在中国游戏发展的史册上。国产首款 3A 游戏《黑神话・悟空》震撼上线，犹如一颗重磅炸弹，在全球游戏市场掀起了惊涛骇浪。仅仅上线 3 小时，其同时在线人数便突破了 140 万，一举打破 Steam 纯单机游戏最高在线纪…...
Graphics View画一个可调速的风机(pyqt)
效果如图： 风机具备调节转速的功能，转速通过扇叶旋转的快慢来区别，共分为四档，其中零档为静止状态，而一、二、三档则依次增加转速。在代码中，BlowerWrapper 类包含了可旋转的扇叶、风机外框以及选项三个主要…...
基于django图书信息管理系统的搭建(增删改查)
✍django项目搭建教程 ☞ ----------------- 教程 本文主要讲解django如何连接数据库MySQL并且可视化展示，实现增删改查功能 目录 一. 创建django应用 二. 数据库配置 三. 查看数据库 四. 编写代码 4.1视图函数 4.2 配置URL 4.3创建模板文件 4.…...
Python 编程题 第四节：斐波那契数列、列表的复制、暂停后输出、成绩评级、统计字符
斐波那契数列 方法一（递归） def f(a):if a1:return 1elif a2:return 1else:return f(a-1)f(a-2) print(f(3)) 方法二（非递归） nint(input()) lst[1,1] for i in range(2,n1):lst.append(lst[i-1]lst[i-2]) print(lst[n-1]) 列…...
【华为OD机考】华为OD笔试真题解析(15)--异常的打卡记录
题目描述 考勤记录是分析和考核职工工作时间利用情况的原始依据，也是计算职工工资的原始依据，为了正确地计算职工工资和监督工资基金使用情况，公司决定对员工的手机打卡记录进行异常排查。 如果出现以下两种情况，则认为打卡异常…...
跟我学C++中级篇——定时器的设计
一、定时器 谈到定时器，理论上讲是各种语言和各种设计都无法避开的一个技术点。对于定时器来说，表面上就是一种时间间隔的处理约定，但对程序来说，可能就是设计层面、接口层面和库或框架以及系统应用的一个大集合。不同的系统&…...
HTTP 请求时传递多部分表单数据
HTTP 请求时传递多部分表单数据（multipart/form-data） --data-raw $------demo11111\r\nContent-Disposition: form-data; name"Filedata"; filename"截屏2025-02-27 15.45.46.png"\r\nContent-Type: image/png\r\n\r\n\r\n------d…...
第J3-1周：DenseNet算法 实现乳腺癌识别
文章目录 一、前言二、前期准备1.设置GPU2.划分数据集 三、搭建网络模型1.DenseLayer模块2.DenseBlock模块3.Transition模块4.构建DenseNet5.构建densenet121 四、训练模型1.编写训练函数2.编写测试函数3.正式训练 五、结果可视化1.Loss与Accuracy图2.模型评估 总结：…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...