<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>谷歌地圖離線切片</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.67/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,body,#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="text/javascript">
var globemap = new Cesium.SingleTileImageryProvider({
//url : './images/global.jpg'
url : 'http://localhost:8080/tiles/googleworld/0/0/0.png'
});
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: true, //是否顯示動畫控件(左下方那個)
baseLayerPicker: true, //是否顯示圖層選擇控件
geocoder: true, //是否顯示地名查找控件
timeline: true, //是否顯示時間線控件
sceneModePicker: true, //是否顯示投影方式控件
navigationHelpButton: false, //是否顯示幫助信息控件
infoBox: true, //是否顯示點擊要素之後顯示的信息
imageryProvider: globemap
});
var layers = viewer.imageryLayers;
/*var gaode = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url : "GlobalTMS/satellite/{z}/{x}/{y}.jpg",
fileExtension : "jpg",
}));*/
var gaode1 = layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url : "http://localhost:8080/tiles/googleworld/{z}/{x}/{y}.png",
fileExtension : "png",
}));
flytoLocation("116.38","39.90");
function flytoLocation(lon,lat){
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(lon,lat,30000),
orientation : {
heading : Cesium.Math.toRadians(20.0),
pitch : Cesium.Math.toRadians(-85.0),
roll : 0.0
}
});
}
</script>
</body>
<script>
</script>
</html>
瓦片地圖下載器用的是全能電子地圖下載器3.0，下載完瓦片地圖放到Tomcat 服務器下即可。
參考：
1.Cesium離線地圖加載
https://blog.csdn.net/wt346326775/article/details/89488246
2.Getting Started | cesium.com
https://cesium.com/docs/tutorials/getting-started/