添加 GeoJSON 数据

loading

对 GeoJSON 数据支持，使用 three-tile 的 geojson 加载器插件完成。

1. 使用方法

1. 注册 geojson 加载器：tt.registerImgLoader(new plugin.GeoJSONLoader());
2. 声明 geojson 数据源
3. 设置 TileMap.imgSource 为 geojson 数据源

// 1. 注册geosjon数据加载器：
tt.registerImgLoader(new plugin.GeoJSONLoader());
// 2. 声明一批geojson数据源
const geojsonCountry = new plugin.GeoJSONSource({
    url: "https://geo.datav.aliyun.com/areas_v3/bound/100000.json",
    style: {
        stroke: true,
        color: "red",
        weight: 2,
        shadowColor: "black",
        shadowBlur: 3,
        shadowOffset: [2, 2],
    },
});

const geojsonProvince = new plugin.GeoJSONSource({
    url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    style: {
        stroke: true,
        fill: false,
        color: "Aqua",
        weight: 1,
    },
});

const geojsonCity = new plugin.GeoJSONSource({
    url: "https://geo.datav.aliyun.com/areas_v3/bound/100000_full_city.json",
    style: {
        stroke: true,
        color: "yellow",
        weight: 0.6,
    },
});

const geojsonCityPoint = new plugin.GeoJSONSource({
    url: "../map/city.geojson",
    minLevel: 4,
    style: {
        fill: true,
        fillColor: "white",
        fillOpacity: 1,
        color: "black",
        weight: 1,
        shadowBlur: 3,
        shadowColor: "black",
    },
});

// 3. 设置TileMap.imgSource为geojson数据源
map.imgSource = [new plugin.ArcGisSource(), geojsonProvince, geojsonCountry, geojsonCity, geojsonCityPoint];

// 4. 调用TileMap.reload()重新加载
// map.reload(); //（V0.11.0 后不需要调用）

2. geojson 地图样式配置

/**
 *  瓦片绘图样式，参考leaflet的path样式定义
 */
export interface VectorStyle {
    // 绘制线条与否
    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;
    // 文本偏移量
    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];
}