网站首页 > 基础教程 正文
最近有需求,Cesium 叠加 Geoserver 缓存瓦片,也就是 WMTS 瓦片,本来想直接使用 Tomcat 之类的容器发布瓦片服务再叠加。
后来发现 Geoserver 的瓦片规则有点不太常规,因此还是使用 Geoserver 的服务来叠加缓存图层。
按老规矩,肯定要试一大堆错的,大概试了小半天,终于搞好了,这里放上成功代码,提供广大 GISer 借鉴参考。
PS:百度搜索的一大堆博客大哥,估计试都没试,直接互相复制的,出现问题几乎都差不多!!!
本示例介绍两种叠加方式,Geoserver Rest 方式和标准 WMTS 方式,推荐使用 标准 WMTS 方式 加载。
另外,介绍加载 WMS、WFS、KML 资源图层,因加载容易,不做过多介绍,详见代码及示例。
再次强调一下:地址必须设置正确,尤其是{TileMatrixSet}:{TileMatrix}!很多博客都错误,导致加载失败!!!
再次强调一下:style : ‘raster’ 是必填的!很多博客都没设置参数,导致加载失败!!!
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 entities
var 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. -->
<meta
name="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 = "https://hm.baidu.com/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}.tianditu.gov.cn/';
// 服务负载子域
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}.tianditu.com/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}.tianditu.com/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 entities
var 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文件
猜你喜欢
- 2024-12-19 管理系统-UniApp开发相关技巧及注意点
- 2024-12-19 前端图片延迟加载详细讲解 梦见擦窗户框
- 2024-12-19 如何使用 JavaScript 导入和导出 Excel XLSX
- 2024-12-19 XMLHttpRequest VS. Fetch, 谁才是 2019 最适合的 AJAX 技术?
- 2024-12-19 学习下ECharts 异步加载数据 echarts按需加载
- 2024-12-19 web前端框架Vue基础一 前端开发vue框架
- 2024-12-19 @HR,常见 IT 招聘术语大全(建议收藏)
- 2024-12-19 百度工程师教你玩转设计模式(单例模式)
- 2024-12-19 Shiny Web开发从入门到放弃 web开发视频教程
- 2024-12-19 手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)