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

Mapbox之栅格矢量瓦片相关推荐

mapbox tippecanoe切矢量瓦片参数设置和注意事项
tippecanoe生成矢量切片步骤在这篇帖子中有详细介绍windows下使用tippecanoe把GeoJSON制作成矢量切片vectortile_十月的秋的专栏-CSDN博客下面介绍下tippe ...
iclient加载标准规范的矢量瓦片mvt服务
作者:yyy 前言 MVT全称是Mapbox Vector Tile,是Mapbox标准的矢量切片.SuperMap iClient产品很好的支持了MVT矢量瓦片在Web端的加载,但在平常的使用中基本 ...
Mapbox矢量瓦片pbf文件信息解析
Mapbox由于配合其矢量瓦片pbf格式文件,有突出的渲染性能,被很多公司和开发者所使用.矢量瓦片的格式有很多种,其中pbf格式是一种二进制文件,直接把数据信息压缩位二进制了. 矢量瓦片优势主要优势 ...
地图瓦片：矢量瓦片和栅格瓦片详解
地图瓦片:矢量瓦片和栅格瓦片详解为什么需要瓦片: 地图缓存技术:地图服务的性能需求越来越高:缓存技术大大提高了地图服务的性能:缓存技术降低了服务器端压力,不在需要进行动态出图:地图缓存或瓦块地图可以 ...
CAD/DWG图Web网页可视化技术之栅格和矢量瓦片
CAD/DWG图Web网页可视化技术之栅格和矢量瓦片 - vjmap - 博客园背景在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到,实现CAD/DWG图形Web展示的思路一般为 ...
Mapbox加载天地图CGCS2000矢量瓦片地图服务
1.背景最近在做天地图的项目,要基于MapBox添加CGCS2000矢量切片数据,但是 Mapbox 只支持web 墨卡托(3857)坐标系的数据.Github有专业用户修改了mapbox-gl的相 ...
mapbox pbf矢量瓦片读取(附pbf瓦片文件qt可视化工具源码)
矢量瓦片官方文档:https://docs.mapbox.com/vector-tiles/specification/ 读取pbf 简易demo地址:https://github.com/tlglo ...
ArcGIS API for JavaScript 4.x加载Mapbox在线矢量瓦片服务（weixin公众号【图说GIS】）
前言大家都知道,Mapbox在矢量瓦片这个领域做的很好.那么如何使用ArcGIS API 4.x加载,经过研究,将解决方案总结如下. 分析问题查询ArcGIS JS API // Typical ...
栅格瓦片与矢量瓦片 ----概念
栅格瓦片概念:将地图中所有图层都切分并存储为栅格格式的地图瓦片. 优点:使用最广,技术成熟矢量瓦片概念:矢量图层以矢量瓦片的形式进行切分和存储. 优点:创建效率高,传输和渲染速度快栅格瓦片与矢 ...