地图瓦片：矢量瓦片和栅格瓦片详解_矢量瓦片和栅格瓦片区别

地图瓦片：矢量瓦片和栅格瓦片详解

为什么需要瓦片：

地图缓存技术：地图服务的性能需求越来越高；缓存技术大大提高了地图服务的性能；缓存技术降低了服务器端压力，不在需要进行动态出图；地图缓存或瓦块地图可以支持众多客户端并发浏览
因为地图缓存技术是一种有效访问地图的方式，所以出现其下的两种缓存分类：矢量瓦片和栅格瓦片

矢量瓦片与栅格瓦片区别（前为矢量，后为栅格）

地图瓦片：将矢量数据通过不同的描述文件来组织和定义，在客户端实时解析数据完成绘制 预先在服务端绘制好固定的PNG或其他格式的图片集合
瓦片体量：小； 大
生成瓦片效率 高； 低
更新机制 持平； 持平
样式修改 支持； 不支持
前端技术要求 高(HTML5)； 低
显示差异 有差异； 无差异
成熟度 一般； 高
应用场景 特殊（移动端、风格修改）； 广泛
管理机制 持平； 持平

栅格瓦片

栅格瓦片：每一块都是图片，可以是.png，也可以是.jpg。常见的大小有256256，512512
通过分层分块生成切片文件的思路进行缓存构建，并且从坐标系、地图、图层风格以及数据范围等方面考虑了缓存更新问题

栅格瓦片的类型：
UGCV5：存储于本地磁盘目录文件
MongoDB：存储于MongoDB分布式文件系统

栅格瓦片在mapbox中的应用：RasterSource（栅格瓦片的Source），RasterLayer（栅格瓦片的Layer(也就是渲染效果)），RasterSource的构造可以是直接由瓦片链接构造，也可以由TileSet对象构造

由瓦片链接"mapbox://mapbox.u8yyzaor"构造
RasterSource source = new RasterSource("chicago-source", "mapbox://mapbox.u8yyzaor", 512);
mapboxMap.getStyle().addSource(source);
1
2
3

由TileSet构造，链接中要有{z}/{x}/{y}
TileSet tileSet = new TileSet("tileset", new String[]{"https://img.nj.gov/imagerywms/Natural2015?bbox={"
                + "bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:"
                + "3857&transparent=true&width=256&height=256&layers=Natural2015"});
tileSet.setMinZoom(0);
tileSet.setMaxZoom(14);
RasterSource source1 = new RasterSource("web-map-source", tileSet, 256);
mapboxMap.getStyle().addSource(source1);

将构造好RasterSource后便可添加对应的RasterLayer：

// 对应由瓦片链接构造的RasterSource
RasterLayer layer = new RasterLayer("chicago", "chicago-source");
mapboxMap.getStyle().addLayer(layer);

// 对应由TileSet构造的RasterSource
RasterLayer layer1 = new RasterLayer("web-map-layer", "web-map-source");
mapboxMap.getStyle().addLayer(layer1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

矢量瓦片

矢量瓦片：每一块都是由点、线、面构造的矢量数据
矢量瓦片的结构：Fonts 矢量瓦片使用的字体文件，Sprites 图标相关风格内容，Styles 风格描述文件，Tiles 矢量瓦片数据.mvt，Sci 矢量瓦片的元信息文件
矢量瓦片的坐标系：适用WGS84火星坐标系，2000大地坐标系等
矢量瓦片的优势：
（1）创建效率高；传输和渲染速度快；
（2）数据和风格样式独立，可更改配图方案；
（3）高显示质量，能够很好地支持高分辨率显示屏；
（4）预切图（多进程）
（5）动态生成（iServer）
（6）实时切图（HBase）

由瓦片链接构造
VectorSource source = new VectorSource("states", "mapbox://mapbox.us_census_states_2015");
mapboxMap.getStyle().addSource(source);
1
2
3

由TileSet构造，链接中要有{z}/{x}/{y}
TileSet mapillaryTileset = new TileSet("2.1.0", "https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt");
mapillaryTileset.setMinZoom(0);
mapillaryTileset.setMaxZoom(14);
VectorSource source1 = new VectorSource("mapillary.source", mapillaryTileset);
mapboxMap.getStyle().addSource(source1);
1
2
3
4
5
6

构造好VectorSource后便可添加对应的渲染层，这里要尤为注意渲染层使用哪种由setSourceLayer中的数据决定：

// 对应由瓦片链接构造的VectorSource
FillLayer statesJoinLayer = new FillLayer("states-join", "states");
statesJoinLayer.setSourceLayer("states"); // 参数值由数据决定，并不是一定和source的id相同
statesJoinLayer.withProperties(
      fillColor(match(toNumber(get("STATE_ID")),
        rgba(0, 0, 0, 1), stops))
);
mapboxMap.getStyle().addLayer(statesJoinLayer);

// 对应由TileSet构造的VectorSource
LineLayer lineLayer = new LineLayer("mapillary.layer.line", "mapillary.source");
lineLayer.setSourceLayer("mapillary-sequences"); // 参数值由数据决定，并不是一定和source的id相同
lineLayer.setProperties(
        lineCap(Property.LINE_CAP_ROUND),
        lineJoin(Property.LINE_JOIN_ROUND),
        lineOpacity(0.6f),
        lineWidth(2.0f),
        lineColor(Color.GREEN)
);
mapboxMap.getStyle().addLayer(lineLayer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22