Cesium添加自定义Canvas

最新推荐文章于 2025-04-18 22:54:20 发布

原创最新推荐文章于 2025-04-18 22:54:20 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#其他 #图形学

cesium 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Cesium地图中添加自定义图形，通过CallbackProperty和canvas绘制实现一个500x500像素的白色矩形，并展示了相关代码和效果。

有时候需要添加自绘的图形，可以用以下代码实现：

    let that = this;
    this.viewer.entities.add({
        name: "Site Layer",
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(100.0, 20.0, 130.0, 35.0),
          //coordinates: new Cesium.BoundingRectangle(0,0,100,100),
          material: new Cesium.ImageMaterialProperty({
            image: new Cesium.CallbackProperty(that.drawCanvasImage, false),
            transparent: true,
          }),
          rotation: Cesium.Math.toRadians(13),
        },
      });

其中，drawCanvasImage是一个方法，定义如下：

CallbackProperty函数定义如下：

    drawCanvasImage(time, result) {
      var cvs = document.createElement("canvas");
      cvs.width = 500;
      cvs.height = 500;

      var ctx = cvs.getContext("2d");
      ctx.fillStyle = "#FFFFFF33";
      ctx.fillRect(0, 0, 500, 500);
      ctx.moveTo(0, 0);
      ctx.lineTo(500, 500);
      ctx.stroke();

      //console.log(cvs);
      return cvs;
    }

效果如下：