Vector 矢量瓦片

简介

L7 的矢量瓦片图层复用了普通图层的数据可视化能力，支持对图层的样式进行数据映射。目前矢量瓦片支持了点、线、面、掩模等图层

瓦片图层其他配置项和基础图层 PointLayer、Linelayer、PolygonLayer 保持一致

options

sourceLayer

string required

只有矢量图层生效，用于设置矢量图层的数据源。

🌟 一般矢量服务返回的数据中存在多个图层的数据，我们需要从中进行选取。

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

featureId

string optional default: 自动数字编号

只有矢量图层生效，用于指定矢量图层的编码 id。

🌟 编码 id 用于在图层高亮时使用。

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

source(url: string, option: IOption)

矢量瓦片的数据源需要传入矢量数据的瓦片服务以及对应的配置参数。

url

数据服务的路径支持单服务和多服务的写法。

• 单服务器 向一台服务器请求瓦片数据。
• 多服务器 向多台服务器请求同一份服务的瓦片数据。
  • 使用大括号的写法请求设置多服务器，如 {1-3}、{a-c}。

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

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

source option

关于配置参数我们需要关系的是里面 parser 字段对应的参数。

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

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

🌟 矢量瓦片推荐复用 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);