Raster Tile

L7 加载栅格瓦片地图的时候需要在 source 中对瓦片服务进行解析，同时配置瓦片服务的请求参数。

data

瓦片 URL,仅支持 EPSG 3857 的坐标系，支持 TMS、WMS、WMTS 协议

TMS

通过 url 模板传参，参与需要使用 {}

1-4 服务器编码 {1-4}
z 缩放等级
x 瓦片 x 坐标
y 瓦片 y 坐标

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

WMS

url 模板参数

1-x 服务器编码 {1-4}
bbox 瓦片范围模板 BBOXSR 只支持 4326,IMAGESR 只支持 3857

示例

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 模板参数

1-4 服务器编码 {1-4}

WMTS 两种方式

使用方式和 TMS 相似，可以拼接 url 字符串
通过 parser 参数 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 必选 default: rasterTile 固定值为 rasterTile

tileSize `number`

number 可选 default: 256 请求瓦片的大小 optional

zoomOffset

number 可选 default: 0 瓦片请求瓦片层级的偏移

maxZoom

number 可选 default: 0

瓦片最大缩放等级 20

minZoom 瓦片最小缩放等

number 可选 default: 2-

extent `[number, number, number, number]` 地图显示范围

number[] 可选不限制:_

dataType

string 可选 default: image

瓦片数据类型

image 图像类型
arraybuffer 数据类型如 geotiff

format func,

func 可选 _default:

数据栅格时使用,用于将栅格数据格式化为标准数据,自定义数据处理函数

wmtsOptions wmsts 配置

Object 可选 default: null

layer

string 必选 default: img 图层

tileMatrixset

string 必选 default: w

format

string 必选 default: tiles 服务类型

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],
    },
  },
);

瓦片 source 属性

tileset

瓦片数据集，可以获取当前视野内的瓦片信息, 瓦片状态

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

属性

isLoaded

瓦片是否加载完成

currentTiles

当前瓦片对象

currentZoom

当前瓦片层级；这里的曾经和map 的缩放层级不相等

事件

tiles-load-start

地图拖动，需要加载新的瓦片时触发

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

tiles-load-finished

所有需要加载的瓦片资源加载完成后触发

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

瓦片 source 方法

reloadAllTile

重新加载瓦片，会重新请求数据，适用与动态瓦片场景，如瓦片数据发生了更新，或者瓦片Join 的数据发生了更新

source.reloadAllTile();

reloadTilebyId

重新加载特定瓦片的

参数

z 缩放等级
x 瓦片 x 坐标
y 瓦片 y 坐标

source.reloadTileById(z, x, y);

reloadTileByExtent

根据经纬度范围更新瓦片

参数

extent: 经纬范围 [minLng, minLat, maxLng, maxLat]
zoom: 缩放等级

reloadTileByLnglat

根据经纬度更新瓦片，经纬度坐标转换成瓦片坐标更新

lng 经度
lat 纬度
zoom 缩放等级

source.reloadTileByLnglat(112, 30, 10);