Cesium实体属性显示

tzbm123456

<Cesium实体属性显示>

2022年10月

tzbm123456

function fEntityAttrShow(){
    wyoming = viewer.entities.add({
    name : 'Wyoming',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([
                                -109.080842,45.002073,
                                -105.91517,45.002073,
                                -104.058488,44.996596,
                                -104.053011,43.002989,
                                -104.053011,41.003906,
                                -105.728954,40.998429,
                                -107.919731,41.003906,
                                -109.04798,40.998429,
                                -111.047063,40.998429,
                                -111.047063,42.000709,
                                -111.047063,44.476286,
                                -111.05254,45.002073]),
        height : 0,
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
    },
    description:'divID'//方法一
    });


    viewer.zoomTo(wyoming);
    mA="太阳"
    //方法二
    wyoming.description = '\
    <table>\
        <tr>\
            <td style="border:1px solid white;">\
                名称\
            </td>\
            <td style="border:1px solid white;">'
            + mA + "_1" +
            '</td>\
        </tr>\
        <tr>\
            <td style="border:1px solid white;">\
               AAAAA2\
            </td>\
            <td style="border:1px solid white;">\
                AAAAA2\
            </td>\
        </tr>\
    </table>';
}

tzbm123456

viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
    // If a feature was previously selected, undo the highlight
    silhouetteGreen.selected = [];
    // Pick a new feature
    const pickedFeature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(pickedFeature)) {
    clickHandler(movement);
        return;
    }

    // Select the feature if it's not already selected
    if (silhouetteGreen.selected[0] === pickedFeature) {
        return;
    }

    // Save the selected feature's original color
    const highlightedFeature = silhouetteBlue.selected[0];
    if (pickedFeature === highlightedFeature) {
        silhouetteBlue.selected = [];
    }

    // Highlight newly selected feature
    silhouetteGreen.selected = [pickedFeature];

    // Set feature infobox description
    const featureName = pickedFeature.getProperty("name");
    selectedEntity.name = featureName;
    selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
    viewer.selectedEntity = selectedEntity;

    var tmpPropertyArr=pickedFeature.getPropertyNames();

    tmpStrName=tmpPropertyArr[0];
    var tmpStr=`${
            '<table class="cesium-infoBox-defaultTable"><tbody>' +
            "<tr><th>"+tmpStrName+"</th><td>"
        }${pickedFeature.getProperty(tmpStrName)}</td></tr>`
    // tmpStrName=tmpPropertyArr[1];
    // tmpStr += "<tr><th>"+tmpStrName+"</th><td>"+
    //     `${pickedFeature.getProperty(tmpStrName)}</td></tr>`;
    // tmpStrName=tmpPropertyArr[2];
    // tmpStr += "<tr><th>"+tmpStrName+"</th><td>"+
    //     `${pickedFeature.getProperty(tmpStrName)}</td></tr>`;
    for(var i=1;i<tmpPropertyArr.length;i++){
        tmpStrName=tmpPropertyArr;
        if (tmpStrName!='id'){
            tmpStr += "<tr><th>"+tmpStrName+"</th><td>"+
                `${pickedFeature.getProperty(tmpStrName)}</td></tr>`;
        }

    }

    tmpStr+='</tbody></table>';
    selectedEntity.description = tmpStr;
},Cesium.ScreenSpaceEventType.LEFT_CLICK);