Skip to content

19. 显示行政区域地图

loading

仅显示某行政区域地图,可以制作一个带洞的行政区域 GeoJSON 遮罩,用它盖住不需要显示的区域。

与显示 GeoJSON 数据的方法一样,只是地图数据不同。

使用步骤:

  1. 制作带行政区域遮罩的 GeoJSON 地图
  2. 注册 geojson 加载器:tt.registerImgLoader(new plugin.GeoJSONLoader());
  3. 声明 geojson 数据源
  4. 设置 TileMap.imgSource 为 geojson 数据源
ts
const citySource = new plugin.GeoJSONSource({
    url: "../map/cityBounds.geojson",
    dataType: "geojson",
    style: {
        stroke: true,
        color: "red",
        weight: 2,
    },
});

const cityMaskSource = new plugin.GeoJSONSource({
    url: "../map/cityBoundsMask.geojson",
    dataType: "geojson",
    style: {
        stroke: false,
        fill: true,
        fillColor: "black",
        fillOpacity: 0.8,
    },
});

tt.registerImgLoader(new plugin.GeoJSONLoader());

// 创建地图
const map = tt.TileMap.create({
    // 影像数据源
    imgSource: [new plugin.ArcGisSource(), cityMaskSource, citySource],
    // 地形数据源
    demSource: new plugin.ArcGisDemSource(),
    // 中央经线
    lon0: 90,
    // 最小缩放级别
    minLevel: 7,
});

TIP

显示小范围区域地图时,设置适当的 minLevel 和摄像机坐标,地图能直接加载所需级别的数据,省去低级别瓦片的加载过程,提升加载速度。

Released under the MIT License.