Cesium添加自定义Canvas

最新推荐文章于 2024-09-27 16:48:21 发布

panda_8101

最新推荐文章于 2024-09-27 16:48:21 发布

阅读量2.1k

点赞数 4

分类专栏： cesium 文章标签：其他图形学

本文链接：https://blog.csdn.net/weixin_38366919/article/details/123907138

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

    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;
    }

效果如下：