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…...
HTML元素，标签到底指的哪块部分？单双标签何时使用？
1. 标签（Tag） vs 元素（Element） 标签（Tag） 标签是 HTML 中用于定义元素的符号，用尖括号 < > 包裹。例如 <img> 是标签。元素（Element） 元素是由 标签 内容…...
OpenHarmony4.1-轻量与小型系统ubuntu开发环境
因OpenHarmony官网提供包含轻量、小型与标准系统的全量代码非常宠大，解包后大概需要70G以上硬盘空间，如要编译标准系统则需要140G以上空间。 如硬盘空间有限与只使用轻量/小型OpenHarmony系统，则可以下载并直接使用本人裁剪源码过的ubuntu硬盘…...
秒杀系统的常用架构是什么？怎么设计？
架构 秒杀系统需要单独部署，如果说放在订单服务里面，秒杀的系统压力太大了就会影响正常的用户下单。 常用架构： Redis 数据倾斜问题 第一步扣减库存时 假设现在有 10 个商品需要秒杀，正常情况下，这 10 个商品应该均…...
LabVIEW中三种PSD分析VI的区别与应用
在LabVIEW的声音与振动分析工具包中，SVFA Power Spectral Density VI、SVFA Power Spectral Density Subset VI 和 SVFA Zoom Power Spectral Density VI 均用于信号频域分析，但它们在功能、适用场景和操作逻辑上存在显著差异。以下从区别、应用场合、注…...
Python 如何实现 Markdown 记账记录转 Excel 存储
文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...
蓝桥杯备考：动态规划入门题目之下楼梯问题
按照动态规划解题顺序，首先，我们要定义状态表示，这里根据题意f[i]就应该表示有i个台阶方案总数 第二步就是 确认状态转移方程，画图分析 所以实际上f[i] 也就是说i个台阶的方案数实际上就是第i-1个格子的方案数第i-2个格子的方案数…...
【树莓派学习】树莓派3B+的安装和环境配置
【树莓派学习】树莓派3B的安装和环境配置 文章目录 【树莓派学习】树莓派3B的安装和环境配置一、搭建Raspberry Pi树莓派运行环境1、下载树莓派镜像下载器2、配置wifi及ssh3、SSH访问树莓派1）命令行登录2）远程桌面登录3）VNC登录（推…...
算法题（83）：寄包柜
审题： 需要我们对模拟柜子的数组进行插入数据和打印数据的操作 思路： 首先我们观察题目，发现可以用一个数组表示一个柜子，而数组中每个索引的位置可以看成是一个个格子。但是柜子的数据量是1e5，且格子的数据量是1e5.如…...
深入浅出MySQL：概述与体系结构解析
目录 1. 初识MySQL 1.1. 数据库 1.1.1. OLTP（联机事务处理）1.1.2. OLAP（联机分析处理） 2. SQL 2.1. 定义2.2. DQL（数据查询语言）2.3. DML（数据操纵语言）2.4. DDL（数据定…...
tin这个单词怎么记
英语单词 tin，一般用作名词，意为“罐头；锡”： tin n.锡；罐头；罐；罐头盒；(盛涂料、胶水等的)马口铁罐，白铁桶；罐装物；金属食品盒；烘焙…...
【0005】Python变量详解
如果你觉得我的文章写的不错，请关注我哟，请点赞、评论，收藏此文章，谢谢！ 本文内容体系结构如下： 任何一个语言编写的程序或者项目，都需要数据的支持，没有数据的项目不能称之为一个…...
yolov8_pose模型,使用rknn在安卓RK3568上使用
最近在使用rknn的一些功能,看了看文档以及自己做的一些jni,使用上yolov8_pose的模型. 1.我们先下载一下rknn的模型功能代码,rk有自己做的一套demo 地址:GitHub - airockchip/rknn_model_zooContribute to airockchip/rknn_model_zoo development by creating an account on G…...
HTTP 协议的发展历程：从 HTTP/1.0 到 HTTP/2.0
HTTP 协议的发展历程：从 HTTP/1.0 到 HTTP/2.0 HTTP（HyperText Transfer Protocol，超文本传输协议）是 Web 的基础协议，用于客户端和服务器之间的通信。从 HTTP/1.0 到 HTTP/2.0，HTTP 协议经历了多次重大改…...
PartitionFinder2 安装与使用-bioinfomatics tools 051
1. 引言 PartitionFinder2 是目前针对大中型数据集（核苷酸、氨基酸、形态数据）最理想的分区检测和进化模型选择工具。其推演的最优进化模型结果与 jModelTest2（核苷酸）和 ProTest3（氨基酸）的结果较为接近。…...
MCP与RAG：增强大型语言模型的两种路径
引言 近年来，大型语言模型（LLM）在自然语言处理任务中展现了令人印象深刻的能力。然而，这些模型的局限性，如知识过时、生成幻觉（hallucination）等问题，促使研究人员开发了多种增强技…...
ARM 架构下 cache 一致性问题整理
本篇文章主要整理 ARM 架构下，和 Cache 一致性相关的一些知识。 本文假设读者具备一定的计算机体系结构和 Cache 相关基础知识，适合有相关背景的读者阅读 1、引言 简单介绍一下 Cache 和内存之间的关系 在使能 Cache 的情况下，CPU 每次获取数…...
GB28181未来发展趋势，如何借助于EasyGBS国标GB28181平台+EasyGBD国标GB28181设备端抓住大机会
GB28181规范目前已经迎来了2022版，随着规范行业影响力和应用范围越来越大，相信还会有类似2028、2030等迭代版本出来，我们预测的GB28181发展趋势可能会是以下几个方面，感兴趣的也可以跟我单独探讨： 技术标准持续优化&a…...
代数结构—笔记
线性空间 如果满足以下性质，则域 K K K上定义了二元运算（加法）与二元函数（数乘）的非空集合 X X X称为线性空间。 1、加法封闭性：对任意 u , v ∈ X u, v \in X u,v∈X，存在 u v ∈ X uv\in X …...
tcc编译器教程1 配置tcc编译器环境
TinyCC（又名TCC）是一款开源小型但超快速的C编译器。下面介绍在windows下使用 1软件下载 tcc编译器官网为 https://www.bellard.org/tcc/ 下载地址为 http://download.savannah.gnu.org/releases/tinycc/ 选择其中tcc-0.9.27-win64-bin.zip进行下载 htt…...
安全模块设计：token服务、校验注解（开启token校验、开启签名校验、允许处理API日志）、获取当前用户信息的辅助类
文章目录 引言pom.xmlI 校验注解ApiValidationII token服务TokenService获取当前用户信息的辅助类III 域登录接口响应数据登陆用户信息引言 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/PO…...
机器学习：线性回归，梯度下降,多元线性回归
线性回归模型 (Linear Regression Model) 梯度下降算法 (Gradient Descent Algorithm) 的数学公式 多元线性回归（Multiple Linear Regression）...
报错The default superclass, “jakarta.servlet.http.HttpServlet“（已经配置好tomcat）
报错报错DescriptionResourcePathLocationType The default superclass,“jakarta.servlet.http.HttpServlet”, according to the project’s Dynamic Web Module facet version (5.0), was not found on the Java Build Path. 解决办法： 根据错误信息࿰…...
【人工智能】数据挖掘与应用题库（1-100）
1、涉及变化快慢的问题可以考虑使用导数来分析。 答案:对 2、导数的几何意义是曲线在某点处切线的斜率。 答案:对 3、函数在某点的左导数存在，则导数就存在。 答案:错 4、关于梯度下降算法，下列说法错误的是（ ） 错误:梯度下降算法能找到函数精确的最小值。 5、正…...
的常用方式)
C#委托(delegate)的常用方式
C# 中委托的常用方式，包括委托的定义、实例化、不同的赋值方式以及匿名委托的使用。 委托的定义 // 委托的核心是跟委托的函数结构一样 public delegate string SayHello(string c);public delegate string SayHello(string c);：定义了一个公共委托类型 …...
【弹性计算】弹性裸金属服务器和神龙虚拟化（一）：功能特点
弹性裸金属服务器和神龙虚拟化（一）：功能特点 特征一：分钟级交付特征二：兼容 VPC、SLB、RDS 等云平台全业务特征三：兼容虚拟机镜像特征四：云盘启动和数据云盘动态热插拔特征五：虚拟机…...
小结：BGP 的自动聚合与手动聚合
BGP 的自动聚合与手动聚合 BGP 在大规模网络中，通常会进行路由聚合（Route Aggregation），即将多个更具体（更小）的路由前缀合并成一个更大（更粗略）的前缀，以减少 BGP 路由…...
CTF中pwn shellcode题目
CTF中pwn shellcode题目 下面是一些shellcode代码和绕过技巧。 一些只给payload或者exp一把梭 首先给出两个常用shellcode仓库，可以检索需要的shellcode shellcode databaseexploit-db 基础 基础shellcode shellcode asm(shellcraft.sh())生成指定函数 用法…...
Conda 环境搭建实战：从基础到进阶
在当今复杂多变的软件开发与数据科学领域，拥有一个稳定、可复现且易于管理的开发环境是项目成功的基石。Conda 作为一款强大的跨平台环境管理与包管理工具，为开发者提供了便捷高效的环境搭建与依赖管理解决方案。本文将深入探讨 Conda 环境搭建的实战技巧…...
深入解析：域名转换成 IP 地址的多种方式
深入解析：域名转换成 IP 地址的多种方式 在互联网的世界里，我们日常访问网站时输入的是易于记忆的域名，比如 “www.example.com”，但计算机之间通信实际上依靠的是 IP 地址。那么，域名是如何转换成 IP 地址的呢&#x…...