render-gis-resource

v1.0.0

Published

a year ago

```js Cesium.TiandituImageryProvider ``` **Cesium.TiandituImageryProvider** 是 Cesium 专门为加载天地图服务提供的图层加载器，方便用户直接使用天地图提供的影像、矢量、标注等服务，而无需手动设置复杂的参数。 <table> <tr> <th>资源类型</th> <th>参数</th> <th>投影类型</th> </tr> <tr> <td rowspan=

0High
0Medium
0Low

coyle13

一. 影像(包括中文标注)

1.1 天地图影像和注记

Cesium.TiandituImageryProvider

Cesium.TiandituImageryProvider 是 Cesium 专门为加载天地图服务提供的图层加载器，方便用户直接使用天地图提供的影像、矢量、标注等服务，而无需手动设置复杂的参数。

以上表格资源参考：天地图官网地图API

1.1.1 什么是投影类型？

投影类型是指将地球的球面或椭球面坐标系（经纬度）转换到平面地图上所使用的数学方法。由于地球是一个接近球体的形状，而地图是平面，投影不可避免地会导致变形（如形状、面积、方向、距离的变化）。投影类型通过不同的方式最小化这些变形，以适应特定应用场景的需要。

1.1.2 常见投影类型及特点

(1) 经纬度投影（EPSG:4326 或 WGS84）

描述：是一种简单的投影方式，也称为地理坐标系。直接使用经度和纬度作为平面坐标。特点：不是真正的投影（因为没有将球面展开到平面）。常用于全球范围数据的存储和交换。适合查看大范围数据，但会在平面地图上产生显著的形状失真。 坐标范围：经度 [-180°, 180°]，纬度 [-90°, 90°]。

(2) 墨卡托投影（Web Mercator，EPSG:3857）

描述：是一种常见的正轴圆柱投影，广泛用于在线地图服务（如天地图、Google Maps、Bing Maps）。特点：在赤道附近较为准确，越靠近两极，变形越严重（两极无法表示）。保证了方向的准确性，因此适合用于导航和路径计算。对面积失真较大，尤其在高纬度地区。 坐标范围： X: [-20037508.342789244, 20037508.342789244] 米 Y: [-20037508.342789244, 20037508.342789244] 米

1.1.3 Web墨卡托投影和球面墨卡托投影有何区别？

本质：Web墨卡托投影和球面墨卡托投影是相同的，都是基于球面模型的墨卡托投影，只是 Web墨卡托是球面墨卡托投影的一种标准化、优化版本，特别适用于 Web 地图应用。

区别：Web墨卡托投影为适应 Web 地图服务的需要，限制了纬度范围并标准化了坐标系，优化了高效渲染和加载速度，尤其适用于显示大范围的低纬度地区地图。

因此，Web墨卡托投影实际上是球面墨卡托投影的一种专门化应用，它以适合 Web 使用为主要目标，牺牲了一些地理精度来提高地图服务的渲染效率。

Cesium渲染天地图资源时推荐使用球面墨卡托投影，即矢量注记选择cva_w，影像底图img_w

1.2 BingMaps影像

Cesium.BingMapsImageryProvider

Cesium.BingMapsImageryProvider用于将 Bing Maps 提供的影像数据加载到 Cesium 的三维场景中。参数mapStyle的值是BingMapsStyle类型的数据，默认值是Cesium.BingMapsStyle.AERIAL Cesium.BingMapsStyle.AERIAL显示无标注的卫星图像，适合需要纯航拍视图的场景。 Cesium.BingMapsStyle.AERIAL_WITH_LABELS显示带有标注（如街道名称和地标）的航拍地图。 Cesium.BingMapsStyle.COLLINS_BART一种特殊地图样式，以英国风格为基础的地理地图，适用于具有英国地理特色的展示。 Cesium.BingMapsStyle.ORDNANCE_SURVEY英国的 Ordnance Survey（英国地形测绘局）风格的地图。这种地图样式以高度详细的地形信息和地理标注为特点，主要用于英国地区，提供丰富的地理参考数据。 Cesium.BingMapsStyle.ROAD显示标准的街道地图，类似于导航地图，主要用于显示道路网络和地理特征。

1.3 ArcGIS Map Server影像

Cesium.ArcGisMapServerImageryProvider

Cesium.ArcGisMapServerImageryProvider是 Cesium 中用于加载 ArcGIS Map Server 提供的影像图层的类。 ArcGIS 是一种广泛使用的地理信息系统 (GIS) 平台，由 Esri 开发，提供各种地图服务，包括影像、地形、交通等数据。

1.4 符合WMTS标准的影像

Cesium.WebMapTileServiceImageryProvider

Cesium.WebMapTileServiceImageryProvider 是 Cesium 中用于加载和渲染符合 WMTS (Web Map Tile Service) 标准的瓦片地图服务的类。

WMTS 是由 OGC（Open Geospatial Consortium）制定的一个标准，用于通过网络提供地理信息的瓦片地图服务。WMTS 服务提供预渲染或动态生成的地图瓦片，可以大大提高地图显示效率。

天地图也提供了 WMTS 服务，结合 Cesium.WebMapTileServiceImageryProvider 可以加载天地图资源。

二. 地形

Cesium.CesiumTerrainProvider

Cesium.CesiumTerrainProvider 是 Cesium 中用于加载地形数据的类，它允许你将全球或局部地区的三维地形加载到 Cesium 场景中，从而让地图不仅包含二维影像，还能展示真实的地形高程信息。

三. 模型

3.1 3D-local3DCache(S3M Tiles图层)

iserver给出的资源url路径有前缀3D-local3DCache

scene.addS3MTilesLayerByScp

3D-local3DCache 是 SuperMap iServer 提供的一个功能，用于缓存三维数据的本地存储。

S3M 是一种用于三维场景的瓦片化数据格式，通常用于大规模三维地理空间数据的可视化。S3M 格式主要由 SuperMap 公司开发，广泛应用于高效渲染海量三维数据。 scene.addS3MTilesLayerByScp 方法允许你将 S3M 格式的数据（通常是通过 SCP 文件传输）加载到 Cesium 中进行渲染。这个方法可以有效处理大规模的三维地理空间数据，提供平滑的用户体验。

scene.addS3MTilesLayerByScp用于在场景中添加 S3M Tiles 图层。

// 使用示例
const layer = await scene.addS3MTilesLayerByScp(url, option)
layer.visible = true // 显示
layer.visible = false // 隐藏

3.2 scene.layers和viewer.imageryLayers有啥区别

scene.layers主要用于管理三维图层。
viewer.imageryLayers主要用于管理二维影像图层。

四. 地图瓦片(一般是路线图层)

4.1 map-ugcv5地图瓦片,也称为sci3d

iserver给出的资源url路径有前缀map-ugcv5

Cesium.SuperMapImageryProvider

在超图 (SuperMap) 的 iServer 中，map-ugcv5 是一个功能模块或应用，主要与用户生成内容 (UGC) 相关，用于实现地图数据的管理和展示，尤其是在 Web 环境中。 map-ugcv5服务的源文件可以来自sci文件 sci文件通常指的是 SuperMap GIS（地理信息系统）平台使用的一种文件格式，专门用于存储和管理地理空间数据。使用Cesium.SuperMapImageryProvider渲染

五. 实体(Entity)

// 添加实体
let entityProvider = viewer.entities.add(Entity)
// 删除所有的实体
viewer.entities.removeAll()

viewer.entities.add(Entity)用来添加实体 viewer.entities.remove(item.labelEntityFeature)

使用说明

1.下载安装

npm install render-gis-resource -S

2.引入

import { 
    TiandituImageryConstructor,
    BingMapsImageryConstructor,
    ArcGisMapImageryConstructor,
    WMTSImageryConstructor,
    TerrainConstructor,
    S3MTilesScpConstructor,
    Ugcv5ImageryConstructor,
    EntityConstructor,
} from 'render-gis-resource'

3.提前准备变量

(1) 必须先引入Cesium，且变量名必须是Cesium (2) 使用window.SViewer = new Cesium.Viewer('cesiumContainer')初始化场景，且全局变量名必须是SViewer

4.类的说明

4.1 TiandituImageryConstructor 用来加载天地图影像和标注

`new TiandituImageryConstructor(option, level)`，参数option是必需的。参数option需要具有属性token，token为天地图官方token

示例

// 构建
const provider = new TiandituImageryConstructor({
    mapStyle: Cesium.TiandituMapsStyle.CVA_W,
    token: TianDiTu_token,
}, level)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.2 BingMapsImageryConstructor 用来加载BingMaps影像

`new BingMapsImageryConstructor(option, level)`，参数option是必需的。参数option需要具有属性key，key为BingMaps的key。参数option需要具有属性url。

示例

// 构建
const provider = new BingMapsImageryConstructor({
    url: url,
    key: key,
}, level)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.3 ArcGisMapImageryConstructor 用来加载ArcGisMap影像

`new ArcGisMapImageryConstructor(option, level)`，参数option是必需的。参数option需要具有属性url。

示例

// 构建
const provider = new ArcGisMapImageryConstructor({
    url: url,
}, level)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.4 WMTSImageryConstructor 用来加载符合WMTS标准的影像

`new WMTSImageryConstructor(option, level)`，参数option是必需的。参数option需要具有属性url。

示例

// 构建
const provider = new WMTSImageryConstructor({
    url: url,
}, level)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.5 TerrainConstructor 用来加载地形

`new TerrainConstructor(option)`，参数option是必需的。参数option需要具有属性url。

示例

// 构建
const provider = new TerrainConstructor({
    url: url,
}, level)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.6 S3MTilesScpConstructor 用来加载S3M路线模型

由于addS3MTilesLayerByScp是异步方法，所以无法在构造函数中加载

`await S3MTilesScpConstructor.create(url, option)`，参数url是必需的。参数option是必需的。参数option需要具有属性name。属性name用来销毁图层。

示例

// 构建
const option = {
    subdomainConfig: {
        urlScheme: filterUrl,
        subdomains: subdomains // 设置子域
    },
    name: '设计三标全线模型',
}
const url = modelUrl.replace(/{s}/g, 'www.xxxxx.com:8080')
provider = await S3MTilesScpConstructor.create(url, option)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.7 Ugcv5ImageryConstructor 用来加载map-ugcv5影像

`new Ugcv5ImageryConstructor(option)`，参数option是必需的。参数option需要具有属性url。

示例

// 构建
const option = {
    url: modelUrl,
    subdomains: subdomains, //设置子域
}
provider = new Ugcv5ImageryConstructor(option)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()

4.8 EntityConstructor 用来加载实体entity

`new EntityConstructor(option)`，参数option是必需的。

示例

// 构建
provider = new EntityConstructor(option)
// 显示
provider.show()
// 隐藏
provider.hide()
// 销毁
provider.destroy()