添加矢量瓦片

loading

注意

本示例矢量瓦片数据来自 (https://api.maptiler.com/tiles) , 地图数据不代表本人观点

矢量瓦片支持，使用 three-tile 的 mvt 加载器插件完成。支持 MapBox 的 pbf 格式矢量瓦片。

1. 使用方法

使用方法与加载 geojson 数据类似

1. 注册 mvt 加载器：tt.registerImgLoader(new plugin.MVTLoader());
2. 声明 矢量瓦片 数据源
3. 设置 TileMap.imgSource 为 geojson 数据源
4. 调用 TileMap.reload()重新加载

// 1. 注册矢量瓦片MVT加载器
tt.registerImgLoader(new plugin.MVTLoader());

// 2. 声明矢量瓦片数据源
export const mvtTest = new plugin.MVTSource({
  url: "https://api.maptiler.com/tiles/v3-openmaptiles/{z}/{x}/{y}.pbf?key=4SbPVVkPORGgXetw2vsf",
  style: {
    layer: {
      boundary: {
        color: "blue",
        weight: 1,
        shadowBlur: 3,
        shadowColor: "black",
        // fill: true,
        // dashArray: [3, 3],
      },
      transportation: {
        // visible: false,
        color: "yellow",
        weight: 1,
        shadowBlur: 2,
        shadowColor: "black",
      },
      water: {
        fill: true,
        color: "red",
        weight: 0,
        fillColor: "skyblue",
        fillOpacity: 0.3,
      },
      // place: {
      //     minLevel: 6,
      //     fill: true,
      //     fillColor: "white",
      //     fillOpacity: 1,
      //     shadowBlur: 2,
      //     shadowColor: "black",
      // },
    },
  },
});

map.imgSource = [new plugin.ArcGisSource(), mvtTest];
// map.reload();//（V0.11.0 后不需要调用）

2. 样式配置

/**
 *  瓦片绘图样式，参考leaflet的path样式定义
 */
export interface VectorStyle {
  // 最小层级
  minLevel?: number;
  // 最大层级
  maxLevel?: number;
  // 绘制线条与否
  stroke?: boolean | undefined;
  // 线条颜色
  color?: string | undefined;
  // 线条宽度
  weight?: number | undefined;
  // 线条透明度
  opacity?: number | undefined;
  // 线条样式，参考https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dasharray
  dashArray?: number[] | undefined;
  // 线条偏移量，参考https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dashoffset
  dashOffset?: string | undefined;
  // 是否填充区域
  fill?: boolean | undefined;
  // 填充颜色
  fillColor?: string | undefined;
  // 文本样式，参考https://developer.mozilla.org/docs/Web/CSS/font
  font?: string;
  // 文本颜色
  fontColor?: string;
  // 文本偏移量，相对于左上角的位置 [x, y]
  fontOffset?: [number, number];
  // 文本字段，默认为properties.name
  textField?: string;
  // 填充透明度
  fillOpacity?: number | undefined;
  // 填充规则，参考https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule
  fillRule?: CanvasFillRule | undefined;
  // 发光模糊程度
  shadowBlur?: number;
  // 发光颜色
  shadowColor?: string;
  // 发光偏移量
  shadowOffset?: [number, number];
}

3. 注意事项

1. 不兼容 mapbox 的样式配置，mapbox 的瓦片样式配置实在太复杂，无法兼容，瓦片渲染为自行实现。
2. 国内找不到稳定的矢量瓦片数据源，只能用老外的，生产环境不能用它，尽量自己切瓦片。
3. 矢量瓦片渲染代码不太成熟，仅实现基本功能。