Cesium离线切片地图服务器搭建和代码实现

最新推荐文章于 2024-07-31 09:35:45 发布

☆L↑H★

最新推荐文章于 2024-07-31 09:35:45 发布

阅读量1.3k

点赞数

转载：https://blog.csdn.net/wo_buzhidao/article/details/82763079

Cesium离线切片地图服务器搭建和代码实现

地图数据

我对地图下载器可以下载的几种地图数据进行测试发现可以直接制作离线地图服务器的切片有以下几种：

高德卫星地图 ，下载切片只能下载到第8级，有文字标注；
天地图墨卡托版，下载切片国内可以下载到18级，国外大概到12级左右；
ArcGIS瓦片地图 ，可以下载0-16级，无文字标注；
Google卫星切片地图 可以加载0-19级，有文字标注；
Google地形切片地图 可以加载0-19级，无文字标注，无山脉起伏，有山体等高线，城市区域显示为等高线；
ArcGIS离线动态地图切片服务 ，可以对数据样式进行控制，成本较高；
GeoServer 发布地图服务数据，可以对数据样式进行控制，开源免费。

搭建地图服务器

上述数据中ArcGIS数据发布出来即可使用。
GeoServer发布的地图服务器在Cesium加载数据不出现，需做跨域处理：
1）cesium加载资源都不允许跨越，所有需要配置下需要跨越的站点，如geoserver等，
跨域设置：
2）将cors-filter-2.4.jar和java-property-utils-1.9.1.jar，两个jar包文件放入geoserver目录下webapps\geoserver\web-inf\lib中。

3）打开geoserver目录下webapps\geoserver\web-inf中的web.xml

4）添加过滤器代码：
```
<filter>
 	<filter-name>CORS</filter-name>
 	<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
 </filter>

    
    1
2
3
4
```
5）添加过滤器路由代码：

<filter-mapping>
            <filter-name>CORS</filter-name>
            <url-pattern>/*</url-pattern>
    </filter-mapping>

  
  1
2
3
4

6）添加完毕后，重启geoserver

7）如果目录中存在maven，需要在pom.xml中，添加

<dependency>
	<groupId>com.thetransactioncompany</groupId>
	<artifactId>cors-filter</artifactId>
	<version>[ version ]</version>
</dependency>

  
  1
2
3
4
5

以上方法参考网友说明，具体作者忘记，如有侵权联系删除内容
3. 使用Tomcat搭建虚拟路径也需要对Tomcat做以上跨域处理，处理后制作Tomcat虚拟服务地址参考tomcat创建虚拟路径

Jar包地址

加载离线谷歌瓦片地图数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>谷歌地图离线切片</title>
	<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
	<script src="../Build/Cesium.js"></script>
	</head>
	<body style="margin: 0px;padding: 0px;">
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
	   	var viewer = new Cesium.Viewer('cesiumContainer',{ 
	   		//需要进行可视化的数据源的集合
           animation: false, //是否显示动画控件
            shouldAnimate : true,
            homeButton: false, //是否显示Home按钮
            fullscreenButton: false, //是否显示全屏按钮
            baseLayerPicker: false , //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            requestRenderMode: true, //启用请求渲染模式
            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
            //fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
		    imageryProvider:new Cesium.createTileMapServiceImageryProvider({  
		     url : '127.0.0.1:8080/googleTile',
		     credit:"googleTile",
			})
		});
		var layers = viewer.imageryLayers;  
		viewer._cesiumWidget._creditContainer.style.display="none";  //屏蔽loge广告
	</script>
</html>