cesium（普通贴图作为底图，给多边形等加贴图）

最新推荐文章于 2026-08-13 13:58:35 发布

原创最新推荐文章于 2026-08-13 13:58:35 发布 · 4.9k 阅读

本内容遵循CC 4.0 BY-SA版权协议

文章介绍了如何在Cesium中使用TIF格式图片作为带有地理位置信息的底图，以及如何将普通图片如jpg、png设置为矩形或多边形材质，通过调整坐标来匹配地图。第一种方法简单直接，第二种方法需要手动调整位置。同时，提供了获取点击位置经纬度的代码辅助调整。

该文章已生成可运行项目，

cesium把图片作为底图，可以采用下面两种方式：
（1）采用TIF格式的图片，这种格式的图片带有位置信息，可作为底图，并且可以自动地位到图片拍摄的位置，导入方式一般需要把图片上传到服务器或cesium官网的My Assets中，然后根据提示的代码即可引入。
在这里插入图片描述

 const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({
            url: "图片url",
        }));

（2）使用普通图片（jpg、png等）创建一个矩形或多边形，把图片作为作为材质给矩形，但要自己调整角点位置对齐。

var cby_bg_data=[
  119.252677,31.937594, 0,
  119.252086,31.922213, 0,
  119.284185,31.921710, 0,
  119.284234,31.936937, 0,

];
var cby_bg= viewer.entities.add({
  id:"fixed_bg",
  name: "背景",
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data),
    perPositionHeight: true,
    material: new Cesium.ImageMaterialProperty({
      image:"../sglImgs/cby_bg.jpg"
    }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5),
    outline: false,
    //outlineColor: Cesium.Color.BLUE,
    outlineWidth: 2, //很多电脑当宽度>1时，没用
  }
});

在这里插入图片描述
这种方式调整位置比较麻烦，需要慢慢调，可通过输出点击的经纬度来尝试。

//==点击获取经纬度
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (event) {
  var earthPosition = viewer.camera.pickEllipsoid(
    event.position,
    viewer.scene.globe.ellipsoid
  );
  var cartographic = Cesium.Cartographic.fromCartesian(
    earthPosition,
    viewer.scene.globe.ellipsoid,
    new Cesium.Cartographic()
  );
  var lat = Cesium.Math.toDegrees(cartographic.latitude);
  var lng = Cesium.Math.toDegrees(cartographic.longitude);
  var height = cartographic.height;
  console.log(lng.toFixed(6) + "\n" + lat.toFixed(6));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);