Skip to content

图片影像切片

  • 场景一:某些情况下客户会提供厂区人工建模的俯视正交影像用以替换模糊/老旧的卫星影像。
  • 场景二:标绘页加载模型较为卡顿,直接在卫星影像上标绘又找不具体位置。

图片影像

准备工作

天地图 token

  • 下载影像切片工具 mapTiler 访问码:4ngq

制作 tiff

  • 打开 qgis,点击图层 -> 配准工具,选择需要配准的图片,支持 jpg / png / tiff 格式

配准工具1

配准工具2

  • 在图片上选点,然后在卫星影像上选取对应点位,参照点越多图片对照越准确,尽量选在明显地物上如道路交叉口、建筑物角点等

配准工具3

配准工具4

  • 点击 开始配准 按钮,选择 tiff 输出目录

配准工具5

  • 配准效果

配准工具6

生成影像切片

  • 打开 mapTiler,选择 Standard Tiles,导入刚刚配准好的 tiff 文件

切片1

切片2

切片3

  • 选择切片导出文件夹,等待完成

切片4

切片5

部署

离线地图 部署方式一致,不再赘述。

使用

打开切片输出目录下的 metadata.json 文件,可以看到切片信息

json
{
  "name": "切片",
  "version": "1.1.0",
  "description": "",
  "attribution": "Rendered with <a href=\"https://www.maptiler.com/\">MapTiler Desktop</a>",
  "type": "overlay",
  "format": "png",
  "minzoom": "13",
  "maxzoom": "17",
  "scale": "1.000000",
  "bounds": [110.17007048, 38.72827799, 110.20178065, 38.75309583],
  "profile": "mercator"
}

其中的 bounds 字段即为切片范围,minzoommaxzoom 为切片缩放级别范围。

typescript
const url = "http://xxx/gisserver/{z}/{x}/{y}.png";
const layerProvider = new Cesium.UrlTemplateImageryProvider({
  url: url,
  maximumLevel: 17, // 根据 metadata.json 中的 maxzoom 字段调整
  minimumLevel: 13, // 根据 metadata.json 中的 minzoom 字段调整
  rectangle: Cesium.Rectangle.fromDegrees(
    110.17007048,
    38.72827799,
    110.20178065,
    38.75309583
  ), // 根据 metadata.json 中的 bounds 字段调整
});
viewer.imageryLayers.addImageryProvider(layerProvider);

MGis 地理三维库