经纬志
首页 / MapLibre / 使用示例

影像源

单幅图片按四角坐标铺到地图上,适合规划图、历史地图与范围固定的影像。 换图与移动都在同一个源上完成,图层不需要重建。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

示例里的图片由 canvas 现场生成,转成 data URL 后直接作为 url 使用,不依赖外部图床。四个角的顺序是左上、右上、右下、左下, 写反会得到镜像或倒置的图,而且没有报错。

updateImage 只传新的 url 时位置保持不变; setCoordinates 只改位置,不重新下载图片。 两者都能在图层持续显示的状态下完成,适合做多期影像对比。

操作调用效果
换图updateImage({ url })重新加载图片,保留四角
换位置setCoordinates(coords)立即平移或缩放覆盖范围
同时换updateImage({ url, coordinates })一次请求完成两者
查询loaded()图片是否已解码

图片不做重投影,四点之间按平面仿射变换铺开。已经校正到 Web 墨卡托的 扫描图贴合度最好;未校正的图在城市尺度就会出现明显偏移。

覆盖整个省域的图片建议控制在 4096 像素以内。边长超过 GPU 纹理上限时, 源会加载失败,只能缩小尺寸或改用瓦片切片。