【mars3d】mars3d写lable标签使用BillboardPrimitive这个API提升代码性能

1、绘制mars3d写lable标签使用DivGraphic这个API会在代码中动态生成html，但是地图中div郭队会影响性能

    const graphicImg = new mars3d.graphic.DivGraphic({
        attr: data.properties,
        position: data.geometry.coordinates,
        stopPropagation: true,
        style: initStyleOption(data.properties.videoType, data.properties.videoName),
        popup: `<div id="popVideoHLS" style="width: 300px;min-height: 123px">
              </div>`,
        popupOptions: {
            offsetY: getOffset(data.properties.videoType), // 显示Popup的偏移值，是DivGraphic本身的像素高度值
            template: `<div class="video-popup-panel animation-spaceInDown">
                      <div class="video-popup-text">{content}</div>
                      <span class="video-popup-close-button closeButton">×</span>
                </div>`,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
        },
    })
    layer.addGraphic(graphicImg)

2、使用BillboardPrimitive代替，也可以写出div效果

        // 创建label
        const graphic = new mars3d.graphic.BillboardPrimitive({
            position: label.geometry.coordinates,
            style: {
                image: imgUrl,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                visibleDepth: false,
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
                scaleByDistance: true,
                scaleByDistance_far: 130000,
                // scaleByDistance_farValue: 0.1,
                scaleByDistance_near: 0,
                // scaleByDistance_nearValue: 1,
                label: {
                    text: formatLabel(label.properties.name),
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    visibleDepth: false,
                    pixelOffset: [0, -75],
                    pixelOffsetScaleByDistance: new Cesium.NearFarScalar(0, 1, 6500, 0),
                    color: color,
                    background: true,
                    backgroundColor: '#fff',
                    backgroundOpacity: 0.7,
                    backgroundPadding: new Cesium.Cartesian2(10, 10),
                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 6000),
                    scaleByDistance: true,
                    scaleByDistance_far: 6000,
                    scaleByDistance_farValue: 0.1,
                    scaleByDistance_near: 0,
                    scaleByDistance_nearValue: 1,
                    font_size:50
                },
            },
            attr: label.properties,
        })
        graphic.on(mars3d.EventType.click, (event) => {
            console.log(event, 'event');
            map.flyToGraphic(graphic, {
                radius: 900,
                heading: 359,
                pitch: -47.2,
                duration: 1.5,
            })
        })
        divLayer.addGraphic(graphic)

你可以在label中写定样式，达到文本框的效果

效果呈现