Vector 矢量瓦片

Introduction

L7The vector tile layer reuses the data visualization capabilities of ordinary layers and supports data mapping of layer styles. Currently, vector tiles support point, line, surface, mask and other layers.

Other configuration items of the tile layer are consistent with the basic layers PointLayer, Linelayer, and PolygonLayer.

options

sourceLayer

string required

Only valid for vector layers, used to set the data source of vector layers.

🌟 Generally, there are multiple layers of data in the data returned by the vector service, and we need to select from them.

const layer = new PointLayer({
  sourceLayer: 'city',
});

featureId

string optional *default:*automatic numbering

Only vector layers take effect, used to specify the encoding of vector layers.id。

🌟 EncodingidUsed when a layer is highlighted.

const layer = new PointLayer({
  featureId: 'id',
});

source(url: string, option: IOption)

The data source of vector tiles needs to pass in the tile service of vector data and the corresponding configuration parameters.

url

The data service path supports single service and multi-service writing.

• Single server Requests tile data from one server.
• Multiple servers request tile data for the same service from multiple servers.
  • Use braces to request the setting of multiple servers, such as{1-3}、{a-c}。

// single server
const source = new Source('http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...})

//Multiple servers
const source = new Source('http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {...} )

source option

Regarding the configuration parameters, what we need to relate to is the insideparserParameters corresponding to the field.

const source = new Source(url, {
  parser: {...}
})

type UpdateTileStrategy = 'realtime' | 'overlap' | 'replace';

🌟 Recommended reuse of vector tiles Source

const vectorSource = new Source(
  'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
  {
    parser: {
      type: 'mvt',
      maxZoom: 9,
      extent: [-180, -85.051129, 179, 85.051129],
    },
  },
);
// 复用
layer1.source(vectorSource);
layer2.source(vectorSource);