cesium(四)离线地图资源调研

编程语言 2025-04-09 17:19:24 阅读次数: 0

1 前置准备

1.1 数据格式

离线地图资源有两种格式，其中瓦片数据格式较为常用
在这里插入图片描述

1.1.1 瓦片数据格式

瓦片数据通常是以金字塔结构组织的，每个层级（zoom level）包含多个瓦片（tiles），每个瓦片通常是一个小的图像文件（如 PNG 或 JPEG）。TileMapServiceImageryProvider 用于加载这种结构的瓦片数据。
常见数据结构

./images/yhq/
├── 0/
│   └── 0/
│       └── 0.png
├── 1/
│   ├── 0/
│   │   ├── 0.png
│   │   └── 1.png
│   └── 1/
│       ├── 0.png
│       └── 1.png
├── 2/
│   ├── 0/
│   │   ├── 0.png
│   │   ├── 1.png
│   │   ├── 2.png
│   │   └── 3.png
│   ├── 1/
│   │   ├── 0.png
│   │   ├── 1.png
│   │   ├── 2.png
│   │   └── 3.png
│   ├── 2/
│   │   ├── 0.png
│   │   ├── 1.png
│   │   ├── 2.png
│   │   └── 3.png
│   └── 3/
│       ├── 0.png
│       ├── 1.png
│       ├── 2.png
│       └── 3.png
└── 3/
    ├── 0/
    │   ├── 0.png
    │   ├── 1.png
    │   ├── 2.png
    │   └── 3.png
    ├── 1/
    │   ├── 0.png
    │   ├── 1.png
    │   ├── 2.png
    │   └── 3.png
    ├── 2/
    │   ├── 0.png
    │   ├── 1.png
    │   ├── 2.png
    │   └── 3.png
    └── 3/
        ├── 0.png
        ├── 1.png
        ├── 2.png
        └── 3.png

如何使用

try {
    
    
  const imageryProvider = new Cesium.TileMapServiceImageryProvider({
    
    
    url: './images/yhq',//你下载的瓦片数据相对地址
  });
  viewer.value.imageryLayers.addImageryProvider(imageryProvider);
} catch (error) {
    
    
  console.error('Error loading imagery provider:', error);
}

1.2 软件准备

下载下来的数据资源想要应用，需要经过一系列处理，下面介绍三个较为常用的数据处理软件

1.2.1 cesiumlab

可以将栅格数据转瓦片
去cesiumlab官网下载软件，按照引导程序自行下载即可
解析数据需要授权，需要登录后台https://account.bjxbsj.cn/login.html，进行个人身份认证

1.2.2 SNAP

数据预处理的一个工具
SNAP DOWNLOAD

1.2.3 ENVI

将影响数据进行波段融合
ENVI安装教程
 ENVI APP STORE 安装及使用教程

2 Sentinel-2影像数据

2.1 数据下载

可以去欧空局官网下载Sentinel2数据
在这里插入图片描述
下载完后得到如下文件

2.2 数据预处理

2.2.1 使用SNAP数据预处理

刚下载的数据进行处理
在这里插入图片描述
选择处理后的文件存储位置

取消对号，点击run

可以看到产生了一个新文件

将新文件导出

选择一个文件位置导出

导出后的文件

2.2.2 ENVI进行波段融合

①导入经过SNAP预处理后的Sentinel-2 L2A数据。
②选择合适的波段组合，如B4（红）、B3（绿）、B2（蓝）进行真彩色合成；或者使用B8（近红外）、B4（红）、B3（绿）进行假彩色合成，以突出显示植被覆盖。
③如果需要更复杂的图像融合，如PCA变换、Brovey变换等，也可以在ENVI中完成

file->open->选中需要融合的波段（我这里是把所有波段都选中了）->打开
在这里插入图片描述

加载完成后（如右图），是一个黑白的影像
在这里插入图片描述
右侧工具栏输入layer搜索工具

双击Build Layer Stack–>点击borwse–>select all–>OK

给定一个输出位置–>ok

得到如下三个文件

打开这三个文件–>右键–>Export Layer to TIFF

2.2.3 cessiumlab解析为瓦片数据

在这里插入图片描述
处理后的文件

2.3 数据应用

var localImage = viewer.scene.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
    
    
      url: './images/s22/{z}/{x}/{y}.png',//文件位置位于public目录下
      fileExtension: "png",
      maximumLevel: 13,
    })
  );

渲染效果还是不错的，虽然不如在线地图
在这里插入图片描述
看看和在线地图的对比

在线地图和离线地图清晰度差不错，就是颜色不太对劲(左边是在线地图，右边是离线地图)

3 地理空间数据云

地理空间数据云官网提供了大量的免费公开数据，包含以下数据
在这里插入图片描述

3.1 DEM数字高程数据

3.1.1 下载数据

在这里插入图片描述
将下载后的文件分别解压缩，每个文件里均有两个tif文件

3.1.2 解析数据

打开cesiumlab软件，解析地形资源
在这里插入图片描述
开始解析数据

3.1.3 应用数据

地形解析后，添加到项目中
在这里插入图片描述

// 组件挂载后执行的代码
onMounted(async() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //只加载广州的地形数据
    terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl('./terrains/gz', {
    
    
      requestVertexNormals: true,//添加光照效果
      requestWaterMask: true,//添加水纹效果
    }),
  });

});

成功渲染后，会发现只有广州的山脉有了起伏，其余地方还是平平的
在这里插入图片描述

3.2 Landsat系列

3.2.1 下载数据

这个系列最新的是Landsat8-9
在这里插入图片描述

3.2.2 解析数据

其实我按照解析Sentinel-2的方式操作了一遍，发现解析出来的效果特别差
像这样在这里插入图片描述

或者像这样
在这里插入图片描述
效果很差，所以，小伙伴们再搜搜别的资料吧

3.2.3 应用数据

使用XYZ模板

var localImage = viewer.scene.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
    
    
      url: './images/yhq/{z}/{x}/{y}.png',
      fileExtension: "png",
      maximumLevel: 13,
    })
  )

4 水经注

水经注说免费分享一个省的数据，但其实分享的数据格式是他们自定义的，只能在他们的软件中打开，等你下载了他们的软件后，如果转换成通用的格式导出，需要交钱！！！

4.1 下载数据

【1】下载影像数据
①关注水经注GIS公众号，回复免费数据
②添加公众号回复的企业群聊
③在群聊发一句话，等待专人加你
④向专人要网盘链接，他会让你注册，你先注册好，并把手机号发给他就可以了
吉林243GB 链接：https://pan.baidu.com/s/1ZTXzLsLhERcYUD00wEp1IA
提取码：1ujb