基于Cesium + Tomcat 的离线瓦片地图加载

最新推荐文章于 2024-07-23 13:39:33 发布

Jerry_liu20080504

最新推荐文章于 2024-07-23 13:39:33 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： cesium tomcat 瓦片地图地图下载器

本文链接：https://blog.csdn.net/Jerry_liu20080504/article/details/105112144

版权

JavaScript 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

<!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/