首页 / 浏览问题 / 三维GIS / 问题详情
Primitive中的material.image对象不能使用img对象?
12月12日, 2021

相同的代码,在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都不能支持。

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;
//GeometryInstanceGeometry的一个容器
    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,
                    },
                },
            })
        })
    }));
卷饼先生  (6,052EXP)  登峰造极
12月13日, 2021

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

 appearance : new Cesium.EllipsoidSurfaceAppearance({

                material : new Cesium.Material({

                    fabric: {

                        type: "DiffuseMap",

                        uniforms: {

                            image: options._heatmap._renderer.canvas,

                        },

                    },

                }),

                translucent: true,

            })

...