首页 / MapLibre / 使用示例
影像源
单幅图片按四角坐标铺到地图上,适合规划图、历史地图与范围固定的影像。 换图与移动都在同一个源上完成,图层不需要重建。
源码与运行效果
说明
示例里的图片由 canvas 现场生成,转成 data URL 后直接作为
url 使用,不依赖外部图床。四个角的顺序是左上、右上、右下、左下,
写反会得到镜像或倒置的图,而且没有报错。
updateImage 只传新的 url 时位置保持不变;
setCoordinates 只改位置,不重新下载图片。
两者都能在图层持续显示的状态下完成,适合做多期影像对比。
| 操作 | 调用 | 效果 |
|---|---|---|
| 换图 | updateImage({ url }) | 重新加载图片,保留四角 |
| 换位置 | setCoordinates(coords) | 立即平移或缩放覆盖范围 |
| 同时换 | updateImage({ url, coordinates }) | 一次请求完成两者 |
| 查询 | loaded() | 图片是否已解码 |
图片不做重投影,四点之间按平面仿射变换铺开。已经校正到 Web 墨卡托的 扫描图贴合度最好;未校正的图在城市尺度就会出现明显偏移。
覆盖整个省域的图片建议控制在 4096 像素以内。边长超过 GPU 纹理上限时, 源会加载失败,只能缩小尺寸或改用瓦片切片。