添加矢量瓦片

loading

注意

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

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

1. 使用方法

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

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

// 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. 矢量瓦片渲染代码不太成熟，仅实现基本功能。