mapbox离线部署概述

离线部署概述"/>

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]});