Mapbox之栅格矢量瓦片

1. 瓦片(Tile)介绍

地图瓦片(Tile)分为两种，栅格瓦片和矢量瓦片，瓦片就是一块一块的正方形格子，按一定的顺序拼在一起便能看到全球的内容或者某一片区域的内容。

栅格瓦片：每一块都是图片，可以是.png，也可以是.jpg。常见的大小有256*256，512*512。

矢量瓦片：每一块都是由点、线、面构造的矢量数据，mapbox的示例中有一个.mvt的道路瓦片https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt。矢量瓦片的大小不确定。

2. 栅格瓦片的加载

栅格瓦片的Source为：RasterSource
栅格瓦片的Layer(也就是渲染效果)为：RasterLayer

RasterSource的构造可以是直接由瓦片链接构造，也可以由TileSet对象构造。

2.1 由瓦片链接"mapbox://mapbox.u8yyzaor"构造

RasterSource source = new RasterSource("chicago-source", "mapbox://mapbox.u8yyzaor", 512);
mapboxMap.getStyle().addSource(source);

2.2 由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);

3. 矢量瓦片的加载

矢量瓦片的Source为：VectorSource
矢量瓦片的Layer(也就是渲染效果)可以是点线面对应的所有Layer:

渲染的矢量数据类型	渲染效果
点	SymbolLayer、CircleLayer
线	LineLayer
面	FillLayer

VectorSource的构造和RasterSource一样，可以直接由瓦片链接构造，也可以由TileSet对象构造。但是它的构造方法不能传入瓦片的大小，至于为什么就不清楚了。

3.1 由瓦片链接构造

VectorSource source = new VectorSource("states", "mapbox://mapbox.us_census_states_2015");
mapboxMap.getStyle().addSource(source);

3.2 由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);

构造好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);