广告牌旨在显示光栅化数据,例如图像。如果要将html渲染为1,则必须为其创建一个canvas元素draw the dom elements,然后将该画布作为其图像属性传递给广告牌。

如果您实际上只需要显示图标/图像,然后在用户点击时显示一些HTML,那么您应该使用Entity API来创建广告牌。您将获得其他属性,例如' description'当您使用Entity API时。描述可以是静态HTML字符串或回调属性,可以根据需要随时更新。当用户通过鼠标点击选择实体时会显示描述,但可以通过viewer.trackedEntity属性以编程方式完成。

var viewer = new Cesium.Viewer('cesiumContainer');

var canvas = document.createElement('canvas');

canvas.width = 300;

canvas.height = 300;

var svgString = '' +

'' +

'

' +

'I like' +

'' +

'Cupcakes' +

'

' +

'' +

'';

var image = new Image();

image.src = 'data:image/svg+xml;base64,' + window.btoa(svgString);

//Need to wait for image to load before proceeding to draw

image.onload = function() {

canvas.getContext('2d').drawImage(image, 0, 0);

viewer.entities.add({

id: 'Cupcake SVG',

position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),

billboard: {

image: canvas

},

description: '

This is a cupcake that can be modified.

'

});

};

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐