Cesium实践(2)—— 加载地形与影像


前言

地形数据用来表示真实的地形起伏;地图数据指的则是真实的影像服务, 本文实践在Cesium中加载地形与影像数据。


地形数据

Cesium地形服务

地形服务是Cesium的亮点之一,通过加入地形可以形象的展示出地球表面凹凸起伏。如果要使用地形服务的话,在创建Viewer时指定 terrainProvider 即可,注意地形数据是不可叠加的。

  • Cesium.createWorldTerrain

当添加了默认 token 后,可以使用 Cesium.createWorldTerrain 添加Cesium自带的地形服务,不需要额外指定请求的url:

  const viewer = new Cesium.Viewer("cesium", {
    infoBox: false,
    
    // 地形服务
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true, //开启地形光照
      requestWaterMask: true, // 开启水面波纹
    }),

  });

下图是加载地形数据后西藏部分地区的地形
在这里插入图片描述
查看请求的话发现地形数据是以矢量瓦片的格式进行请求的,cesium引擎在获取数据后基于webgl进行渲染
在这里插入图片描述
在这里插入图片描述

  • 其它地形服务

Cesium还支持一些其它厂商的开源地形服务,如:谷歌地球的高程数据VR-TheWorld Server的高程数据光滑椭球体

  • 谷歌地球高程数据: 需要指定url和元数据
  • VR-TheWorld Server高程数据: 需要指定url
  • 谷歌地球高程数据:默认无高度
    // 使用谷歌地球的高程数据
    terrainProvider: Cesium.GoogleEarthEnterpriseTerrainProvider({
      url: "http://www.example.com",
      metadata: metaOptions,
    }),
    
    // 使用 VR-TheWorld Server的高程数据
    terrainProvider: Cesium.VRTheWorldTerrainProvider({
      url: "http://www.example.com",
    }),

    // 使用 光滑椭球体(默认无高度)
    terrainProvider: Cesium.EllipsoidTerrainProvider(),

自定义高程数据

Cesium支持加载自定义的高程数据,一般是通过 DEM数字高程模型,借助 Cesium Lab 转换为Cesium支持的地形数据格式,然后使用 Cesium.CesiumTerrainProvider 这个 API 进行加载,DEM数据可以从地理空间数据云下载,对于遥感相关专业的人来讲它的重要性相当于 Git Hub 之于计科,是下载遥感数据最常用的网站。

	// 自定义地形服务
     terrainProvider: new Cesium.CesiumTerrainProvider({
       url: "xxx",
    }),

完整的使用教程网上有很多,这里不再详细介绍,可参考Cesium 地形数据的加载

影像数据

加载影像数据

Cesium默认使用微软的Bing影像图,在Viewer类中使用 imageryProvider 函数可初始化图层,加载高德栅格瓦片地图:

	// gd
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      layer: "GDLayer",
      style: "default",
      format: "image/png",
      tileMatrixSetID: "GoogleMapsCompatible",
    }),

或者

	const layers = viewer.scene.imageryLayers;
 	layers.addImageryProvider(
    	new Cesium.UrlTemplateImageryProvider({
      		url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      		layer: "GDLayer",
      		style: "default",
      		format: "image/png",
      		tileMatrixSetID: "GoogleMapsCompatible",
    	})
    )

在这里插入图片描述

ImageryProvider 支持的地图服务

Cesium支持加载 TMS WMS WMTS 等多个标准的地图服务,同时也提供了支持多种服务的接口,API文档:Cesium.ImageryProvider(),下面列举一些常用的接口。

API说明
WebMapServiceImageryProvider网络地图服务WMS,OGC标准影像数据服务之一,用于从分布式地理空间数据库请求地理区域的地图块
TileMapServiceImageryProvider瓦片地图服务TMS ,REST风格的瓦片服务,可使用Map Tiler 或 GDAL2Tiles 生成瓦片
WebMapTileServiceImageryProvider网络地图瓦片WMTS,OGC标准影像数据服务之一,通过网络提供预先渲染的地理参考地图瓦片
OpenStreetMapImageryProvider调用 Open Street Map 在线地图或者 Slippy 地图切片
BingMapsImageryProvider调用 Bing 地图网络服务
ArcGisMapServerImageryProvider调用 ArcGis Server 发布的瓦片服务
GoogleEarthEnterpriseImageryProvider;GoogleEarthEnterpriseMapsProvider调用 Google Earth 发布的影像或地图服务
MapboxImageryProvider;MapboxStyleImageryProvider调用 Mapbox API 发布的各种数据服务,需要提前申请令牌
SingleTileImageryProvider加载一张全球图片作为底图
UrlTemplateImageryProvide可连接至各种地图原,参考 UrlTemplateImageryProvider

总结

地形数据

  • Cesium地形服务
  • 自定义高程数据

影像数据

  • 加载影像数据
  • ImageryProvider 支持的地图服务
要在Cesium中拉高已加载地形高度,你可以使用Cesium的SampledHeightProperty API来监听高度变化,并更新地形的高度。以下是实现拉高地形高度的步骤: 1. 加载地形数据 使用CesiumTerrainProvider API加载地形数据。Cesium支持多种地形数据源,例如STK World TerrainCesium Terrain、Mapbox Terrain等。你可以根据自己的需求选择相应的数据源。 ``` var viewer = new Cesium.Viewer('cesiumContainer'); var terrainProvider = new Cesium.CesiumTerrainProvider({ url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles' }); viewer.terrainProvider = terrainProvider; ``` 2. 监听高度变化 使用Cesium的SampledHeightProperty API监听高度变化。你可以在地形高度变化时更新地形的高度。 ``` var heightProperty = new Cesium.SampledHeightProperty(); heightProperty.addSample(viewer.clock.currentTime, 0); // 初始高度为0 viewer.clock.onTick.addEventListener(function(clock) { var time = clock.currentTime; var height = Math.sin(time.secondsOfDay) * 100; // 模拟高度变化 heightProperty.addSample(time, height); }); viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles', requestVertexNormals: true, requestWaterMask: true, hasVertexNormals: function() { return true; }, hasWaterMask: function() { return true; }, modifyShader: function(shader) { var regex = /terrain\.height\s*[\+\-]\s*(\d+\.?\d*)/g; var result = regex.exec(shader); if (result !== null) { var heightOffset = 'terrain.height + ' + heightProperty.getSample(viewer.clock.currentTime).height.toFixed(2); shader = shader.replace(regex, heightOffset); } return shader; } }); ``` 3. 修改地形着色器 使用CesiumTerrainProvider API的modifyShader方法修改地形着色器,将地形高度替换为监听的高度。你可以在modifyShader方法中使用正则表达式匹配着色器代码,并将地形高度替换为监听的高度。 ``` modifyShader: function(shader) { var regex = /terrain\.height\s*[\+\-]\s*(\d+\.?\d*)/g; var result = regex.exec(shader); if (result !== null) { var heightOffset = 'terrain.height + ' + heightProperty.getSample(viewer.clock.currentTime).height.toFixed(2); shader = shader.replace(regex, heightOffset); } return shader; } ``` 这样,在地形数据加载完成后,地形就会被拉高到指定高度。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值