Cesium数据加载

文章目录

  • 0.引言
  • 1.影像加载
    • 1.1Bing地图
    • 1.2天地图
    • 1.3ArcGIS在线地图
    • 1.4高德地图
    • 1.5OSM影像
    • 1.6MapBox影像
  • 2.OGC地图服务
    • 2.1WMS
    • 2.2WMTS
    • 2.3TMS
  • 3.GeoJSON数据加载
  • 4.KML数据加载
  • 5.TIFF数据加载
  • 6.点云数据加载
  • 7.地形数据加载
    • 7.1在线地形数据加载
    • 7.2本地地形数据加载
  • 8.倾斜摄影模型数据加载
  • 9.glTF数据加载
  • 10.CZML数据加载
  • 11.单张图片底图加载
  • 12.问题记录

0.引言

现有的gis开发方向较流行的是webgis开发,其中Cesium是一款开源的WebGIS库,主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能,并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结,介绍Cesium相关数据加载操作,数据包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等,ESRI、超图、中地数码等大型GIS厂商提供的自定义格式的GIS数据,以及GeoJSON、TIFF、SHP、KML、点云、三维模型等各种格式的GIS数据。

1.影像加载

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

1.1Bing地图

Cesium提供了BingMapsImageryProvider类来加载Bing地图,并且默认加载了微软公司的Bing地图。也就是说,在创建Viewer时,如果不指定ImageryProvider类,就默认加载Bing地图。
在加载Bing地图时,需要申请Bing地图密钥或者申请Cesium的token,否则可能会出现加载完成后没有地图出现的情况。本文以申请Cesium的token为例。
(1)申请一个token
登录网址注册并申请token: https://cesium.com/ion/signin/tokens
  在这里插入图片描述
(2)加载关键代码
  在这里插入图片描述

2_1.1_影像加载_Bing地图.html
<!DOCTYPE html>
<html lang="en">  <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>影像加载_Bing地图</title>  <script src="./Build/Cesium/Cesium.js"></script>  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">  <style>  html,  body,  #cesiumContainer {  width: 100%;  height: 100%;  margin: 0;  padding: 0;  overflow: hidden;  }  </style>  
</head>  <body>  <div id="cesiumContainer">  </div>  <script>  Cesium.Ion.defaultAccessToken = '你的token';//替换为你申请的token  var viewer = new Cesium.Viewer("cesiumContainer", {  animation:false, //是否显示动画工具  timeline:false,  //是否显示时间轴工具  fullscreenButton:false,  //是否显示全屏按钮工具  });  </script>  
</body>  </html>

(3)加载效果
  在这里插入图片描述

1.2天地图

天地图的地图服务采用OGC Web Map Tile Service(WMTS)标准。Cesium提供了WebMapTileServiceImageryProvider类来调用天地图的地图服务。
调用天地图的地图服务需要申请Key,用户可以在天地图官网免费申请Key。在创建Viewer时,imageryProvider配置项通过WebMapTileServiceImageryProvider类来调用天地图影像底图(可以根据传入的天地图的服务地址来调用不同的底图,这里以影像底图为例)。天地图提供了t0~t7共8个域名,可以供我们任意选用,但是考虑到服务端连接有时是有限制的,经常请求不到,所以我们通过subdomains属性提供全部域名。
(1)申请Key
登录网址注册并申请Key:
天地图官网: http://lbs.tianditu.gov.cn/home.html
注册和登录页面: https://console.tianditu.gov.cn/api/key

  在这里插入图片描述

(2)加载关键代码
  在这里插入图片描述

2_1.2_影像加载_天地图.html
var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker: false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  imageryProvider: new Cesium.WebMapTileServiceImageryProvider({  //加载天地图影像图的地址  url:"http://t{s}.tianditu.com/img_w/wmts?service=wmts&amp;request=GetTile&amp;version=1.0.0&amp;LAYER=img&amp;tileMatrixSet=w&amp;TileMatrix={TileMatrix}&amp;TileRow={TileRow}&amp;TileCol={TileCol}&amp;style=default&amp;format=tiles&amp;tk=你的key",//替换为你申请的key  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], //服务负载子域  layer: "tdtImgLayer",  style: "default",  format: "image/jpeg",  tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式  show: true  })  
});  
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({  //加载天地图影像注记的地址  url:"http://t{s}.tianditu.com/cia_w/wmts?service=wmts&amp;request=GetTile&amp;version=1.0.0&amp;LAYER=cia&amp;tileMatrixSet=w&amp;TileMatrix={TileMatrix}&amp;TileRow={TileRow}&amp;TileCol={TileCol}&amp;style=default.jpg&amp;tk=你的key",//替换为你申请的key  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],  layer: "tdtCiaLayer",  style: "default",  format: "image/jpeg",  tileMatrixSetID: "GoogleMapsCompatible",  show: true  
}));

其他代码参见1.1

(3)加载效果
  在这里插入图片描述

1.3ArcGIS在线地图

Cesium提供了ArcGisMapServerImageryProvider类来通过ArcGIS Server REST API访问托管在ArcGIS MapServer上的地图瓦片。
在创建Viewer时,imageryProvider配置项通过ArcGisMapServerImageryProvider类传入ArcGIS在线地图URL来访问托管在ArcGIS MapServer上的地图瓦片。
(1)加载关键代码
  在这里插入图片描述

2_1.3_影像加载_ArcGIS在线影像.html
var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker:false, //图层选择控件  animation:false, //是否显示动画工具  timeline:false,  //是否显示时间轴工具  fullscreenButton:false,  //是否显示全屏按钮工具  //加载ArcGIS在线影像图  imageryProvider : new Cesium.ArcGisMapServerImageryProvider({  url:"http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",  })  
});

其他代码参见1.1

(2)加载效果
  在这里插入图片描述
问题记录:以上地球并未成功加载Arcgis在线地图,代码来源于教程,以及尝试了其他博客资源代码,均无法加载成功,今天是2024/1/24,这个时间附近应该无法访问Arcgis在线地图,或许有其他未知的原因,还需进一步研究。

1.4高德地图

Cesium提供了UrlTemplateImageryProvider类来通过指定的URL模板请求地图。在创建Viewer时,用户可以通过指定高德地图服务URL来访问高德地图。
(1)加载关键代码
  在这里插入图片描述

2_1.4_影像加载_高德地图.html
var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker:false, //图层选择控件  animation:false, //是否显示动画工具  timeline:false,  //是否显示时间轴工具  fullscreenButton:false,  //是否显示全屏按钮工具  //加载高德地图,UrlTemplateImageryProvider接口是加载谷歌地图或者其他互联网地图的接口  imageryProvider : new Cesium.UrlTemplateImageryProvider({  url:"https://webst02.is.autonavi.com/appmaptile?style=6&amp;x={x}&amp;y={y}&amp;z={z}",  })  
});  //添加高德地图注记  
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({  url:"http://webst02.is.autonavi.com/appmaptile?x={x}&amp;y={y}&amp;z={z}&amp;lang=zh_cn&amp;size=1&amp;scale=1&amp;style=8",  
}));

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

1.5OSM影像

Cesium提供了OpenStreetMapImageryProvider类来加载OSM数据,只需直接指定OSM数据URL即可。另外,还可以通过UrlTemplateImageryProvider类构建xyz形式的URL来请求影像瓦片。
(1)加载关键代码
  在这里插入图片描述

2_1.5_影像加载_OSM影像.html
var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker: false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  //加载OSM影像  imageryProvider: new Cesium.OpenStreetMapImageryProvider({  url:'https://a.tile.openstreetmap.org/'  })  //XYZ形式  /* imageryProvider : new Cesium.UrlTemplateImageryProvider({  url:'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',  subdomains: ['a', 'b', 'c']  }) */  
});

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

1.6MapBox影像

在请求MapBox影像时,首先需要进入MapBox官网申请一个token密钥。
(1)申请一个token
登录网址注册并申请token: https://www.mapbox.com/maps/
注册mapbox需要提供银行卡号,开始一段时间免费,免费到期后收费。
本文仅供研究cesium数据加载演示,提供教程配套资源代码中的测试token。
测试token:pk.eyJ1IjoiemhhbmdoYWl4dWUiLCJhIjoiY2t4eWR0Y2F4MThqZjJ4cnNuenRkMXpmeiJ9.zLvz8kfpNPErzcNBbj0dUA

(2)加载关键代码
  在这里插入图片描述

2_1.6_影像加载_MapBox影像.html
var viewer = new Cesium.Viewer("cesiumContainer", {baseLayerPicker: false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  //加载MapBox影像  imageryProvider: new Cesium.UrlTemplateImageryProvider({  url:"https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=你的token",//替换申请的token  })  
});

其他代码参见1.1

(3)加载效果
  在这里插入图片描述

2.OGC地图服务

OGC全称为Open Geospatial Consortium(开放地理空间信息联盟),是一个非营利性的国际标准组织。它制定了数据和服务的一系列标准,GIS厂商按照这个标准进行开发即可保证空间数据的可互操作性。
本文采用开源软件GeoServer来进行OGC地图服务的发布,并通过Cesium加载WMS、WMTS和TMS。
下载并安装GeoServer: https://geoserver.org/
安装步骤及启动注意事项详见这篇博客:“GeoServer安装及启动教程(安装包版)”
经测试jdk8+Geoserver2.21.3能正常使用,参见博客:“Geoserver 安装后openlayer预览自带的示例图层,空白不显示”
geoserver注意跨域问题:GeoServer跨域三种解决方法
http-server注意跨域问题: 关于跨域(Cesium开发中调用第三方服务时)

2.1WMS

网络地图服务(Web Map Service,WMS)利用具有地理空间位置信息的数据制作地图,将地图定义为地理数据的可视化表现,能够根据用户的请求返回相应的地图,包括PNG、GIF、JPEG等栅格格式,以及Web CGM等矢量格式。
这里以GeoServer发布中国地质大学(武汉)影像图为例来演示Cesium如何加载WMS,所需软件和数据包括GeoServer、ArcGIS及TIFF影像图,具体步骤如下。
(1)启动GeoServer,打开GeoServer服务主页面;
启动服务,浏览器输入: http://localhost:8088/geoserver/
  在这里插入图片描述

(2)在页面左侧选择“工作空间”→“添加新的工作空间”选项,在弹出的“新建工作空间”页面中输入工作区名称及命名空间URI(自定义),并单击“保存”按钮。这里将工作区名称设置为“Cesium”,命名空间URI设置为“www.ceshiwms.com”;
  在这里插入图片描述

  在这里插入图片描述

(3)在页面左侧选择“存储仓库”→“添加新的存储仓库”选项,在弹出的“新建数据源”页面中选择“GeoTIFF”选项(这个可以根据自己的数据源来选择);
  在这里插入图片描述

  在这里插入图片描述

(4)跳转到“添加栅格数据源”页面,设置“工作空间”为我们刚刚创建的“Cesium”,“数据源名称”为“dida”,“连接参数URL”为本地数据源所在路径(注意,GeoServer只支持地理坐标系,如果坐标系是投影坐标系,则GeoServer会报错,需要将坐标系转换为地理坐标系后进行发布);
  在这里插入图片描述

(5)栅格数据源添加完成后,先单击“保存”按钮,跳转到“新建图层”页面,然后单击“发布”按钮,跳转到“编辑图层”页面;
  在这里插入图片描述

  在这里插入图片描述

(6)在“编辑图层”页面中,检查基本信息(可以手动修改这些信息),之后单击“保存”按钮,即可进入“图层”页面;
  在这里插入图片描述

(7)在页面左侧选择“图层预览”选项,找到刚刚发布的图层“dida”,单击“OpenLayers”按钮进行预览;
  在这里插入图片描述

  在这里插入图片描述

(8)在预览图层时,按“F12”键,在弹出的窗口中选择“Network”选项卡,再按“F5”刷新网页,选择一个WMS请求,查看详细信息,并记录URL、LAYERS、SRS等几个参数;
  在这里插入图片描述

(9)Cesium加载WMS。Cesium提供了WebMapServiceImageryProvider类来加载由Web地图服务服务器托管的切片影像,并传入步骤(8)中查看的参数。加载WMS的效果如下:
  在这里插入图片描述
细节分界线如下:
  在这里插入图片描述

(10)加载关键代码
  在这里插入图片描述

2_2.1_OGC地图服务_WMS.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  baseLayerPicker: false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  
//加载WMS  
var wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({  url:'http://localhost:8088/geoserver/Cesium/wms', // 服务地址  layers: 'Cesium:dida', // 图层名称  parameters: {  transparent: true, // 是否透明  format: 'image/png', // 返回格式     srs: 'EPSG:4326',  // 坐标系  }  
})  
viewer.imageryLayers.addImageryProvider(wmsImageryProvider)  
viewer.camera.setView({  destination: Cesium.Rectangle.fromDegrees(114.38304,30.51667,114.40471,30.52345)  
});

其他代码参见1.1

2.2WMTS

Web地图瓦片服务(Web Map Tile Server,WMTS)提供了一种采用预定义图块方法发布数字地图服务的标准化解决方案,并且弥补了WMS不能提供分块地图的不足。
这里以GeoServer发布中国地质大学(武汉)影像图为例来演示Cesium如何加载WMTS,所需软件和数据包括GeoServer、ArcGIS及TIFF影像图,具体步骤如下。
(1)在GeoServer服务主页面左侧选择“切片图层”选项,在“切片图层”页面中找到想要生产瓦片的图层条目,此处我们找到刚刚发布的“Cesium:dida”图层条目;
  在这里插入图片描述
(2)在“Cesium:dida”图层条目右侧单击“seed/Truncate”按钮,打开切片配置页面,进行瓦片的生产;
  在这里插入图片描述

(3)在切片配置页面中,创建新的任务,在“Create a new task”中设置各选项(主要设置Grid Set,其他可使用默认设置),设置完成后,单击“Submit”按钮提交任务,即可跳转到对应的瓦片生产进程页面,如果该页面没有出现,则可能是因为瓦片生产数过少;
  在这里插入图片描述
(4)在瓦片生产完成后,在GeoServer安装目录下找到gwc文件夹,并找到以对应服务命名的文件夹,即可查看瓦片生产结果;
在GeoServer安装目录若没有找到gwc文件夹,可以自定义生成目录。
  在这里插入图片描述

<context-param><param-name>GEOWEBCACHE_CACHE_DIR</param-name>  <param-value>D:\Soft_x64\GeoServer\Title</param-value>  </context-param>

生成切片如下:
  在这里插入图片描述

(5)注销GeoServer并重新登录,在服务主页面右侧选择“服务能力”→“WMTS”→“1.0.0”选项,查看WMTS相关参数。
  在这里插入图片描述
网页中搜索“dida”,找到对应的工作空间名称和图层名,查看图层名、坐标系及对应的服务链接;
  在这里插入图片描述
向下找到服务链接:
  在这里插入图片描述
(6)Cesium加载WMTS。Cesium提供了WebMapTileServiceImageryProvider类来加载GeoServer发布的WMTS切片影像,并传入步骤(5)中查看的参数。需要注意的是,要修改WMTS的服务URL地址,{TileMatrix} 修改为 {TileMatrixSet}:{TileMatrix}。加载WMTS的效果如下:
  在这里插入图片描述

(7)加载关键代码
  在这里插入图片描述

2_2.2_OGC地图服务_WMTS.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  baseLayerPicker: false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  
//加载WMTS  
var wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({  url:'http://localhost:8088/geoserver/gwc/service/wmts/rest/Cesium:dida/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',//服务链接  layer: 'Cesium:dida',  style: '',  format: 'image/png',  //不能用jpeg格式,因为jpeg格式不能设置透明背景,设置透明背景会变成白色  tileMatrixSetID: 'EPSG:900913',      //一般使用EPSG:3857坐标系  
});  
viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);  
viewer.camera.setView({  destination: Cesium.Rectangle.fromDegrees(114.38304,30.51667,114.40471,30.52345)  
});  
</script>

其他代码参见1.1

2.3TMS

切片地图服务(Tile Map Server,TMS)又叫缓冲服务区,它定义了一些操作,而这些操作允许用户按需访问切片地图,不仅访问速度更快,还支持修改坐标系。Cesium加载GeoServer发布的TMS的具体步骤如下。
(1)注销GeoServer并重新登录,在服务主页面右侧选择“服务能力”→“TMS”→“1.0.0”选项,查看TMS相关参数,找到想要加载的TMS的服务URL地址,这里找到“title=“dida””的服务URL地址;
  在这里插入图片描述

  在这里插入图片描述
(2)Cesium加载TMS。Cesium提供了UrlTemplateImageryProvider类,用于通过指定的URL来加载GeoServer发布的TMS。需要注意的是,要在TMS的服务URL地址后加上/{z}/{x}/{reverseY}.png才可以访问切片数据。加载TMS的效果如下:
  在这里插入图片描述

(3)加载关键代码
  在这里插入图片描述

2_2.3_OGC地图服务_TMS.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  baseLayerPicker: false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  var urlTemplateImageryProvider = new Cesium.UrlTemplateImageryProvider({  url:"http://localhost:8088/geoserver/gwc/service/tms/1.0.0/Cesium%3Adida@EPSG%3A900913@png/{z}/{x}/{reverseY}.png"  
});  
viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);  
viewer.camera.setView({  destination: Cesium.Rectangle.fromDegrees(114.38304,30.51667,114.40471,30.52345)  
});

其他代码参见1.1

3.GeoJSON数据加载

GeoJSON是一种对各种地理数据结构进行编码的格式,是基于JavaScript对象表示法(JavaScript Object Notation,JSON)的地理空间信息数据交换格式。GeoJSON对象可以表示几何特征或特征集合,并且支持点、线、面、多点、多线、多面和几何集合等几何类型。
Cesium针对JSON数据源提供了GeoJsonDataSource类,可以通过load方法加载GeoJSON对象并设置相应的填充颜色、边框颜色、边框宽度、是否贴地等属性。SHP数据也需要先被转换成GeoJSON数据再加载。
(1)加载关键代码
  在这里插入图片描述

2_3_GeoJson格式加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  //terrainProvider: Cesium.createWorldTerrain(),  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  viewer.scene.globe.depthTestAgainstTerrain = false;  var GeoJsonData = viewer.dataSources.add(  Cesium.GeoJsonDataSource.load("./矢量文件/json/merge.json", {  fill: Cesium.Color.PINK,    //填充色  stroke: Cesium.Color.HOTPINK,   //轮廓颜色  strokeWidth: 5,     //轮廓宽度  })  
);  
GeoJsonData.then(viewer.zoomTo(GeoJsonData))

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

4.KML数据加载

KML是Keyhole Markup Language(标记语言)的缩写,最初由Keyhole公司开发,是一种基于XML语法与格式的,用于描述和保存地理信息(如点、线、图像、多边形和模型等)的编码规范。
Cesium提供了KmlDataSource类来处理KML数据,可以通过load方法加载KML数据。
(1)加载关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  var kmlData = viewer.dataSources.add(Cesium.KmlDataSource.load(  './矢量文件/kml/road.kml',  {  camera: viewer.scene.camera,  canvas: viewer.scene.canvas,  })  
);  kmlData.then(viewer.zoomTo(kmlData))

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

5.TIFF数据加载

TIFF格式是图形图像处理中常用的格式之一,虽然该图像格式很复杂,但是由于它对图像信息的存放灵活多变,可以支持多种色彩系统,而且独立于操作系统,因此得到了广泛应用,特别是在各种地理信息系统、摄影测量与遥感等行业中,TIFF格式的应用更为广泛。
Cesium并不能直接加载本地TIFF格式的影像数据,而是需要对其进行切片处理后才能加载,其数据处理及加载过程如下。
(1)使用Cesium实验室对TIFF影像进行切片。打开Cesium实验室,选择“数据处理”→“影像切片”选项。
  在这里插入图片描述
(2)单击“添加”按钮,添加需要切片的TIFF影像,还可以设置处理参数。
  在这里插入图片描述
(3)设置“储存类型”为“散列文件”,并设置输出文件的路径,如图3-29所示。完成后单击“确认”按钮,即可开始对影像数据进行切片。
  在这里插入图片描述
(4)Cesium加载影像瓦片。使用UrlTemplateImageryProvider类指定瓦片文件路径并通过xyz方式加载瓦片数据(瓦片文件路径后加/{z}/{x}/{y}.png)。
  在这里插入图片描述

(5)加载关键代码
  在这里插入图片描述

2_5_tiff格式加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  var localImage = viewer.scene.imageryLayers.addImageryProvider(  new Cesium.UrlTemplateImageryProvider({  url: './RasterImage/本地tif切片/地大1/{z}/{x}/{y}.png',  fileExtension: "png"  })  
)  
viewer.camera.setView({  destination: Cesium.Rectangle.fromDegrees(114.38304,30.51667,114.40471,30.52345)  
});

其他代码参见1.1

6.点云数据加载

点云数据(Point Cloud Data)是指在一个三维坐标系统中的一组向量的集合。扫描资料以点的形式被记录,每一个点都包含三维坐标,有些可能包含颜色信息(RGB)或反射强度信息(Intensity)。这里以LAS格式的点云数据为例介绍Cesium加载点云数据的过程。
(1)使用Cesium实验室对点云数据进行切片。打开Cesium实验室,选择“数据处理”→“点云切片”选项。
  在这里插入图片描述
(2)单击“添加”按钮,添加需要切片的LAS格式的点云数据,并单击“设置”按钮,设置文件的空间参考、切片最大级别等属性。设置“颜色存储”“可平移”“储存类型”等参数,并设置切片输出目录。完成后单击“提交处理”按钮,即可开始对点云数据进行切片。
  在这里插入图片描述

(3)Cesium加载点云数据。首先创建一个Cesium3D切片集,并指定点云切片数据的JSON文件路径URL,然后将其添加至场景primitives中。加载点云数据的效果如下所示。
  在这里插入图片描述

(4)加载关键代码
  在这里插入图片描述

2_6_las点云数据加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  terrainProvider: Cesium.createWorldTerrain(),//cesium1.88,高版本会报错,高版本需查询新的构造地形的函数  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  var tileset = viewer.scene.primitives.add(  new Cesium.Cesium3DTileset({  url: './RasterImage/点云切片数据/tileset.json',//文件的路径  })  
);  viewer.zoomTo(tileset);//定位过去

其他代码参见1.1

7.地形数据加载

地形是地物形状和地貌的总称,具体是指地表以上分布的固定物体共同呈现出的高低起伏的各种状态。该节主要介绍Cesium的在线地形数据加载及本地地形数据加载。

7.1在线地形数据加载

Cesium封装了现成的操作地形的接口createWorldTerrain,该接口可以提供全球在线地形数据,只需在创建Viewer时,设置terrainProvider配置项为Cesium.createWorldTerrain(),即可加载全球在线地形数据。
(1)加载关键代码
  在这里插入图片描述

Cesium.Ion.defaultAccessToken = '你的token';var viewer = new Cesium.Viewer("cesiumContainer", {  terrainProvider: Cesium.createWorldTerrain(),  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

7.2本地地形数据加载

由于我们下载的大部分地形原始数据都是TIF F格式的,而Cesium支持的是TERRAIN格式的数据,因此需要先处理数据。本地地形数据加载的过程如下。
(1)下载DEM地形数据,登录地理空间数据云,网址为: http://www.gscloud.cn
进入高级检索页面。
  在这里插入图片描述
(2)设置“数据集”为DEM数字高程数据中的“GDEMV3 30M分辨率数字高程数据”(可根据需求自行调整)。
  在这里插入图片描述
(3)设置“空间位置”并检索数据集,在检索到的数据集中选择一个进行下载。注意,下载的数据集是压缩包,需要解压缩之后才能使用。
  在这里插入图片描述

(4)使用Cesium实验室对地形数据进行切片。打开Cesium实验室,选择“数据处理”→“地形切片”选项,并添加刚刚下载的DEM地形数据,设置“储存类型”为“散列文件”,并设置输出文件的路径。
  在这里插入图片描述

(5)IIS服务器搭建及数据发布。首先打开IIS管理器,选择“网站”选项并右击该选项,在弹出的快捷菜单中选择“添加网站”命令。然后在弹出的对话框中输入网站名称,设置“物理路径”为地形切片数据所在路径,并分配端口“8082”(可自行更改)。
  在这里插入图片描述

  在这里插入图片描述

(6)由于地形图需要被加载到Cesium前端中,因此会存在跨域的问题。解决办法是:在新添加的网站中,进入HTTP响应标头页面,添加一个HTTP标头(名称为“Access-Control-Allow-Origin”,值为“*”);接着在该网站中,进入MIME类型页面,添加一个类型(文件扩展名为“.terrain”,MIME类型为“application/vnd.quantized-mesh”)。
  在这里插入图片描述

  在这里插入图片描述

(7)加载本地IIS服务器发布的地形数据。Cesium提供了CesiumTerrainProvider接口,支持以Cesium地形格式访问地形数据。在创建Viewer时,设置地图配置项中的terrainProvider。需要注意的是,地形服务URL为“http://localhost:网站端口+地形瓦片所在文件夹”。加载本地地形数据的效果如下。
  在这里插入图片描述

(8)加载关键代码
  在这里插入图片描述

2_7.2_本地地形数据加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  //加载本地地形切片  terrainProvider: new Cesium.CesiumTerrainProvider({  url:'http://localhost:8182/洪山区/' //注意指定到地形瓦片所在文件夹即可  }),  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  
viewer.camera.setView({  
destination: Cesium.Rectangle.fromDegrees(114.5,30.5,114.54047,30.52345)  
});

其他代码参见1.1

8.倾斜摄影模型数据加载

目前,市面上生产的倾斜摄影模型,特别是使用Smart3D软件处理的倾斜摄影三维模型的数据组织方式一般是二进制存储的、带有嵌入式链接纹理数据(.jpg)的OSGB格式。本节以OSGB格式的倾斜摄影三维模型数据为例介绍Cesium加载倾斜摄影三维模型数据的过程。
(1)将OSGB格式数据转换为Cesium所支持的3D Tiles格式数据。首先,将OSGB格式数据组织起来,其中,数据目录中必须包括一个data目录,用作OSGB格式数据总入口;一个与data目录同级放置的metadata.xml文件,用于记录模型的位置信息。OSGB格式数据的组织形式如下。
  在这里插入图片描述

(2)使用Cesium实验室对OSGB格式数据进行处理。打开Cesium实验室,选择“数据处理”→“倾斜模型切片”选项,进入倾斜摄影模型切片页面。
  在这里插入图片描述

(3)单击“选择”按钮,选择OSGB格式数据目录中的data目录,会自动读取与data目录同级放置的metadata.xml文件所包含的模型数据的空间参考等信息,保持其他参数的默认设置不变,并设置输出目录。单击“提交处理”按钮即可开始切片。
  在这里插入图片描述

  在这里插入图片描述
CesiumLab转换倾斜摄影有时有问题,若转换数据不可用,可在网上搜索其他转换工具转换。

(4)使用Cesium.Cesium3DTileset接口指定转换后的3D Tiles数据的URL来进行3D Tiles数据的加载。加载倾斜摄影三维模型数据的效果如下。
  在这里插入图片描述

(5)加载关键代码
  在这里插入图片描述

2_8_倾斜摄影数据加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  var tileset = viewer.scene.primitives.add(  new Cesium.Cesium3DTileset({  url: './倾斜摄影/大雁塔3DTiles/tileset.json',//文件的路径  maximumScreenSpaceError:1  })  
);  
//定位过去  
viewer.zoomTo(tileset);

其他代码参见1.1

9.glTF数据加载

glTF(GL Transmission Format),即图形语言交换格式,是一种3D内容的格式标准,其本质是一个JSON文件。该文件描述了整个3D场景的内容,包含了对场景结构进行描述的场景图。场景中的3D对象通过场景节点引用网格进行定义。材质定义了3D对象的外观,动画定义了3D对象的变换操作(如选择、平移操作)。
Cesium通过Model.fromGltf接口指定glTF数据URL来进行glTF数据加载,并且可以通过modelMatrix、scale等配置项调整glTF数据的加载位置、缩放比例等。
(1)加载关键代码
  在这里插入图片描述

2_9_glTF数据加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  var origin = Cesium.Cartesian3.fromDegrees(114.39278, 30.52357, 0.0);  
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);  
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({  url: './3D格式数据/glTF/CesiumMilkTruck.gltf',  modelMatrix : modelMatrix,  //Gltf数据加载位置  scale : 5     //放大倍数  
}));  
//移动相机  
viewer.camera.flyTo({  destination : Cesium.Cartesian3.fromDegrees(114.39278, 30.52357, 60.0)     //相机飞入点  
});

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

10.CZML数据加载

CZML是一种用来描述动态场景的JSON架构的语言,主要用于在浏览器中展示Cesium。它可以用来描述点、线、布告板、模型及其他的图元,同时定义它们是如何随时间变化的。CZML可以被理解为Cesium Language的简写,是Cesium中的一个十分重要的概念。CZML文档包含一个JSON数组,且该数组中的每个元素都是一个CZML数据包(packet)。CZML数据包描述了场景中单个对象(如单个飞机)的图形属性。
Cesium具有一套操作、处理CZML的API,可以简单、便捷地操作CZML中的各个对象来完成各种任务。首先使用CzmlDataSource对象处理CZML数据,并通过load函数返回一个CzmlDataSource对象的Promise。然后将其加入到Viewer成员变量dataSources中,该成员变量是一个DataSource数据源的集合DataSourceCollection。本节以加载飞机模型为例来演示Cesium加载CZML数据的过程。
(1)加载关键代码
  在这里插入图片描述

2_10_CZML数据加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var viewer = new Cesium.Viewer("cesiumContainer", {  timeline: false,  animation: false,  vrButton: false,  sceneModePicker: false,  infoBox: true,  scene3DOnly: false,  
});  var czml = [  {  id: "document",  name: "CZML Model",  version: "1.0",  },  {  id: "aircraft model",  name: "Cesium Air",  position: {  cartographicDegrees: [114.39278, 30.52357, 10.0],   //数据加载位置  },  model: {  gltf: "./3D格式数据/glb/Cesium_Air.glb",   //模型路径URL  scale: 2.0,  //缩放比例  },  },  
];  
var dataSourcePromise = viewer.dataSources.add(  Cesium.CzmlDataSource.load(czml)  
);  
dataSourcePromise.then(function (dataSource) {  entity = dataSource.entities.getById("aircraft model");  
})  
//定位过去  
viewer.zoomTo(entity);

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

11.单张图片底图加载

Cesium提供了SingleTileImageryProvider类来加载局部地区的单张图片底图。该类可以通过指定图片资源URL及图片所覆盖的矩形范围来自定义局部底图。
在创建Viewer时,imageryProvider配置项通过SingleTileImageryProvider类来传入本地单张图片资源URL及图片所覆盖的矩形范围。
(1)加载关键代码
  在这里插入图片描述

2_11_单张图片加载.html
Cesium.Ion.defaultAccessToken = '你的token';
var worldTerrain = Cesium.createWorldTerrain({  requestWaterMask: true,  requestVertexNormals: true  
});  
var viewer = new Cesium.Viewer("cesiumContainer", {  terrainProvider: worldTerrain,  baseLayerPicker:false, //图层选择控件  animation: false, //是否显示动画工具  timeline: false,  //是否显示时间轴工具  fullscreenButton: false,  //是否显示全屏按钮工具  
});  
//左下角坐标,右上角坐标  
var rectangle=Cesium.Rectangle.fromDegrees(114.38004,30.51667,114.40471,30.53045);  
viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({  url:"./RasterImage/图片/single.jpg",  rectangle: rectangle  
}))  
viewer.camera.setView({  destination: Cesium.Rectangle.fromDegrees(114.38304,30.51667,114.40471,30.52345)  
});

其他代码参见1.1

(2)加载效果
  在这里插入图片描述

12.问题记录

(1)可能出现以下加载了地球,但未完全显示地图
  在这里插入图片描述
对于以上问题,发现重新发布一个可以正常显示。
显示不全的端口:http://192.168.3.51:8081
显示正常的端口:http://192.168.3.51:8082
  在这里插入图片描述
如出现加载不全的问题,可能是端口冲突,可以自定义一个端口。
  在这里插入图片描述

http-server --cors -p 8086

或者可能是Cesium1.113版本与代码不匹配,基于此问题,更换《WebGIS之Cesium三维软件开发》书中采用的Cesium1.88版本。


cesium文章涉及数据

参考资料:
[1] 郭明强. 《WebGIS之Cesium三维软件开发》; 2023-04-01 [accessed 2024-01-24].
[2] 你知不知. Cesium地图不加载或者加载有问题怎么办; 2021-02-26 [accessed 2024-01-24].
[3] Destiny157. GeoServer安装及启动教程(安装包版); 2022-09-06 [accessed 2024-01-24].
[4] 小杨啵啵. Geoserver 安装后openlayer预览自带的示例图层,空白不显示; 2023-07-06 [accessed 2024-01-24].
[5] 大家都笑了_. GeoServer跨域三种解决方法; 2021-04-24 [accessed 2024-01-24].
[6] 带迦起舞. 如何使用GeoServer发布WMS服务; 2023-03-01 [accessed 2024-01-24].
[7] 小飞侠-GIS人. Cesium+GeoServer教程-003课 加载地图; 2023-08-02 [accessed 2024-01-24].
[8] leemraz. 关于跨域(Cesium开发中调用第三方服务时); 2021-01-08 [accessed 2024-01-24].
[9] 未名之名. Cesium 加载 geoserver 地图服务(wms); 2020-06-11 [accessed 2024-01-24].
[10] 兔子州. Cesium 加载GeoServer WMTS 服务; 2019-12-18 [accessed 2024-01-25].
[11] GIS之家. geoserver发布地图服务WMTS; 2021-10-12 [accessed 2024-01-25].
[12] 一个修理地球的人. Geoserver发布切片地图组完整教程; 2017-12-04 [accessed 2024-01-25].
[13] 佚名. Win11 IIS管理器应用在哪里?Win11打开IIS管理器方法; 2022-02-22 [accessed 2024-01-25].
[14] DLANDML. 最详细的IIS发布站点步骤; 2020-02-02 [accessed 2024-01-25].
[15] 我还好!死不了!. HTTP错误 403.14 - Forbidden 错误的解决方法; 2018-11-03 [accessed 2024-01-25].
[16] 李卓书. Cesium–倾斜摄影加载详细攻略; 2019-06-25 [accessed 2024-01-25].

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648643.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[BT]小迪安全2023学习笔记(第15天:PHP开发-登录验证)

第15天 名词解释 Cookie 是小型的文本文件&#xff0c;由网站发送到用户的浏览器&#xff0c;并存储在用户的设备上。Cookie 通常用于存储识别用户的信息&#xff0c;例如用户偏好、登录状态等。每当用户再次访问同一网站时&#xff0c;浏览器会将 Cookie 发送回服务器&#…

10 个值得分享给你前端低代码项目

今天来分享 10 个优秀的前端低代码项目&#xff01;企业级低代码快速开发平台&#xff0c;包含页面可视化配置、自定义表单、自定义报表、权限管理脚手架应用、前后端代码自动生成&#xff1b;主要特点是低代码开发&#xff0c;可实现复杂CRUD功能仅编写数据模型就能完成前后端…

扫雷游戏 bevy 实践(bevy 0.12)-1

经典的扫雷游戏 bevy 实践&#xff08;bevy 0.12&#xff09; 网上大多是0.6的 但愿大家能够摸索着 上手 参考资料&#xff1a; Bevy Minesweeper: Introduction - DEV Community &#xff08;原始教程&#xff0c;0.6版本&#xff09; https://github.com/leonidv/bevy-m…

在线教育App、H5、微信小程序项目

大型多端项目&#xff0c;uni-app开发 一、首页 二、课程页 以点击购买&#xff0c;购买后可以看到课程内容 种课程音频、视频等&#xff0c;以及专栏&#xff0c;都可以购买后观看 三、电子书 订阅成功后&#xff0c;就可以观看电子书了 选择章节 直播模块&#xff1a; 订阅…

Linux 一键部署influxd2-telegraf 二进制方式

influxd2前言 influxd2 是 InfluxDB 2.x 版本的后台进程,是一个开源的时序数据库平台,用于存储、查询和可视化时间序列数据。它提供了一个强大的查询语言和 API,可以快速而轻松地处理大量的高性能时序数据。 telegraf 是一个开源的代理程序,它可以收集、处理和传输各种不…

零基础学习数学建模——(四)备战美赛

本篇博客将讲解如何备战美赛。 什么是美赛 美赛&#xff0c;全称是美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;由美国数学及其应用联合会主办&#xff0c;是最高的国际性数学建模竞赛&#xff0c;也是世界范围内最具影响力的数学建模竞赛。 赛题内容…

CuteHttpFileServer

需求 最近行政同时需要做文件共享&#xff0c;使用windows上的文件共享有些问题&#xff0c;ftp也是有问题&#xff0c;同时需要身份验证功能&#xff0c;找了很久&#xff0c;发现CuteHttpFileServer 这个文件服务器&#xff0c;可以解决这个需求&#xff0c;中间过程中也写过…

生产问题复盘!Swap对GC的影响

Swap 1. 什么是Swap swap 是把一块磁盘空间或者一个本地文件当做内存来使用。可用内存无法满足内存分配请求的时候&#xff0c;把不常用的内存数据存储到磁盘&#xff0c;并在内存中释放这部分内存。当进程再次访问这部分内存的时候&#xff0c;再读取到内存中来。 2. 为什么…

详讲api网关之kong的基本概念及安装和使用(一)

什么是api网关 前面我们聊过sentinel&#xff0c;用来限流熔断和降级&#xff0c;如果你只有一个服务&#xff0c;用sentinel自然没有问题&#xff0c;但是如果是有多个服务&#xff0c;特别是微服务的兴起&#xff0c;那么每个服务都使用sentinel就给系统维护带来麻烦。那么网…

计数指针:shared_ptr (共享指针)与函数 笔记

推荐B站视频&#xff1a; 4.shared_ptr计数指针_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p4&vd_sourcea934d7fc6f47698a29dac90a922ba5a3 5.shared_ptr与函数_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p5&vd_sourcea…

YOLOV5目标检测---labelimg图片标注工具(1)

前言&#xff1a;在使用YOLO训练自己模型的时候首先要学会对数据进行处理&#xff0c;这里介绍一个常用的本地打标签工具labelimg&#xff0c;如果不想按照的话也可以使用在线标签工具&#xff0c;因为害怕数据泄露&#xff0c;所以本人一直使用的是本地工具进行打标签。在线标…

node.js漏洞总结

js开发的web应用和php/Java最大的区别就是js可以通过查看源代码的方式查看到编写的代码&#xff0c;但是php/Java的不能看到&#xff0c;也就是说js开发的web网页相当于可以进行白盒测试。 流行的js框架有&#xff1a; 1. AngularJS 2. React JS 3. Vue 4. jQuery 5. Backbone…

ppt作品展示能用二维码吗?文件二维码内容可替换怎么做?

当我们需要将自己的作品或者内容做成ppt文件之后&#xff0c;用二维码的方式来做展示&#xff0c;而且生成二维码还可以在图案不变的情况下&#xff0c;能够修改或者替换文件内容&#xff0c;实现二维码的长期使用。在遇到这种要求时&#xff0c;如何生成这种类型的二维码图片呢…

扫雷游戏——数组和函数实现

扫雷游戏的功能说明 使⽤控制台实现经典的扫雷游戏 游戏可以通过菜单实现继续玩或者退出游戏扫雷的棋盘是9*9的格⼦ 默认随机布置10个雷可以排查雷如果位置不是雷&#xff0c;就显⽰周围有⼏个雷如果位置是雷&#xff0c;就炸死游戏结束把除10个雷之外的所有⾮雷都找出来&…

HFSS实战(三)——过孔via TDR仿真

文章目录 一、模型的处理二、TDR仿真2.1 修改求解模式2.2增加求解设置 三、查看仿真结果3.1 查看TDR结果3.2 查看S参数结果 四、结果分析4.1上升时间tr对仿真的影响 附&#xff1a;工程链接 在上一讲中&#xff0c;主要是通过观察S参数确定via的优化是否达到目标。但S参数只能看…

k8s 安全机制

k8s的安全机制&#xff1a; 核心&#xff1a;分布式集群管理工具&#xff0c;就是容器编排&#xff0c;安全机制的核心&#xff1a;API server 作为整个集群内部通信的中介&#xff0c;也是外控控制的入口。实验的安全机制都是围绕api server来进行设计&#xff1a; 请求api资…

利用nginx宝塔免费防火墙实现禁止国外IP访问网站

本章教程&#xff0c;主要介绍&#xff0c;如何利用nginx宝塔面板中的插件免费防火墙&#xff0c;实现一键禁止国外IP访问网站。 目录 一、安装宝塔插件 二、 开启防火墙 一、安装宝塔插件 在宝塔面板中的软件商店&#xff0c;搜索防火墙关键词&#xff0c;找到Nginx免费防火…

在线教育系统开发:构建现代化学习平台

随着科技的迅速发展&#xff0c;在线教育系统在教育领域扮演着越来越重要的角色。本文将深入探讨在线教育系统的开发过程&#xff0c;涉及关键技术和代码实现。 技术选型 在开始开发之前&#xff0c;我们首先需要选择适合在线教育系统的技术栈。以下是一些常见的技术选项&am…

代码随想录算法训练营29期|day31 任务以及具体安排

理论基础 关于贪心算法&#xff0c;你该了解这些&#xff01; 题目分类大纲如下&#xff1a; #算法公开课 《代码随想录》算法视频公开课 (opens new window)&#xff1a;贪心算法理论基础&#xff01; (opens new window),相信结合视频再看本篇题解&#xff0c;更有助于大家…

大创项目推荐 题目:基于LSTM的预测算法 - 股票预测 天气预测 房价预测

文章目录 0 简介1 基于 Keras 用 LSTM 网络做时间序列预测2 长短记忆网络3 LSTM 网络结构和原理3.1 LSTM核心思想3.2 遗忘门3.3 输入门3.4 输出门 4 基于LSTM的天气预测4.1 数据集4.2 预测示例 5 基于LSTM的股票价格预测5.1 数据集5.2 实现代码 6 lstm 预测航空旅客数目数据集预…