【Cesium教程第三章数据加载之影像加载】

最新推荐文章于 2025-03-26 16:53:55 发布
最新推荐文章于 2025-03-26 16:53:55 发布
阅读量1k 收藏 10
点赞数 13
分类专栏： web可视化开发 文章标签： 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43956070/article/details/143845745
版权

     Cesium中数据加载包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等，ESRL、超图、中地数码等大型 GIS 厂商提供的自定义格式的 GIS数据，以及 GeoJSON、TIFF、SHP、KML、点云、三维模型等各种格式的 GIS 数据。

3.1 影像加载

       Cesium提供了ImageryLayerCollection类、ImageryLayer 类及相关的ImageryProvider 类来加载不同的影像图层。ImageryLayer 类用于承载 Cesium 中的影像图层，并利用 ImageryProvider 类为其提供的丰富的数据源在场景中进行展示。而ImageryProvider类及其子类封装了加载各种网络影像图层的接口，可以用于加载 Bing 地图、天地图、ArcGIS 在线地图、高德地图、OSM 影像MapBox影像等数据源。

  3.1.1 加载Bing 地图

       Cesium 提供了 BingMapsImageryProvider 类来加载 Bing地图，并且默认加载了微软公司的 Bing 地图。也就是说,在创建 Vewer 时，如果不指定ImageryProvider 类,就默认加载 Bing地图。
在加载 Bing地图时，需要申请 Bing地图密钥或者申请Cesium的token，否则可能会出现加载完成后没有地图出现的情况。以申请Cesium的 token 为例，首先进入 Cesium ion 官网在注册并登录后，申请 token，如下图所示。

Bing Map申请key值页面（Redirecting）

​

 Cesium ion 官网注册登录页面（Cesium ion）​

Cesium ion 官网tocken申请页面

     在创建 Viewer 之前，添加一行代码“Cesium.Ion,defaultAccessToken='你的 token'”，即可默认加载 Bing 地图。加载 Bing 地图的效果如下图所示：

    <div id="cesiumContainer"></div>
    <script type="module">

        Cesium.Ion.defaultAccessToken = '你的token';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: false,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: true,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false
            //是否显示全屏按钮工具
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });

bingMap加载关键代码

​

默认加载bingmap地图

  3.1.2 加载天地图

    天地图地图服务支持HTTP和HTTPS协议。天地图地图服务采用OGC WMTS标准，具体使用方法请参考OGC WMTS标准 中GetCapabilities 和GetTile。天地图地图服务对所有用户开放。使用本组服务之前，需要申请Key。Cesium 提供了WebMapTileServicelmageryProvider 类来调用天地图的地图服务。天地图Web服务API为用户提供HTTP/HTTPS接口，即开发者可以通过这些接口使用各类型的地理信息数据服务，可以基于此开发跨平台的地理信息应用Web服务API对所有用户开放。在天地图官网中，可以査看矢量底图、矢量注记、影像底图、影像注记、地形渲染等多种地图的服务地址，

 Cesium.Ion.defaultAccessToken = 'cesium的token';
        const KEY = "天地图的key"
        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: true,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false,
               imageryLayers: new Cesium.WebMapTileServiceImageryProvider({
               url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + KEY,
               layer: "tdtVecBasicLayer",
               style: "default",
               format: "image/jpeg",
               tileMatrixSetID: "GoogleMapsCompatible"
          })
        });

  Cesium.Ion.defaultAccessToken = 'cesium的token';
        const KEY = "天地图的key"
        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: true,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false,
        });
        //矢量底图
        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + KEY,
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible"
        }));
        //矢量注记
        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + KEY,
            layer: "tdtAnnoLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible"
        }));
        //影像底图
        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + KEY,
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible"
        }));
        //影像注记
        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&tk=" + KEY,
            layer: "tdtAnnoLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible"
        }));

3.1.3 加载ArcG在线地图

        Cesium 提供了ArcGisMapServerlmageryProvider 类来通过 ArcGIS Server REST API 访问
在 ArcGIS MapServer平台上的地图瓦片。在创建 Viewer 时，imageryLayers 配置项通过 ArcGisMapServerlmageryProvider 类传入ArCGIS在线地图URL来访问托管在AreGlS MapServer上的地图瓦片。加载效果如下：

Cesium.Ion.defaultAccessToken = 'cesium的token';
        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: true,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false,
            //ArcGIS在线地图
            imageryLayers: new Cesium.ArcGisMapServerImageryProvider({
                //加载ArcGIS 在线地图
                url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            })
            
        });

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <title>cesium教程第三章数据加载</title>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">

        Cesium.Ion.defaultAccessToken = 'cesium的token';
        const KEY = "天地图的key"
        const viewer = new Cesium.Viewer('cesiumContainer', {
            geocoder: true,
            homeButton: false,
            //是否显示首页位置工具
            sceneModePicker: true,
            //是否显示视角模式切换工具//是否显示默认图层选择工具//是否显示导航帮助工具
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            //是否显示动画工具
            timeline: false,
            //是否显示时间轴工具
            fullscreenButton: false,
            //ArcGIS在线地图
            imageryLayers: new Cesium.ArcGisMapServerImageryProvider({
                //加载ArcGIS 在线地图
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            })
            //天地图
            //     imageryLayers: new Cesium.WebMapTileServiceImageryProvider({
            //     url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + KEY,
            //     layer: "tdtVecBasicLayer",
            //     style: "default",
            //     format: "image/jpeg",
            //     tileMatrixSetID: "GoogleMapsCompatible"
            // })
        });
        // //矢量底图
        // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        //     url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + KEY,
        //     layer: "tdtVecBasicLayer",
        //     style: "default",
        //     format: "image/jpeg",
        //     tileMatrixSetID: "GoogleMapsCompatible"
        // }));
        // //矢量注记
        // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        //     url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + KEY,
        //     layer: "tdtAnnoLayer",
        //     style: "default",
        //     format: "image/jpeg",
        //     tileMatrixSetID: "GoogleMapsCompatible"
        // }));
        // //影像底图
        // viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        //     url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + KEY,
        //     layer: "tdtBasicLayer",
        //     style: "default",
        //     format: "image/jpeg",
        //     tileMatrixSetID: "GoogleMapsCompatible"
        // }));
        // //影像注记
        // 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&tk=" + KEY,
        //     layer: "tdtAnnoLayer",
        //     style: "default",
        //     format: "image/jpeg",
        //     tileMatrixSetID: "GoogleMapsCompatible"
        // }));


        // viewer.camera.flyTo({
        //     destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
        //     orientation: {
        //         heading: Cesium.Math.toRadians(0.0),
        //         pitch: Cesium.Math.toRadians(-15.0),
        //     }
        // });

        // Add Cesium OSM Buildings, a global 3D buildings layer.
        const buildingTileset = await Cesium.createOsmBuildingsAsync();
        viewer.scene.primitives.add(buildingTileset);   
    </script>
    </div>
</body>

</html>

Cesium 展示——影像图层加载
虎康的博客
10-18 934
要在Cesium中支持数字高程数据（DEM）的渲染和管理，可以使用Cesium的TerrainProvider和TerrainLayer类。
Cesium加载影像、谷歌影像、地形图
热门推荐
GIS_yuhua的博客
05-02 1万+
一、Cesium默认加载影像 <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); </script> 默认加载的影像带版权信息，若要去除，可在sty...
iClient3D for Cesium 加载shp数据并拉伸为白模
SuperMap技术控
12-25 1334
shp数据常常出现于桌面端直接交换数据，而在前端则很少使用，本文将介绍如何利用Shapefile.js 三方库在 iClient3D for Cesium 中加载 SHP 数据，并将其转化为三维“白模”样式。
Cesium快速入门-数据加载
最新发布
qq_55541095的博客
03-26 931
上一章学习完了cesium入门的基础，成功在浏览器中显示出了一个地球，这一章开始，我们将学习如何将图层数据加载到地球之上。本章学习了如何加载cesium影像和地形。
Cesium 加载影像数据
FOR.GET
08-17 4336
一、Django环境准备 # 首先创建一个Django项目，命名随意，配置好静态文件和媒体文件即可 django-admin startprroject name # 创建一个名为name的项目 # 创建一个名为 appname 的应用，需要cd 进入项目所在文件夹，并确认有 manage.py python manage.py startapp appname """ 配置静态和媒体文件 settings.py 中添加 """ # 静态文件主要存放 CSS、JS、图片等 STATIC_URL = '/
cesium添加极地影像（三维渲染）
weixin_52621959的博客
03-25 1563
本文介绍了在cesium中加载渲染极地遥感影像的一般流程和具体实操方式
Cesium 加载地图信息
qq_17627195的博客
10-22 1997
Cesium中提供了多种ImageryProvider方式，来满足用户的实际需求。 Cesium中BaseLayerPicker控件提供了各类地图影像服务，但是有时候我们要引入自己的地图信息。 Cesium 查询文档：https://cesium.com/docs/cesiumjs-ref-doc/ Cesium目前支持的影像服务类型有： ArcGisMapServerImageryProvider 支持ArcGIS Online和Server的相关服务 Cesium提供了ArcGisMapServer
Cesium入门之六：Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)
九仞山的专栏
05-14 1万+
详细介绍了Cesium加载影像图层的类、方法和步骤，举例说明加载ArcGIS地图、Bing地图、Mapbox地图、高德地图、腾讯地图、天地图等各类影像图的加载方法
Cesium加载影像图
可欺之以方的博客
08-22 3555
由于bing地图很多时候无法再入所以在加载影像图时我采用了esri公司的在线影像图，代码如下： var viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider : new Cesium.ArcGisMapServerImageryProvider({ url : '//servi...
Cesium数据加载
【cacrle】的博客
01-25 2866
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结，介绍Cesium相关数据加载操作，数据包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等，ESRI、超图、中地数码等大型GIS厂
Cesium加载自定义影像数据
Scrow1204的博客
05-12 8349
一、创建服务器 1、上面的方法用的是Express框架自己写的服务器，现在发现安装http-server可以直接通过简单指令创建服务器，我们可以先全局安装 npm install http-server -g 2、然后通过以下指令创建监听4400端口的服务器，http-server可以简写成hs http-server -p 端口号（4400） 二、加载数据 1、因为有些数据不能直接访问，会被...
Cesium加载OSGB倾斜摄影数据Demo
06-01
Cesium加载OSGB倾斜摄影数据Demo，内附由OSGB倾斜摄影数据转换的Cesium3DTile数据，可直接运行。另：原始的OSGB倾斜摄影数据以及转换工具也可以由本人提供的资源进行下载。
cesium 可加载的倾斜摄影数据
01-10
cesium 可加载的倾斜摄影数据
cesium实现底图和地形动态切换及supermap三维服务加载（官网demo）
08-22
function1：cesium实现天地图影像、矢量动态切换；function2：实现supermap三维地形服务动态加载及卸载；function3：实现supermap倾斜摄像服务动态加载
cesium加载mvt 矢量瓦片
03-06
在Cesium中加载MVT矢量瓦片，通常需要借助于第三方库如`@deck.gl/geo-layers`或`Cesium-GeoJsonDataSource`。首先，你需要将MVT数据转换为Cesium可以理解的格式，然后将其添加到场景中。过程大致如下： 1. 引入相关...
054：cesium加载WMS规范的影像服务
大剑师兰特的GIS世界
04-26 895
第054个本示例的目的是介绍如何在vue+cesium中加载WMS规范的影像服务。WebMapServiceImageryProvider提供由 Web 地图服务 (WMS) 服务器托管的平铺图像。
Cesium加载影像
weixin_30338497的博客
12-02 413
注意：使用自定义数据源时，Cesium.Viewer类参数必须设置为baseLayerPicker:false A. 使用天地图数据源//天地图var provider=new Cesium.WebMapTileServiceImageryProvider({ url : 'http://t0.tianditu.com/img_w/wmts?', layer:'img', st...
Cesium加载影像地图
zhishiqu的博客
06-13 6842
cesium加载各种地图影像
cesium学习记录05-加载数据（矢量、影像、地形、3D模型）
木卯彳亍的博客
08-10 6151
一个基于JSON的地理数据格式，Cesium支持GeoJSON的直接加载。KML (keyhole markup language)是以XML语言为基础开发的一种文件格式，用来描述和存储地理信息数据（点、线、面、图片等），是纯粹的xml文本格式， KMZ是Google Earth默认的输出文件格式，是一个经过ZIP格式压缩过的KML文件。/*** 添加卫星轨迹czml数据*/.add(Cesium.CzmlDataSource.load("../static/卫星轨迹.czml"))},
超图cesium 加载影像
03-04
### 如何在 Cesium 中加载影像数据 为了在 Cesium 中加载影像数据，通常会使用 `Cesium.ImageryLayer` 或者直接利用 `Cesium.TerrainProvider` 和其他相关类来增强地形和影像显示的效果。具体来说，在超图环境下操作时，可以遵循特定的配置流程。 对于超图环境中的 Cesium 应用开发而言，初始化阶段需按照既定的方式引入必要的资源文件[^1]。完成基本设置之后，可以通过如下方法加载影像： #### 使用 ImageryProvider 加载影像层 ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 定义影像提供者并创建新的影像层实例 var imageryLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({ url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' }), {}); // 将新定义好的影像层添加至场景中现有的影像图层集合里 viewer.imageryLayers.add(imageryLayer); ``` 上述代码片段展示了如何通过 URL 模板指定在线瓦片服务地址从而加载全球范围内的卫星图像作为底图展示的一部分。当然也可以替换为本地或其他第三方的地图服务链接以满足不同需求。 当涉及到更复杂的交互逻辑比如移动过程中遇到障碍物处理等问题，则可能需要用到额外的功能模块如 ray 射线来进行碰撞检测等功能扩展[^2]。 #### 配置与优化建议 - **性能考量**：考虑到网络延迟等因素影响用户体验，推荐预先缓存部分常用区域的数据；同时合理调整请求频率避免过度消耗服务器资源。 - **安全性保障**：确保所使用的地图源合法合规，并注意保护用户隐私不泄露敏感位置信息给外部接口调用方。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值