Map tiles: detailed explanation of vector tiles and grid tiles

Map tiles ： Detailed explanation of vector tiles and grid tiles

Why do you need tiles ：

Map caching technology ： The performance requirements of map services are getting higher and higher ; Caching technology greatly improves the performance of map services ; Caching technology reduces the pressure on the server , Dynamic plotting is no longer required ; Map cache or tile map can support many clients to browse concurrently
Because map caching technology is an effective way to access maps , So there are two cache categories under it ： Vector tiles and grid tiles

The difference between vector tiles and grid tiles （ The former is vector , Grid ）

Map tiles ： Organize and define vector data through different description files , Analyze the data in real time on the client to complete the drawing Draw the fixed PNG Or a collection of pictures in other formats
Tile volume ： Small ; Big
Tile generation efficiency high ; low
Renewal mechanism flat ; flat
Style modification Support ; I won't support it
Front end technical requirements high (HTML5); low
Show the difference There are differences ; No difference
maturity commonly ; high
Application scenarios special （ Mobile 、 Style modification ）; widely
Management mechanism flat ; flat

Grid tiles

Grid tiles ： Every piece is a picture , It can be .png, It can also be .jpg. Common sizes are 256256,512512
Cache construction is carried out through the idea of generating sliced files in layers and blocks , And from the coordinate system 、 Map 、 The layer style and data range consider the cache update problem

Type of grid tiles ：
UGCV5： Stored in local disk directory file
MongoDB： Store in MongoDB distributed file system

Grid tiles are mapbox Application in ：RasterSource（ Grid tile Source）,RasterLayer（ Grid tile Layer( That is, rendering effect )）,RasterSource The structure of can be directly linked by tiles , Also can be TileSet Object construction

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

 from TileSet structure , There should be {
    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);

 Will be constructed RasterSource Then you can add the corresponding RasterLayer：

//  Corresponding to RasterSource
RasterLayer layer = new RasterLayer("chicago", "chicago-source");
mapboxMap.getStyle().addLayer(layer);

//  Corresponding to TileSet Tectonic RasterSource
RasterLayer layer1 = new RasterLayer("web-map-layer", "web-map-source");
mapboxMap.getStyle().addLayer(layer1);

Vector tiles

Vector tiles ： Each piece is made of dots 、 Line 、 Vector data of surface construction
Structure of vector tiles ：Fonts Font files used by vector tiles ,Sprites Icon related style content ,Styles Style description file ,Tiles Vector tile data .mvt,Sci Meta information file of vector tile
Coordinate system of vector tile ： apply WGS84 Mars coordinate system ,2000 Geodetic coordinate system, etc
Advantages of vector tiles ：
（1） Efficient creation ; Fast transmission and rendering ;
（2） Data and style are independent , You can change the drawing scheme ;
（3） High display quality , It can well support high-resolution display ;
（4） Precut graph （ Multi process ）
（5） Dynamic generation （iServer）
（6） Real time cut （HBase）

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

 from TileSet structure , There should be {
    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);

 Well structured VectorSource Then you can add the corresponding render layer , Here, we should pay particular attention to which rendering layer is used by setSourceLayer Data determination in ：

//  Corresponding to VectorSource
FillLayer statesJoinLayer = new FillLayer("states-join", "states");
statesJoinLayer.setSourceLayer("states"); //  The parameter value is determined by the data , Not necessarily with source Of id identical 
statesJoinLayer.withProperties(
      fillColor(match(toNumber(get("STATE_ID")),
        rgba(0, 0, 0, 1), stops))
);
mapboxMap.getStyle().addLayer(statesJoinLayer);

//  Corresponding to TileSet Tectonic VectorSource
LineLayer lineLayer = new LineLayer("mapillary.layer.line", "mapillary.source");
lineLayer.setSourceLayer("mapillary-sequences"); //  The parameter value is determined by the data , Not necessarily with source Of id identical 
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);