当前位置： 首页 > news >正文

Cesium数据加载

news 2026/2/10 12:06:33

文章目录

  • 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].

相关文章：

Cesium数据加载

文章目录 0.引言1.影像加载1.1Bing地图1.2天地图1.3ArcGIS在线地图1.4高德地图1.5OSM影像1.6MapBox影像 2.OGC地图服务2.1WMS2.2WMTS2.3TMS 3.GeoJSON数据加载4.KML数据加载5.TIFF数据加载6.点云数据加载7.地形数据加载7.1在线地形数据加载7.2本地地形数据加载 8.倾斜摄影模型数…...

编程日记 2024/1/30 14:24:09

【C++历练之路】探秘C++三大利器之一——多态

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#x1f354;: 在计算机科学的广袤领域中&#xff0c;C多态性是一门令人着迷的技术艺术&#xff0c;它赋予我们的代码更强大的灵活性和可维护性。想象一下&#xff0c;你正在构建一个程序&#xff0c;需要适应不断…...

编程日记 2024/1/30 14:22:06

业务逐字稿

1.WEB端旅游线路发布模块 旅游公司在Web端点击新增旅游线路按钮&#xff0c;浏览器请求发送到Nginx&#xff0c;Nginx反向代理到网关&#xff0c;网关去找微服务&#xff0c;微服务实现具体的旅游线路发布功能 旅游公司工作人员在Web端点击新增旅游线路按钮&#xff0c;浏览器…...

编程日记 2024/1/30 14:20:04

微服务舞台上的“三步曲“：Spring Cloud 服务注册、服务发现与服务调用

在当今软件开发的舞台上&#xff0c;微服务架构已然成为引领潮流的主角。而在这场微服务的大戏中&#xff0c;Spring Cloud 以其强大的工具集成为关键演员&#xff0c;为我们呈现了一个完美的"三步曲"&#xff1a;服务注册、服务发现与服务调用。 第一步&#xff1a…...

编程日记 2024/1/30 14:19:04

中间件

在 Java 开发中&#xff0c;中间件是指位于应用程序和操作系统之间的软件层&#xff0c;它提供了一些通用的功能和服务&#xff0c;帮助简化开发和部署过程&#xff0c;提高系统的可靠性、性能和可扩展性。 常见的 Java 中间件包括&#xff1a; 1.应用服务器&#xff08;Appl…...

编程日记 2024/1/30 14:16:01

4D毫米波雷达——ADCNet 原始雷达数据 目标检测与可行驶区域分割

前言 本文介绍使用4D毫米波雷达&#xff0c;基于原始雷达数据&#xff0c;实现目标检测与可行驶区域分割&#xff0c;它是来自2023-12的论文。 会讲解论文整体思路、输入分析、模型框架、设计理念、损失函数等&#xff0c;还有结合代码进行分析。 论文地址&#xff1a;ADCNe…...

编程日记 2024/1/30 14:13:59

「优选算法刷题」：提莫攻击

一、题目 在《英雄联盟》的世界中&#xff0c;有一个叫 “提莫” 的英雄。他的攻击可以让敌方英雄艾希&#xff08;编者注&#xff1a;寒冰射手&#xff09;进入中毒状态。 当提莫攻击艾希&#xff0c;艾希的中毒状态正好持续 duration 秒。 正式地讲&#xff0c;提莫在 t 发…...

编程日记 2024/1/30 14:12:58

260：vue+openlayers 通过webgl方式加载矢量图层

第260个 点击查看专栏目录 本示例介绍如何在vue+openlayers中通过webgl方式加载矢量图层。在做这个示例的时候，采用vite的方式而非webpack的方式。这里的基础设置需要改变一下。 ol的版本7.5.2或者更高。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果 文…...

编程日记 2024/1/30 14:10:55

Android 8.1 相关修改

一些常用修改&#xff0c;做个记录&#xff0c;为了节约时间和防止踩坑。 一、修改默认中文 修改位置&#xff1a; build\make\target\product\full_base.mk 修改内容&#xff1a; # Put en_US first in the list, so make it default. PRODUCT_LOCALES : zh_…...

编程日记 2024/1/30 14:09:54

EG-2121CA (晶体振荡器 低抖动表面声波(SAW)振荡器)

在当今高度数字化的时代&#xff0c;稳定的信号传输显得尤为重要。若要实现信号的稳定传输&#xff0c;晶体振荡器必不可少。EG-2121CA&#xff0c;它是一款低抖动表面声波&#xff08;SAW&#xff09;振荡器设计的产品&#xff0c;凭借其出色的频率范围、稳定的电源电压和可靠…...

编程日记 2024/1/30 14:07:52

Django知识随笔

目录 1.如何再ajax中传输post数据&#xff1f; 2.在form表单中使用jquery序列化&#xff0c;input框过多。 1.如何再ajax中传输post数据&#xff1f; 在ajax传递的那个网址&#xff0c;会调用你路由的视图函数&#xff0c;在视图函数上面加一句 csrf_exempt 。写上之后会有提…...

编程日记 2024/1/30 14:06:51

Facebook 广告帐户：多账号运营如何防止封号？

Facebook目前是全球最受欢迎的社交媒体平台之一&#xff0c;拥有超过27亿活跃用户。因此&#xff0c;它已成为个人和企业向全球受众宣传其产品和服务的重要平台。 然而&#xff0c;Facebook 制定了广告商必须遵守的严格政策和准则&#xff0c;以确保其广告的质量和相关性&…...

编程日记 2024/1/30 14:04:50

酷开会员 | 用酷开系统点亮多彩休闲时刻

现代人的休闲方式多种多样&#xff0c;随着科技的发展和生活水平的提高&#xff0c;人们有了更多的选择。而电视&#xff0c;作为一个休闲娱乐的载体&#xff0c;在生活中扮演着重要的角色。 以前&#xff0c;电视是家家户户休闲娱乐的重要组成部分&#xff0c;现在&#xff0…...

编程日记 2024/1/30 14:03:49

分配土地（100%用例）C卷(JavaPythonC++Node.jsC语言)

从前有个村庄，村民们喜欢在各种田地上插上小旗子，旗子上标识了各种不同的数字。某天集体村民决定将覆盖相同数字的最小矩阵形的土地的分配给为村里做出巨大贡献的村民，请问，此次分配士地，做出贡献的村民中最大会分配多大面积? 输入描述: 第一行输入m和n，m代表村子的土…...

编程日记 2024/1/30 14:02:48

电源的纹波

【电源的“纹波”到底是什么&#xff1f;-哔哩哔哩】 https://b23.tv/28IIbtU 严谨的说&#xff0c;只有中间这种是纹波。 两类电源 线性电源通过自动调节内部电阻&#xff0c;修改输出电压&#xff0c;可以降低输入电压的波动。开关电源的原理&#xff0c;就会产生纹波。纹波…...

编程日记 2024/1/30 14:00:46

85.网游逆向分析与插件开发-物品使用-物品使用的逆向分析与C++代码的封装

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;项目需求与需求拆解-CSDN博客 码云地址&#xff08;ui显示角色数据 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;453dd83d54140d2e1ee65c9…...

编程日记 2024/1/30 13:59:45

JVM系列——垃圾收集器

对象存活判断 引用计数法 在对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器值就加一&#xff1b;当引用失效时&#xff0c;计数器值就减一&#xff1b;任何时刻计数器为零的对象就是不可能再被使用的。 可达性分析算法 通过一系列称为“GC …...

编程日记 2024/1/30 13:56:42

那些年与指针的情仇（二）---二级指针指针与数组的那点事函数指针

关注小庄 顿顿解馋(&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e; 欢迎回到我们的大型纪录片《那些年与指针的爱恨情仇》&#xff0c;在本篇博客中我们将继续了解指针的小秘密&#xff1a;二级指针&#xff0c;指针与数组的关系以及函数指针。请放心食用&a…...

编程日记 2024/1/30 13:55:41

APPCRASH 文件管理器不停重启问题记录 （最后reinstall解决）以及重装后到底会怎样

问题诱因&#xff1a; 时间 2024年1月 &#xff08;严重怀疑&#xff0c;但无法实锤&#xff09; 是我不知道什么时候&#xff08;应该是近期&#xff09;安装了powertoy的预览版&#xff0c;系统不知道什么时候&#xff08;也应该是这两天&#xff09;安装了微软出品的PC man…...

编程日记 2024/1/30 13:46:32

导出excel功能，前端的解决方案

import { utils, writeFileXLSX } from xlsx // 导出excel async exportToExcel() {// 获取要导出的业务数据&#xff08;这里的接口自己改成实际使用的接口&#xff09;const res await getRuleListAPI(this.params)// 表头英文字段key&#xff08;这里的数据改成接口返回的实…...

编程日记 2024/1/30 13:40:27

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/8 4:53:03

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2026/2/6 5:47:08

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

编程新知 2026/2/10 10:58:14

Java中HashMap底层原理深度解析：从数据结构到红黑树优化

一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一&#xff0c;是基于哈希表的Map接口非同步实现。它允许使用null键和null值&#xff08;但只能有一个null键&#xff09;&#xff0c;并且不保证映射顺序的恒久不变。与Hashtable相比&#xff0c;Hash…...

编程新知 2026/2/9 20:17:32

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...

编程新知 2026/2/4 18:27:37