01-cesium-entity.popup.txt

1.说明：
    cesium 的 entity 可以添加 popup 属性（官方文档并未说明）。
    添加该属性后，单击该实体，可以执行函数、弹窗显示相应的内容。
    包括图片。


2.cesium 原生 popup。
widgets/demolitionStatistics/widget.js
// 视图添加实体，并返回当前添加的实体。
let redPolygon = viewer.entities.add({
    id : feature.attributes.FID,  // 实体名称用feature id，即FID。
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights(newarray),
        // perPositionHeight : true,
        // extrudedHeight: 0,
        // perPositionHeight : true,
        // extrudedHeight: 0,
        perPositionHeight: false,
        classificationType: Cesium.ClassificationType.BOTH,
        material : Cesium.Color.ORANGE.withAlpha(0.7),
        //material : new Cesium.Color(color[0]/255.0,color[1]/255.0,color[2]/255.0,color[3]/255.0),
        outline : true,
        //outlineColor : new Cesium.Color(outlinecolor[0]/255.0,outlinecolor[1]/255.0,outlinecolor[2]/255.0,outlinecolor[3]/255.0),
        outlineColor : Cesium.Color.BLACK,
    },
    // 单击该实体，弹窗显示该实体信息。
    popup: {
        html: innerHTML,  // 弹窗内容。
        anchor: [0, -6],  // 弹窗位置(左右、上下的偏移像素值)。
    },
});


3. billboard、label、popup
//添加实体
var entity = this.viewer.entities.add({
    name: attributes.name,
    position: Cesium.Cartesian3.fromDegrees(attributes.x, attributes.y),
    billboard: {
        image: this.getShipIcon(attributes.type, attributes.sog, attributes.length),
        scale: 1,
        rotation: Cesium.Math.toRadians(attributes.trueHead - 90),
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,   //CLAMP_TO_GROUND RELATIVE_TO_GROUND,
        scaleByDistance: new Cesium.NearFarScalar(1000, 1, 10000000, 0.1)
    },
    label: {
        text: attributes.name,
        font: '8px Helvetica',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor: Cesium.Color.AZURE,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -20),   //偏移量  
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, //是地形上方的高度
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 9000)
    },
    data: attributes,
    popup: {
        html: function (entity) {
            var attributes = entity.data;
            var inthtml = '<div>船名：' + attributes.name + '</div>'
                       + '<div>MMSI：' + attributes.mmsi + '</div>'
                       + '<div>船速：' + attributes.sog + 'kts</div>';

            return inthtml;
        },
        anchor: [0, -12],  // 弹窗位置(左右、上下的偏移像素值)。
    }
});