添加 GeoJSON 数据

loading

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

1. 使用方法

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

// 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: "../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. 样式配置

/**
 *  瓦片绘图样式，参考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];
}