mapbox离线部署概述

主要过程

1. 下载mapbox字体文件和图标文件

2. 下载行政区划shapefile文件

3. 到geoserver官网下载对应geoserver版本的输出扩展格式文件Vector Tiles，解压后将文件拷贝到geoserver\webapps\geoserver\WEB-INF\lib目录下
   
   

4. 用geoserver将shapefile文件发布成服务（相关文章很多，这里不详细写）

5. 有时候存在geoserver跨域问题，主要解决方案

   （1）下载官方的cors压缩包，解压得到两个jar包，两个jar包文件放入geoserver目录下web容器的类库文件夹中(GeoServer 2.11.1\webapps\geoserver\WEB-INF\lib)
   
   （2）打开geoserver目录(或者其他服务端项目)下web容器的中的xml配置文件(GeoServer 2.11.1\webapps\geoserver\WEB-INF\web.xml)，增加一个过滤器

	<filter>
	    <filter-name>cros</filter-name>
	    <filter-class>com.mapsharp.server.SimpleCORSFilter</filter-class>
	</filter>
	<filter-mapping>
	    <filter-name>cros</filter-name>
	    <url-pattern>/*</url-pattern>
	</filter-mapping>

（3）将com文件夹放入classes中(添加过滤器代码和过滤器路由代码)，com文件夹中包含一个SimpleCORSFilter.class文件

7. 加载出离线地图
   

核心代码

添加geoserver发布的底图服务图层。

var mapStyle = {
            version: 8,
            sprite: "http://localhost:8085/sprite/sprite",
            glyphs: "http://localhost:8085/glyphs/fonts/{fontstack}/{range}.pbf",
            sources: {
              "osm-tiles": {
                type: "vector",
                scheme: "tms",
                tiles: [
                  "http://localhost:8082/geoserver/cite/wms?service=WMS"
                  "&version=1.1.0"
                  "&request=GetMap"
                  "&layers=cite:worldCountry3857"
                  "&styles=&bbox={bbox-epsg-3857}"
                  "&width=256&height=256"
                  "&srs=EPSG:3857"
                  "&format=application/x-protobuf;type=mapbox-vector"
                  "&TRANSPARENT=TRUE"
                ],
                tileSize: 512
              }
            },
            layers: [
            	// 背景颜色
              {
                id: "background",
                type: "background",
                paint: {
                  "background-color": 'black'
                },
                interactive: true
              },
               // 行政区划图层
              {
                id: "basemap",
                type: "fill",
                source: "osm-tiles",
                "source-layer": "worldCountry3857",
                paint: {
                  "fill-outline-color": "#666666", // 行政区划线颜色
                  "fill-color": "#3C3C3C", // 图层颜色
                  "fill-opacity": 0.8, // 透明度
                  "fill-antialias": true,
                  "fill-translate-anchor": 'viewport'
                },
              },
              // 地名标注图层
              {
                id: "basemapSymbol",
                type: "symbol",
                source: "osm-tiles",
                "source-layer": "worldCountry3857", // "osmtiles" "wordCountry"
                layout: {
                  "visibility": "visible",
                  "text-field": ["get", "NAME"],
                  "text-font": ['Open Sans Semibold,Arial Unicode MS Bold'], // 本地字体目录中要有此文件夹
                  "text-size": 12,
                  "symbol-avoid-edges": true, // 是否避免文本超出切片边界
                  "text-allow-overlap": false, // 是否允许文本重叠
                  "text-optional": false
                },
                paint: {
                  "text-color": "#AAAAAA", // 地名文本颜色
                },
                interactive: true
              },
            ]
    }

    var map = new mapboxgl.Map({
      container: 'map',
      style: mapStyle,
      zoom: 3,
      center: [112.08, 27.54]
    });