Raster Tile

View MarkdownEdit this page

When L7 loads the raster tile map, it needs to besourceParse the tile service and configure the request parameters of the tile service.

data

Tile URL, only supports EPSG 3857 coordinate system, supports TMS, WMS, WMTS protocols

TMS

Pass parameters through url template, required to participate{}

1-4 server encoding {1-4}
z zoom level
x tile x coordinate
y tile y coordinate

const url = 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}';

WMS

url template parameters

1-x server encoding {1-4}
bbox tile range template BBOXSR only supports 4326, IMAGESR only supports 3857

Example

const url =
  'https://pnr.sz.gov.cn/d-suplicmap/dynamap_1/rest/services/LAND_CERTAIN/MapServer/export?F=image&FORMAT=PNG32&TRANSPARENT=true&layers=show:1&SIZE=256,256&BBOX={bbox}&BBOXSR=4326&IMAGESR=3857&DPI=90';

WMTS

url template parameters

1-4 server encoding {1-4}

WMTS two ways

The usage is similar to TMS, you can splice url strings
Set service parameters through parser parameter wmtsOptions

const url1 = 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
const layer1 = new RasterLayer({
  zIndex: 1,
}).source(url1, {
  parser: {
    type: 'rasterTile',
    tileSize: 256,
    wmtsOptions: {
      layer: 'img',
      tileMatrixset: 'w',
      format: 'tiles',
    },
  },
});

parser

type

string required default: rasterTileThe fixed value israsterTile

tileSize `number`

number Optional default: 256Request tile size optional

zoomOffset

number Optional *default:*0Tile request tile level offset

maxZoom

number Optional *default:*0

Maximum tile zoom level20

minZoom tile minimum zoom, etc.

number Optional default: 2-

extent `[number, number, number, number]`Map display range

number[] Optionalnot limited:_

dataType

string Optional default: image

Tile data type

image image type
arraybuffer data type such as geotiff

format function,

func Optional_default:

Used when data raster is used to format raster data into standard data and customize data processing functions

wmtsOptions wmsts configuration

Object Optional default: null

layer

string required default: imgLayers

tileMatrixset

string required default: w

format

string required default: tilesService type

const rasterSource = new Source(
  'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  {
    parser: {
      type: 'rasterTile',
      tileSize: 256,
      zoomOffset: 0,
      extent: [-180, -85.051129, 179, 85.051129],
    },
  },
);

Tile source attribute

tileSet

Tile data set, which can obtain tile information and tile status within the current field of view

const source = layer1.getSource();
const tileSet = source.tileset;

Attributes

isLoaded

Whether the tiles are loaded

currentTiles

Current tile object

currentZoom

The current tile level; where once is not equal to the zoom level of the map

event

tiles-load-start

Map dragging, triggered when new tiles need to be loaded

tileSet.on('tiles-load-start', () => {
  console.log('tile start');
});

tiles-load-finished

Triggered after all tile resources that need to be loaded are loaded.

tileSet.on('tiles-load-finished', () => {
  console.log('tile finished');
});

Tile source method

reloadAllTile

Reloading the tile will re-request the data, which is suitable for dynamic tile scenarios, such as the tile data is updated, or the data of the tile Join is updated.

source.reloadAllTile();

reloadTilebyId

Reload a specific tile

parameter

z zoom level
x tile x coordinate
y tile has coordinates

source.reloadTileById(z, x, y);

reloadTileByExtent

Update tiles based on latitude and longitude range