第四章 接入发布的离线瓦片

系列文章目录

第一章 开源GIS选型

第二章 Geoserver+QGis开发环境搭建

第三章 Openlayers前端接入

第四章 接入发布的离线瓦片

摘要

geoserver发布瓦片数据、geoserver发布地图服务、geoserver教程、瓦片数据发布

前言

前面我们已经完成发布安徽省矢量地图数据的demo，但是实际项目中我么肯定不止这么干的，这样地图元素太少了，更多的做法是，最底层发布google地图、百度地图或者高德地图的瓦片数据，然后在其上面再发布我们的自定义矢量图层。那么我们就来看看如何发布离线的矢量数据吧，由于项目需求，发布的是离线瓦片。

一、瓦片数据的下载

我这边有下好的google地图0-11级的瓦片数据，在我的资源里，免费的中国瓦片数据

下载链接为：

https://download.csdn.net/download/abu935009066/13110524

二、瓦片数据发布

这里我是踩了大坑了，之前一直以为要用geoserver去发布瓦片数据，搞了很久都没成功，后来才发现用tomcat或者nginx去发布这些静态图片资源就搞定了，具体步骤如下：

1. 瓦片目录复制到tomcat的wabapps目录下,如下图所示：
   注意目录名称和位置
   

2. 注意跨域配置是否开启，如果未开启，可能地图加载不出来，解决方法具体参见：

   第三章 Openlayers前端接入中的跨域配置。

三、前端接入

核心代码

      var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({               // 使用XYZ的方式加载
                source: new ol.source.XYZ({
                    url: 'http://localhost:8080/china/{z}/{x}/{y}.png'
                })
              })
            ],
            view: new ol.View({
			center: [117.20914, 31.80354],
			  projection: 'EPSG:4326',
              zoom: 7
            })
        });

效果图:

总结

• 发布离线瓦片数据，不是用geoserver发布的，而是tomcat或者nginx发布，结合着openlayers接入瓦片数据。

---

分享个很好用的免费工具
可以爬省市的矢量数据，以及各大厂商google、百度、高德等的瓦片数据
关注公众号【Java厂面试官】,回复：地图下载器

QQ群【837324215】
关注我的公众号【Java厂面试官】，回复：架构、资源等关键词（更多关键词，关注后注意提示信息）获取更多免费资料。

公众号也会持续输出高质量文章，和大家共同进步。