文章目录

前言
Geoserver 安装
- 前期工作
- - JDK的安装
  - 安装 GeoServer
GeoServer 的使用
- 进入 GeoServer 界面
- 使用 GeoServer 发布矢量切片离线地图
使用 Mapbox-GL 调用离线矢量切片地图
- 【踩坑总结】
- - 【踩到的第一个坑】跨域问题—报错：有CORS的错误提示
  - 【踩到的第二个坑】无法预览Pbf

前言

我们实验室最近需要做一个地图可视化的系统，因此涉及到使用 GeoServer + maobox-gl 搭建离线地图服务，但是我以前未接触过这部分，在搭建服务的过程中遇到了太多的坑。网络上教程千篇一律，很多步骤都是一笔带过，所以从零开始的我一路上磕磕碰碰，很多问题遇到了但是在网上根本找不到解决方案，只能自己慢慢摸索，在试错上花费了大量的时间，因此想通过此博客给以后有需要的同学一些帮助，避开我遇到的坑，并且成功搭建好离线地图服务！

Geoserver 安装

前期工作

JDK的安装

GeoServer 是基于 Java 的软件，所以运行时需要 JDK 的支持，(PS:我使用的 GeoServer 是2.13版本的，所以得下载 JDK8（Java SE 8u201），如果你要用其他版本的 GeoServer，你需要下载该版本对应的 JDK 版本。

Oracle 官网上下载 JDK8 即可 JDK8下载链接

安装 GeoServer

访问 GeoServer 官方网站：点击进入官方下载页面
点进去之后直接下载的是最新的版本，要下以前的旧版本点击 Archived 就能看到。

选择好你要下载的版本，我是用的是 Windows Installer进行安装，记得顺便把下面对应的矢量切片插件Vector Tiles下载好，后面要用（没有矢量切片插件是不能发布矢量切片地图的）！

下载好安装文件之后双击安装文件，这里是选择 GeoServer 的安装路径，然后一路 next 到下一页面

到这个页面，选择你已安装的 JDK 或 JRE 的路径

下一步是设置用户名和密码，默认使用用户名“admin”和密码“geoserver” 选择默认目录和端口8080。注意，如果本机默认安装了Tomcat服务器，GeoServer的端口号不要设置成默认的8080，避免与Tomcat的端口号冲突，造成不必要的麻烦。（PS: 可以设置为8001）

完成设置，最后点击Install进行安装。

GeoServer 的使用

进入 GeoServer 界面

在进入 GeoServer 前需要开启 GeoServer服务，点击Start GeoServer 然后会出现一个命令行界面，注意：使用GeoServer 作为 WMS 服务器期间，不要关闭此窗口

开启 GeoServer 服务后，回到上面的开始菜单栏点击 GeoServer Web Admin Page 就能进入 GeoServer, 之后输入前面安装时设置的账号和密码就能成功进入GeoServer 界面。

使用 GeoServer 发布矢量切片离线地图

要使用 GeoServer 发布矢量切片离线地图，首先你需要将刚才下载好的矢量瓦片插件压缩包里的内容放进 GeoServer 安装路径下的 ./WEB-INF/lib 里面。

然后准备好你的图层数据，可以是单独的shp文件，也可以是多个，或者是连接 PostSQL 的数据，这里仅演示单个shp的发布。

1. 首先添加新的工作区，Name 和命名空间URL 最好一致，勾选默认工作区。

2. 完成第一步后向工作区中添加新的数据存储，

数据存储如果是多个图层就选择第一个红框，单个shp就选择第二个框框

然后数据源名称我一般和工作区一致，连接参数是指你的数据所在位置，字符集如果有中文的话选择GBK 或者 UTF-8

然后就可以开始图层的发布了

3. 图层的发布，根据你的 shp 的坐标参考系进行设置，按顺序设置完之后，点击该页面上方的 Tile Caching，进行下一步设置

这里需要勾选 application/vnd.mapbox-vector-tile 才能发布矢量切片地图，勾选后点击提交即可

4. 成功发布之后下一步点击左边栏Tile Caching 选择 Tile Layers 找到刚才自己发布的图层，点击Seed/Truncate

点击之后跳转到该页面进行切图到本地的设置，任务数量自选，Format 要选择红框内容，点击两次 submit,便完成切图。
之后返回到 Tile Layers 的那个页面点击 Select One 以 pbf格式对图层进行预览

离线矢量切片地图的发布到这里就结束了，下一步是使用 Mapbox-GL 调用地图并进行渲染。

使用 Mapbox-GL 调用离线矢量切片地图

Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分，其中还包括 Mapbox Mobile，它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。

PS: 你或许会需要在 MapBox 注册并申请一个 Access Token
申请Acess Taken

详情可参考MapBox调用GeoServer发布的矢量瓦片服务WMTS、TMS
这里主要讲一下 MapBox 调用 TMS 服务的代码：
MapBox API 是在线引用的可参考官方文档

<head><meta charset='utf-8'/><title>mapbox添加geoserver发布的矢量瓦片</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.1.1/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet'/><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style>
</head>

后面这部分是地图的调用，需要注意的是

mapboxgl.accessToken = 'pk.eyJ1Ijoibmlja3p4dyIsImEiOiJja3hlYXI3NDQxYjhmMnVtZnRveTlxZGwwIn0.0Ude29mpR0-A0Z2Xf3PD2A';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v10',zoom: 12,// 图层的中心点center: [113.1553,23.0632]
});map.on('load', function() {map.addLayer({"id": "building_a","type": "fill","source": {"type": "vector",// TMS 调用需要加上这行"scheme":"tms",// URL 是 GeoServer 中 TMS 的服务链接，选择墨卡托投影的那个我这里是900913// "tiles": ["URL/{z}/{x}/{y}.pbf"],"tiles": ["http://localhost:8080/geoserver/gwc/service/tms/1.0.0/OSM%3Abuilding_a@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],},// source-layer 是你 Geoserver 图层的名称即 上面 URL 的 title"source-layer": "building_a","paint": {"fill-color":"#088","fill-opacity":0.8}});
});

调用成功之后预览是这个样子滴！

到这里Geoserver + mapbox-gl 搭建离线矢量切片地图服务就告一段落了，后面就是使用 JS 对地图各个图层进行渲染，具体可参考官方文档。有问题欢迎大家评论区交流！

【踩坑总结】

【踩到的第一个坑】跨域问题—报错：有CORS的错误提示

跨域问题的解决参考，GeoServer解决跨域问题（CORS）亲测有用

【踩到的第二个坑】无法预览Pbf

解决方案：
GeoServer 的安装我是使用是2.13的版本，我一开始使用的是2.20版本，然后我在发布服务之后遇到了pbf格式文件无法预览的问题（我暂时还没找到问题出在哪里，有知道的伙伴可以在评论说一声），所以我卸载了2.20版本装了个2.13版本。

【GeoServer + MapBox-GL 搭建离线矢量切片地图服务】多图详细流程 + 踩过的坑总结相关推荐

开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
开源方案搭建可离线的精美矢量切片地图服务-6.Mapbox之.pbf字体库
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
开源方案搭建可离线的精美矢量切片地图服务-1.开篇（附成果演示地址）
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
开源方案搭建可离线的精美矢量切片地图服务-7.Arcgis Pro企业级应用
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
基于mapbox搭建可离线的矢量切片地图服务-3.Mapbox个性化地图定制入门
作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...
基于mapbox搭建可离线的矢量切片地图服务-1.开篇（附成果演示地址）
作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...
Mapbox加载天地图CGCS2000矢量瓦片地图服务
1.背景最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据.Github有专业用户修改了mapbox-gl的相 ...
geoserver 3_使用GeoServer 和 mapbox-gl 搭建离线地图服务
视频体验知乎视频www.zhihu.com 软件与数据 mapbox-gl 安装: https://www.npmjs.com/package/mapbox-glwww.npmjs.com ma ...

【GeoServer + MapBox-GL 搭建离线矢量切片地图服务】多图详细流程 + 踩过的坑总结