Question

相同的代码，在cesium可以正常运行，在超图中无显示：

var imgObj = document.getElementById('myimg');
        imgObj.src = 'img/heatmap.png'; //canvas;
        imgObj.onload = function() {
            var custom_2DMesh = viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: instances2DMesh,
               
                appearance: new Cesium.MaterialAppearance({
                    material: Cesium.Material.fromType('Image', {
                        image:imgObj, //canvas
                    }),
                   
                    closed: true // 是否为封闭体，实际上执行的是是否进行背面裁剪
                }),
                asynchronous: false,
               
            }));
        }

在cesium 中构建一个Primitive，然后使用图片对象作为纹理显示没问题。在iclient上就不行，只能只用服务器端图片路径，如img/heatmap.png。是因为图片是客户端canvas生成的。iclient对img canvas都不能支持。

Answer 1

你好，可以通过这种方式去加载：

var mycanvas = document.getElementById('mycanvas')
    var ctx = mycanvas.getContext('2d')
    var img = new Image();
    img.onload = function(){
        alert('加载完毕')

        // 将图片画到canvas上面上去！
        ctx.drawImage(img,100,100);


    }

    img.src = "img/split.jpg";

    var scene = viewer.scene;
//GeometryInstance是Geometry的一个容器
    var instance = new Cesium.GeometryInstance({
        geometry : new Cesium.RectangleGeometry({
            rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
            vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
        })
    });
//使用抽象的Primitive而不是RectanglePrimitive
    scene.primitives.add(new Cesium.Primitive({
        geometryInstances : instance,
        //使用该外观，可以使矩形覆盖在地球表面，或者悬浮一定的高度
        appearance : new Cesium.EllipsoidSurfaceAppearance({
            material : new Cesium.Material({
                fabric: {
                    type: "DiffuseMap",
                    uniforms: {
                        image: img,
                    },
                },
            })
        })
    }));

Comments

你这个写法背景好像有颜色啊：

 appearance : new Cesium.EllipsoidSurfaceAppearance({

                material : new Cesium.Material({

                    fabric: {

                        type: "DiffuseMap",

                        uniforms: {

                            image: options._heatmap._renderer.canvas,

                        },

                    },

                }),

                translucent: true,

            })