Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层
Geoserver 发布图层并开启缓存Cesium 使用 Geoserver Rest 方式叠加 WMTS 缓存图层Cesium 使用标准方式叠加 WMTS 缓存图层Cesium 使用标准方式叠加 WMS 图层Cesium 使用标准方式叠加 WFS 图层Cesium 使用标准方式叠加 KML 数据Cesium 叠加 WMTS 缓存图层完整代码在线示例最近有需求，Cesium 叠加 Geoserver 缓存瓦片，也就是 WMTS 瓦片，本来想直接使用 Tomcat 之类的容器发布瓦片服务再叠加。
后来发现Geoserver 的瓦片规则有点不太常规，因此还是使用 Geoserver 的服务来叠加缓存图层。
按老规矩，肯定要试一大堆错的，大概试了小半天，终于搞好了，这里放上成功代码，提供广大 GISer 借鉴参考。
PS：百度搜索的一大堆博客大哥，估计试都没试，直接互相复制的，出现问题几乎都差不多！！！
本示例介绍两种叠加方式，Geoserver Rest 方式和标准 WMTS 方式，推荐使用标准 WMTS 方式加载。
另外，介绍加载WMS、WFS、KML资源图层，因加载容易，不做过多介绍，详见代码及示例。
再次强调一下：style : ‘raster’ 是必填的！很多博客都没设置参数，导致加载失败！！！
再次强调一下：地址必须设置正确，尤其是{TileMatrixSet}:{TileMatrix}！很多博客都错误，导致加载失败！！！
再次强调一下：地址必须设置正确，尤其是geoserver/gwc/rest/wmts/cite:xintai18！很多博客都错误，导致加载失败！！！
Geoserver 发布图层并开启缓存
图层发布教程，网上一大堆，具体可以参考：
GeoServer发布tiff格式地图并进行切片缓存
GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)
Cesium 使用 Geoserver Rest 方式叠加 WMTS 缓存图层
这里强调一下，注意看注释说明，style : ‘raster’是必填的 必填的 必填的！
Rest 方式叠加，需要放开权限，否则访问瓦片需要填写用户密码，这里不做详细介绍，感兴趣的可以研究一下。
这里放上核心代码：
let layerWMTSRest = new Cesium.WebMapTileServiceImageryProvider({// 注意：gwc/rest/wmts 很多博客这里提供的是错的// 注意：{TileMatrixSet}/{TileMatrixSet}:{TileMatrix} 中间有冒号url : 'http://openlayers.vip/geoserver/gwc/rest/wmts/cite:xintai18/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',// 注意：这里的样式参数必须有style : 'raster',// 图层不传也可以layer:'cite:xintai18',// 必填format: "image/png",// 选填maximumLevel: 21,// 必填tileMatrixSetID : 'EPSG:900913'});
Cesium 使用标准方式叠加 WMTS 缓存图层
推荐使用标准方式加载 WMTS 图层。
核心代码：
let layerWMTS = new Cesium.WebMapTileServiceImageryProvider({url: 'http://openlayers.vip/geoserver/gwc/service/wmts',layer: layerName || 'cite:xintai18',// 强调一下，参数必填，很多博客忽略，导致不能加载成功！style: 'raster',format: 'image/png',tileMatrixSetID: 'EPSG:900913',tileMatrixLabels: TileMatrixLabels});
Cesium 使用标准方式叠加 WMS 图层
cesium 加载 WMS 还是很常见的，这里就不多赘述了，见代码：
// 添加geoserver发布的wms数据let layerWMS = new Cesium.WebMapServiceImageryProvider({url: "http://openlayers.vip/geoserver/cite/wms",// 必填layers: "cite:xintai18",parameters: {transparent: true,format: "image/png",srs: "EPSG:4326",// 非必填styles: "",},});
Cesium 使用标准方式叠加 WFS 图层
cesium 加载 WFS 还是很常见的，这里就不多赘述了，见代码：
// 这里使用 cesium加载也可以// 因为本身数据为 4490，cesium不识别，因此使用 ajax 请求之后再渲染$.ajax({//点 坐标：曼哈顿url: "http://openlayers.vip/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&outputFormat=application%2Fjson",cache: false,async: true,success: function (data) {// 原数据是 4490，这里替换为4326，否则 cesium 不识别4490，会报错data.crs.properties.name = data.crs.properties.name.replace("EPSG::4490", "EPSG::4326")var datasource = Cesium.GeoJsonDataSource.load(data);viewer.dataSources.add(datasource);},error: function (data) {alert("error");}});
Cesium 使用标准方式叠加 KML 数据
cesium 加载 KML 还是很常见的，这里就不多赘述了，见代码：
// 添加geoserver发布的kml数据var options = {camera : viewer.scene.camera,canvas : viewer.scene.canvas,clampToGround: true //开启贴地};viewer.dataSources.add(Cesium.KmlDataSource.load('http://openlayers.vip/geoserver/cite/ows?' +'service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&' +'outputFormat=application%2Fvnd.google-earth.kml%2Bxml', options)).then(function(dataSource){// Get the array of entitiesvar neighborhoodEntities = dataSource.entities.values;for (var i = 0; i < neighborhoodEntities.length; i++) {var entity = neighborhoodEntities[i];if (Cesium.defined(entity.polygon)) {// 设置颜色entity.polygon.material = Cesium.Color.fromRandom({red : 0.1,maximumGreen : 0.5,minimumBlue : 0.5,alpha : 0.6});}}
Cesium 叠加 WMTS 缓存图层完整代码
注意：示例代码的资源需要换成自己的。
<!DOCTYPE html><html lang="en"><head><!-- Use correct character set. --><meta charset="utf-8"/><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>Cesium 加载天地图示例</title><script src="./Cesium.js"></script><script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script><style>@import url(./Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script></head><body><button id="wmts" onClick="WMTS()">添加标准 WMTS 图层</button><button id="restWMTS" onClick="restWMTS()">添加 Geoserver Rest WMTS 图层</button><br/><br/><button id="wms" onClick="WMS()">添加 Geoserver WMS 图层</button><button id="wfs" onClick="WFS()">添加 Geoserver WFS 图层</button><button id="kml" onClick="KML()">添加 Geoserver KML 图层</button><div id="cesiumContainer"></div><script>// 这个 tk 只能在本域名下使用var token = '2b7cbf61123cbe4e9ec6267a87e7442f';// 服务域名var tdtUrl = 'https://t{s}./';// 服务负载子域var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];var viewer = new Cesium.Viewer('cesiumContainer', {shouldAnimate: true,selectionIndicator: true,animation: false, //动画homeButton: false, //home键geocoder: false, //地址编码baseLayerPicker: false, //图层选择控件timeline: false, //时间轴fullscreenButton: false, //全屏显示infoBox: false, //点击要素之后浮窗sceneModePicker: false, //投影方式 三维/二维navigationInstructionsInitiallyVisible: false, //导航指令navigationHelpButton: false,//帮助信息selectionIndicator: false, // 选择imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({//影像底图url: "http://t{s}./img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + token,subdomains: subdomains,layer: "tdtImgLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式show: true})});viewer.imageryLayers.addImageryProvider(new window.Cesium.WebMapTileServiceImageryProvider({//影像注记url: "http://t{s}./cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + token,subdomains: subdomains,layer: "tdtCiaLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: true}));// // 叠加国界服务var iboMap = new window.Cesium.UrlTemplateImageryProvider({url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,subdomains: subdomains,tilingScheme: new window.Cesium.WebMercatorTilingScheme(),maximumLevel: 10});viewer.imageryLayers.addImageryProvider(iboMap);// geoserver叠加参数，EPSG码+图层等级const TileMatrixLabels = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2','EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6','EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10','EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14','EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18'];// WMTS图层对象let layerWMTS;// 标准 WMTS 方式叠加function WMTS(layerName) {// cesium加载// 注意：所有参数必填layerWMTS = layerWMTS || viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: 'http://openlayers.vip/geoserver/gwc/service/wmts',layer: layerName || 'cite:xintai18',// 强调一下，参数必填，很多博客忽略，导致不能加载成功！style: 'raster',format: 'image/png',tileMatrixSetID: 'EPSG:900913',tileMatrixLabels: TileMatrixLabels}));// 调节图层显隐layerWMTSRest && (layerWMTSRest.show = false);layerWMTS && (layerWMTS.show = true);// 定位flyToRectangle();}// WMTSRest图层let layerWMTSRest;// Rest 方式叠加图层function restWMTS() {//cesium加载layerWMTSRest = layerWMTSRest || viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// 注意：gwc/rest/wmts 很多博客这里提供的是错的// 注意：{TileMatrixSet}/{TileMatrixSet}:{TileMatrix} 中间有冒号url: 'http://openlayers.vip/geoserver/gwc/rest/wmts/cite:xintai18/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',// 注意：这里的样式参数必须有style: 'raster',// 图层不传也可以layer: 'cite:xintai18',// 必填format: "image/png",// 选填maximumLevel: 21,// 必填tileMatrixSetID: 'EPSG:900913'}));layerWMTSRest && (layerWMTSRest.show = true);layerWMTS && (layerWMTS.show = false);flyToRectangle();}let layerWMS;// WMS 图层function WMS() {// 添加geoserver发布的wms数据layerWMS = layerWMS || viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({url: "http://openlayers.vip/geoserver/cite/wms",// 必填layers: "cite:xintai18",parameters: {transparent: true,format: "image/png",srs: "EPSG:4326",// 非必填styles: "",},}));layerWMS && (layerWMS.show = true);layerWMTS && (layerWMTS.show = false);layerWMTSRest && (layerWMTSRest.show = false);flyToRectangle();}// WFS 图层// 这里演示北京区县数据function WFS() {// 这里使用 cesium加载也可以// 因为本身数据为 4490，cesium不识别，因此使用 ajax 请求之后再渲染$.ajax({//点 坐标：曼哈顿url: "http://openlayers.vip/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&outputFormat=application%2Fjson",cache: false,async: true,success: function (data) {// 原数据是 4490，这里替换为4326，否则 cesium 不识别4490，会报错data.crs.properties.name = data.crs.properties.name.replace("EPSG::4490", "EPSG::4326")var datasource = Cesium.GeoJsonDataSource.load(data);viewer.dataSources.add(datasource);},error: function (data) {alert("error");}});layerWMS && (layerWMS.show = false);layerWMTS && (layerWMTS.show = false);layerWMTSRest && (layerWMTSRest.show = false);// 定位到北京flyToRectangle([Cesium.Cartesian3.fromDegrees(115.44302181271966,39.251141782491445,0),Cesium.Cartesian3.fromDegrees(117.34365657834466,40.997967954366445,0),]);}// KML 图层// 这里演示北京区县数据function KML() {var options = {camera : viewer.scene.camera,canvas : viewer.scene.canvas,clampToGround: true //开启贴地};viewer.dataSources.add(Cesium.KmlDataSource.load('http://openlayers.vip/geoserver/cite/ows?' +'service=WFS&version=1.0.0&request=GetFeature&typeName=cite%3At_county_new&maxFeatures=50&' +'outputFormat=application%2Fvnd.google-earth.kml%2Bxml', options)).then(function(dataSource){// Get the array of entitiesvar neighborhoodEntities = dataSource.entities.values;for (var i = 0; i < neighborhoodEntities.length; i++) {var entity = neighborhoodEntities[i];if (Cesium.defined(entity.polygon)) {// 设置颜色entity.polygon.material = Cesium.Color.fromRandom({red : 0.1,maximumGreen : 0.5,minimumBlue : 0.5,alpha : 0.6});}}// 定位到北京flyToRectangle([Cesium.Cartesian3.fromDegrees(115.44302181271966,39.251141782491445,0),Cesium.Cartesian3.fromDegrees(117.34365657834466,40.997967954366445,0),]);});layerWMS && (layerWMS.show = false);layerWMTS && (layerWMTS.show = false);layerWMTSRest && (layerWMTSRest.show = false);// 定位到北京flyToRectangle([Cesium.Cartesian3.fromDegrees(115.44302181271966,39.251141782491445,0),Cesium.Cartesian3.fromDegrees(117.34365657834466,40.997967954366445,0),]);}/*** @description: 飞行定位到一个矩形* @return {*}*/function flyToRectangle(RectangleCD) {// 添加定位信息RectangleCD = RectangleCD || [Cesium.Cartesian3.fromDegrees(104.15528644354428,30.752166584535513,0),Cesium.Cartesian3.fromDegrees(104.27206271917905,30.827572468324576,0),];var rec = Cesium.Rectangle.fromCartesianArray(RectangleCD);var boundingSphere = Cesium.BoundingSphere.fromRectangle3D(rec);viewer.camera.flyToBoundingSphere(boundingSphere, {duration: 5,complete: function () {},offset: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-90),range: 0.0,},});}</script></body></html>
在线示例
Cesium 加载 Geoserver 服务资源：Cesium Geoserver
参考博客：
Cesium 加载GeoServer WMTS 服务（请求地址不对）
Cesium入门（五）：加载WMTS瓦片地图服务（没问题）
Cesium加载Geoserver发布的wmts服务（参数不对，有去除权限设置，未试验）
cesium 加载 geoserver wmts 服务（缺少地址，无法参考）
cesium加载geoserver的各种服务（地址不对）
cesium 加载geoserver 的 wms、wmts、wfs、wcs服务（没问题，版本旧）
Cesium入门9 - Loading and Styling Entities - 加载和样式化实体
Cesium中加载Geojson
Cesium中读取本地KML或KMZ文件
