Cesium加载局部地区单张图片底图

最新推荐文章于 2025-05-29 20:30:18 发布
最新推荐文章于 2025-05-29 20:30:18 发布
阅读量9.2k 收藏 14
点赞数
CC 4.0 BY-SA版权
分类专栏： Cesium 文章标签： Cesium 图片地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wo_buzhidao/article/details/84141513
本文介绍如何使用Cesium JavaScript库加载并定制特定区域的地图，包括设置地图样式、禁用部分控件、加载自定义底图及中文注记服务，实现对指定地理范围的精确展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>局部地图区域</title>
		<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
		<script src="../Build/Cesium.js"></script>
	</head>
	<body style="overflow: hidden;height: 95%;">
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
	  	var viewer = new Cesium.Viewer('cesiumContainer',{ 
   		//需要进行可视化的数据源的集合
	             animation: false, //是否显示动画控件
	            shouldAnimate : true,
	            homeButton: false, //是否显示Home按钮
	            fullscreenButton: false, //是否显示全屏按钮
	            baseLayerPicker: false, //是否显示图层选择控件
	            geocoder: false, //是否显示地名查找控件
	            timeline: false, //是否显示时间线控件
	            sceneModePicker: false, //是否显示投影方式控件
	            navigationHelpButton: false, //是否显示帮助信息控件
	            infoBox: false, //是否显示点击要素之后显示的信息
	            requestRenderMode: true, //启用请求渲染模式
	            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
	            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
	            fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
	           imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
			          url: 'http://t0.tianditu.com/img_w/wmts?',
			          layer: 'img',
			          style: 'default',
			          format: 'tiles',
			          tileMatrixSetID: 'w',
			          credit: new Cesium.Credit('天地图全球影像服务'),
			      
			    })
		});
	
		  //全球影像中文注记服务
	    	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
		    layer: "tdtAnnoLayer",
		    style: "default",
		    format: "image/jpeg",
		    tileMatrixSetID: "GoogleMapsCompatible",
		    maximumLevel: 13,
			minimumLevel: 1,
		    show: false
		}));
		//左下角坐标，右上角坐标
		var rectangle=Cesium.Rectangle.fromDegrees(112.2588781098,39.5047262435,112.2981585251,39.5233702752);
		viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
			url:"../images/label/2.png",
			rectangle: rectangle
		}))
		var layers = viewer.imageryLayers;  
		viewer._cesiumWidget._creditContainer.style.display="none";
		viewer.camera.setView({
			destination: Cesium.Rectangle.fromDegrees(112.2770508586,39.5050978677,112.2776657605,39.5193995362) //定位坐标点，建议使用谷歌地球坐标位置无偏差
		});
		</script>
</html>

在这里插入图片描述

003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 2408
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
cesium加载gif图片（cesium篇.43）
地图之家
09-10 3513
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <li
Cesium 8 ，在 Cesium 上实现雷达动画和车辆动画效果，并控制显示和隐藏
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
05-29 1566
⭐在《Cesium 7，在 Cesium 上实现高速道路渲染》中，我们完成了高速道路的三维建模与场景搭建。本文作为续篇，将聚焦于动态元素与交互逻辑的开发，在已构建的道路场景中叠加雷达动画与车辆模型，实现 “静态场景 + 动态实体” 的完整可视化方案。通过本文分享，你将学会如何在 Cesium 道路场景中集成动态交互元素，并掌握坐标转换、动画控制与状态管理的核心技术。
cesium 加载单张图作为地图
半路转行的Giser
07-23 1495
cesium提供的 SingleTileImageryProvider类，可以加载单张图片为影像服务。
Cesium|xt3d加载本地单张图片
xt3d的博客
08-22 840
Cesium|xt3d加载本地单张图片效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cesium|xt3d</title>
cesium 使用一张图片作为背景影像底图
AllBluefm的专栏
04-08 1353
cesium加载影像地图的时候，可以添加一张图片作为影像图片，避免一开始加载的时候地图上出现缺瓦片而不美观的情况。
65.（cesium篇）cesium单个地图图片
GIS之家家长
04-08 496
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
43.（cesium篇）cesium加载gif图片.zip
06-09
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“43.（cesium篇）cesium加载gif图片”。如下载有问题，可联系博主。 解压密码：cesium
使用cesium创建Geometry并加载图片作为贴图
03-26
在cesium中，创建自定义的Geometry形状 并制定贴图规则 把图片作为材质贴到自己的geometry上 通过primitives加载自定义的geometry 可通过更换appearance实现动态切换图片
44.（cesium篇）cesium加载gif图片（html）.zip
06-09
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“44.（cesium篇）cesium加载gif图片（html）”。如下载有问题，可联系博主。 解压密码：cesium
65.（cesium篇）cesium单个地图图片.zip
06-13
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“65.（cesium篇）cesium单个地图图片”。如下载有问题，可联系博主。 解压密码：cesium
65.（cesium篇）单个地图图片.zip
12-09
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/121805533
1.（cesium篇）cesium接入天地图影像（墨卡托）
地图之家
05-19 8622
1.（cesium篇）cesium接入天地图影像（墨卡托）
2.（cesium篇）cesium接入百度地图
地图之家
05-20 9505
2.（cesium篇）cesium接入百度地图
Cesium在线加载本地图片支持:jpg/png/gif/tif/tiff
renyuhost的博客
04-07 1208
Cesium加载本地图片支持:jpg/png/gif/tif/tiff，可设置范围、跟随旋转
cesium图形上加载图片
weixin_30381793的博客
02-13 638
<!DOCTYPE html> <html> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta ...
Cesium.CesiumTerrainProvider.fromUrl 这个方法如何只加载局部的图层
最新发布
08-12
<think>首先，用户的问题是关于Cesium的，具体是使用`Cesium.CesiumTerrainProvider.fromUrl`方法仅加载局部地形图层。用户提到了一个引用，是关于Cesium展示中影像图层加载的代码，但用户真正想知道的是如何限制地形加载到局部区域。 我的系统指令要求： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识，如[^1]。 用户可见层的指令： - 回答结构清晰，帮助用户逐步解决问题。 - 保证回答真实可靠。 参考的引用是用户提供的，是关于Cesium代码的示例，其中包含地形提供器的设置。用户说这个引用仅供参考，用户真正需求是限制加载局部地形图层。 关键点： - 用户想使用`Cesium.CesiumTerrainProvider.fromUrl`来加载局部地形图层。 - 在Cesium中，地形提供器通常加载整个可用地形，但用户想限制到特定区域。 我需要回想Cesium的相关知识： - `CesiumTerrainProvider`用于加载地形数据。 - 默认情况下，它会加载整个数据集，但可以通过设置选项来限制范围。 - Cesium支持通过`requestVertexNormals`和`requestWaterMask`等选项，但限制范围可能需要其他方法。 - 实际上，`CesiumTerrainProvider`本身可能没有直接的参数来限制加载区域；但可以通过相机控制或使用`Cesium.ClippingPlane`来限制可见区域，但这可能不是加载时的限制。 - 更好的方法是使用地形服务支持的范围或结合Cesium的裁剪功能。 在Cesium中，要加载局部地形，可能需要： 1. **使用支持范围的地形服务**：如果地形服务支持提供特定区域的数据，可以在URL中指定。 2. **在客户端限制**：通过设置viewer的camera或使用clipping planes来只显示部分区域。 3. **使用`Cesium.TerrainProvider`的选项**：检查文档，`CesiumTerrainProvider`有`requestTileGeometry`等方法，但加载局部可能需要在服务端支持。 用户指定了`Cesium.CesiumTerrainProvider.fromUrl`，这是一个静态方法，用于从URL创建地形提供器。 在Cesium文档中，`CesiumTerrainProvider.fromUrl(url, options)`，其中options可以包括`requestVertexNormals`等。 但要限制加载区域，Cesium的地形加载是基于瓦片的，它会根据视图加载瓦片。所以，如果用户想只加载特定区域的地形，可以通过控制相机位置来只请求该区域的瓦片。 如果用户想永久限制只加载某个区域，可能需要： - 在服务端配置地形服务只提供该区域的数据。 - 或者在客户端使用`Cesium.Rectangle`来定义范围，但地形提供器本身可能不支持直接设置范围。 回想一下，Cesium的`CesiumTerrainProvider`没有直接的选项来设置加载范围。加载是基于当前视图的。 一个常见的方法是使用`Cesium.Viewer`的`terrainProvider`设置，并结合相机控制。 但用户可能想减少数据加载量或只显示局部地形。 在引用中，用户提供了代码： ```javascript terrainProvider: new Cesium.CesiumTerrainProvider({ url: 'http://localhost:9001/' }) ``` 用户想用`fromUrl`方法，所以应该是`Cesium.CesiumTerrainProvider.fromUrl('http://localhost:9001/')`。 要限制局部加载，我建议： - 确保地形服务只提供该区域的数据（服务端配置）。 - 或者，在客户端，使用`Cesium.OrthographicFrustum`或设置相机位置来只查看该区域，从而只加载该区域瓦片。 Cesium支持地形裁剪，通过`Cesium.ClippingPlaneCollection`，但这通常用于3D Tiles，不是直接用于地形提供器。 最佳实践： 1. **服务端限制**：配置地形切片服务（如Cesium ion或自定义服务）只生成和提供特定区域的瓦片。 2. **客户端视图控制**：设置viewer的初始视图到该区域，这样Cesium只加载该区域的瓦片。 3. **使用范围选项**：如果地形服务支持，可以在URL中添加查询参数来指定范围。 在`CesiumTerrainProvider`中，没有内置的范围限制选项。加载是基于瓦片金字塔的，根据视图需求加载。 所以，在回答中，我应该解释： - `CesiumTerrainProvider.fromUrl`用于创建地形提供器。 - 要加载局部地形，需要通过控制视图或服务端配置来实现。 - 提供代码示例。 结构清晰： 1. 解释问题。 2. 提供解决方案。 3. 给出代码示例。 4. 生成相关问题。 使用中文回答。 引用部分：用户提供的引用[^1]是关于OpenStreetMap的，不直接相关，但用户提到它仅供参考。我应该基于Cesium文档或知识回答。 最后，生成相关问题。 回答大纲： 1. **介绍**：简要解释`Cesium.CesiumTerrainProvider.fromUrl`方法。 2. **问题分析**：说明为什么需要限制加载局部地形。 3. **解决方案**： - 方法1：服务端配置地形服务。 - 方法2：客户端视图控制。 - 方法3：使用裁剪平面（如果适用）。 4. **代码示例**：展示如何使用`fromUrl`并设置初始视图。 5. **注意事项**：提醒服务端支持的重要性。 6. **相关问题**：生成几个相关问题。 确保LaTeX格式：由于问题不涉及数学，可能不需要数学表达式，但如果有公式，要用$...$或$$...$$。 在回答末尾添加引用标识，如果引用用户提供的部分。 用户说引用仅供参考，不是真正需求，所以我可以不直接引用它，但如果有相关，可以提及。 最终回答用中文。</think>### Cesium中使用`Cesium.CesiumTerrainProvider.fromUrl`限制加载局部地形图层 在Cesium中，`Cesium.CesiumTerrainProvider.fromUrl` 是一个静态方法，用于从指定的URL创建地形提供器（Terrain Provider），加载地形数据如高程信息。默认情况下，该方法会加载整个可用地形数据集，但用户可能需要仅加载局部区域的地形（例如，减少网络负载或聚焦特定区域）。Cesium的地形加载基于瓦片（tile）机制，其范围控制主要通过**客户端视图配置**或**服务端数据裁剪**实现，因为`CesiumTerrainProvider`本身没有直接参数限制加载范围。以下我将逐步解释如何实现局部地形加载，确保回答基于Cesium官方文档和最佳实践[^1]。 --- ### 步骤1: 理解`Cesium.CesiumTerrainProvider.fromUrl`方法 `Cesium.CesiumTerrainProvider.fromUrl(url, options)` 用于创建地形提供器： - `url`：地形服务的基地址（如`http://localhost:9001/`）。 - `options`：可选参数，例如： - `requestVertexNormals`：是否请求顶点法线（用于光照效果）。 - `requestWaterMask`：是否请求水面掩码（用于海洋效果）。 但**没有内置选项直接限制地理范围**。地形瓦片根据当前视图动态加载，因此限制局部区域需间接控制。 关键点： - 地形加载是“按需”的：Cesium 仅加载相机视锥体（frustum）内的瓦片。 - 要限制到局部区域，需结合相机设置或服务端支持。 --- ### 步骤2: 实现局部地形加载的解决方案 以下是两种可靠方法，优先推荐方法1（客户端视图控制），因其简单且无需修改服务端。 #### 方法1: 客户端视图控制（推荐） 通过设置`Viewer`的初始相机位置和视口范围，强制Cesium只加载指定矩形区域的地形瓦片。使用`Cesium.Rectangle`定义地理边界（经度、纬度范围）。 **代码示例**： ```javascript // 创建Viewer并指定地形提供器 const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.CesiumTerrainProvider.fromUrl('http://localhost:9001/', { requestVertexNormals: true // 可选：启用高级效果 }), baseLayerPicker: false // 简化示例 }); // 定义局部区域（例如：北京范围，经度116.2°-116.6°，纬度39.8°-40.2°） const rectangle = Cesium.Rectangle.fromDegrees(116.2, 39.8, 116.6, 40.2); // 设置相机初始位置和视图范围 viewer.camera.setView({ destination: rectangle, orientation: { heading: Cesium.Math.toRadians(0), // 正北方向 pitch: Cesium.Math.toRadians(-30), // 俯视角 roll: 0 } }); // 可选：限制相机移动范围，确保只加载局部地形 viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; // 防止相机飞出地形 viewer.scene.camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z; // 限制垂直移动 viewer.scene.camera.flyTo({ destination: rectangle, complete: function() { viewer.scene.camera.constrainedAxis = undefined; // 完成时解除限制 } }); ``` **原理**： - `setView` 或 `flyTo` 设置初始视图到矩形区域，Cesium只加载该区域的瓦片。 - 相机约束防止用户导航到区域外，减少不必要的数据加载。 - 优点：无需修改地形服务，纯客户端实现。 #### 方法2: 服务端数据裁剪（高级） 如果地形服务支持（如Cesium ion或自定义TMS服务），在服务端配置只生成和提供特定区域的瓦片数据。然后在客户端使用相同的`fromUrl`方法，但URL指向裁剪后的服务。 **实现步骤**： 1. **服务端配置**： - 使用工具如[Cesium Terrain Builder](https://github.com/geo-data/cesium-terrain-builder) 或 Cesium Lab，在生成地形瓦片时指定矩形范围（例如通过`--bounds`参数）。 - 示例命令：生成仅限北京市的地形瓦片。 ```bash ctb-tile -o ./terrain -b 116.2 39.8 116.6 40.2 input.tif ``` - 部署服务时，确保URL仅提供该区域数据（如`http://localhost:9001/beijing-terrain/`）。 2. **客户端代码**： ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.CesiumTerrainProvider.fromUrl('http://localhost:9001/beijing-terrain/') }); ``` **原理**： - 服务端只返回局部瓦片，客户端自动加载。 - 优点：减少网络传输量，适合大型项目。 - 缺点：需服务端支持，部署复杂。 --- ### 注意事项 1. **性能影响**：局部加载可提升性能，但需确保地形服务支持HTTP Range请求（Cesium默认使用quantized-mesh格式）。 2. **错误处理**：添加错误监听，避免无效URL或服务不可用： ```javascript Cesium.CesiumTerrainProvider.fromUrl('http://localhost:9001/') .then(provider => { viewer.terrainProvider = provider; }) .catch(error => { console.error('地形加载失败:', error); }); ``` 3. **备选方案**：如果需更精细控制（如动态裁剪），可结合`Cesium.ClippingPlane`（用于3D Tiles），但地形提供器不直接支持此功能[^1]。 --- ### 相关问题
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值