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

canvas 当影像底图

一张 1024 × 768 的示意图,包含水系、路网、绿地与标注, 铺在 115.8°E 到 117.0°E 的矩形上,边界用虚线标出。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

一张图铺一个矩形

SingleTileImageryProvider 把整张图拉伸到 rectangle 指定的范围内,和瓦片服务不同,它只请求一次。 这种写法适合示意图、占位底图,或者把一张手绘平面图贴到小区范围上。

矩形外的区域没有影像,会露出 globe.baseColor 的底色。 示例把底色设成深蓝灰,边界一眼可见。

图层参数

viewer.imageryLayers.addImageryProvider 返回图层对象, alpha 控制整体透明度。滑杆从 0 到 1 时, 底图会逐渐溶入底色,可以用来做上下层过渡。

可调参数

位置改什么效果
透明度滑杆0 到 1图层整体淡入淡出
rectangle缩小经纬范围图像被拉伸到更小的区域
drawMap加一条河道示意图内容变化
globe.baseColor改成黑色矩形外区域变暗

单张图不是瓦片。视图拉近时它会一直模糊,因为服务器端没有更高层级的图。 需要清晰度随缩放提升,得改用支持多级瓦片的服务,或者按层级准备多张图。