目录
零、准备阶段
环境需求：JDK1.8
apache-tomcat-7.0.88
geoserver.war
插件geoserver-2.13-SNAPSHOT-vectortiles-plugin（提供切片功能）
一、JDK的安装
将我们下载的JDK
，打开进行安装，将所有的安装结果放到自己创建的某个文件夹中（方便管理）。
接下来，对JDK进行相关的环境配置。
(1)新建->变量名"JAVA_HOME"，变量值"C:\Java\jdk1.8.0_05"（即JDK的安装路径）
(2)编辑->变量名"Path"，在原变量值的最后面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”
(3)新建->变量名“CLASSPATH”,变量值“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”
安装配置检验。
Win+R à cmd 进入控制台，输入java javac java -version三个指令，若上述操作均正确，则返回正确的指令。
二、Tomcat的配置
1.在系统变量区点击新建按钮，填写变量名为CATALINA_HOME，变量值为自定义的Tomcat的目录的环境变量
2.在系统变量区点击新建按钮，填写变量名为CATALINA_BASE，变量值为自定义的Tomcat的目录的环境变量
3.找到系统变量中的Path，在Path中新增“%CATALINA_HOME%\lib;%CATALINA_HOME%\bin”的环境变量，注意“;”分号；
启动Tomcat，Tomcat/bin/startup.bat，待出现xxxms后，在浏览器中打开localhost：8080，若显示
三、geoserver的安装
将geoserver.war放在webapps中，重启Tomcat，Tomcat便会自动对geoserver.war进行解压。
输入:8080/geoserver/web/ 便进入geoserver主页。
用户名 admin 密码 geoserver
登录后，主页面如下，相关功能见图所示。
点击图层——选择一个我们想看到的图层，如果想将上传的数据变为
这四种格式，需要将插件geoserver-2.13-SNAPSHOT-vectortiles-plugin放在D:\apache-tomcat-7.0.88\webapps\geoserver\WEB-INF\lib中，重启Tomcat即可。
四、利用geoserver发布shapefile数据
点击【数据存储】--【添加新的数据存储】
新建数据源—选择shapefile，点击后
点击保存后，点击发布
进入设置页面，边框根据“从数据中计算”---“Compute from native bounds”，接下来可以在Tile Caching中设置矢量切片的格式。
五、查看我们发布的数据
Tile Caching
Select One可以查看我们选择的数据类型，同时可以预览。Seed/Truncate可以对数据进行切片并缓存到本地。
点击Submit即可完成切片的缓存（根据数据的多少，缓存速度由此决定。）
六、离线地图的部署
geoserver三种矢量切片的获取方式
1.通过tms服务的方式获取矢量切片，
2.示例中还有wmts服务的方式获取矢量切片。
3.以及通过XYZ：{z}/{x}/{y}.pbf直接访问切片虚拟目录获取切片。（离线瓦片）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>本地地图搭载</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='css/VGEs.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'your token';//mapbox官网可以获取
var simple = {
"version": 8,
"sources": {
"composite": {
"url": "mapbox://mapbox.mapbox-terrain-v2",
"type": "vector"
},
"os": {
"type": "vector",
"scheme": "tms",
"tiles": [
":8088/geoserver/gwc/service/tms/1.0.0/myspace:mylayer@EPSG:900913@pbf/{z}/{x}/{y}.pbf"
]
},
},
"sprite": "your sprite",
"glyphs": "your glyphs",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#ffffff"
},
"interactive": true
},
{
"id": "c",
"type": "fill",
"source": "os",
"source-layer": "bou2_4p",
"paint": {
"fill-color": "#C1FFC1",
"fill-opacity": 0.5
},
"interactive": true
},
{
"id": "mountain",
"type": "line",
"source": "os",
"source-layer": "m",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#3031ff",
"line-width": {
"stops": [[6,0.4], [8, 0.6], [13, 1]]
},
"line-dasharray": [1.5,3]
}
},
{
"id": "province",
"type": "symbol",
"source": "os",
"source-layer": "province",
"layout": {
"symbol-spacing": 1000,
"text-field": "{NAME}",
"text-size": 15,
"text-font": ["SimHei Regular"],
"text-padding":2
},
"paint": {
"text-color": "rgb(100,82,45)",
"text-halo-color": "rgb(255,255,255)",
"text-halo-width": 1,
},
"interactive": true
}
]
};
var map = new mapboxgl.Map({
container: 'map',
style: simple,
zoom:3.5,
center: [114.08,29.54]
});
</script>
</body>
</html>
七、效果展示
效果展示和上述步骤写成的不太一样，下图是在mapbox的地图上叠加了自己发布的服务。上述步骤可以做成简单的本地地图，基本的步骤上述都有了，点线面数据加载格式都有了，如果想要做的更精细，建议看看api。
