五. vue-cesium开发三维地图 （天地图）图片标点+文字+点+线

点 线

    //     // 先画线后画点，防止线压盖点
    //     // let linePositions = [];
    //     // linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, 5));
    //     // linePositions.push(new Cesium.Cartesian3.fromDegrees(lon, lat, 300));
    //     // window.viewer3d.entities.add({
    //     //     polyline: {
    //     //         positions: linePositions,
    //     //         width: 1.5,
    //     //         material: color,
    //     //     }
    //     // })

    //     // 画点
    //     // window.viewer3d.entities.add({
    //     //     // 给初始点位设置一定的离地高度，否者会被压盖
    //     //     position: Cesium.Cartesian3.fromDegrees(lon, lat, 5),
    //     //     point: {
    //     //         color: color,
    //     //         pixelSize: 15,
    //     //     }
    //     // })

少量 加点和文字

for(){ // 循环加入
window.viewer3d.entities.add({
                    id: entity1.id,
                    name: entity1.id,
                    position: new Cesium.Cartesian3.fromDegrees(entity1.coordinatesHeight[0], entity1.coordinatesHeight[1], entity1.coordinatesHeight[3] ? entity1.coordinatesHeight[3] : 30),
             .....  
                })
}
window.viewer3d.entities.add({
                    id: id, //唯一
                    name:name, //唯一
                position: Cesium.Cartesian3.fromDegrees(item.coordinate[0], item.coordinate[1], item.coordinate[2]),//图标位置
                billboard: {
                    image: '',//图标地址
                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    pixelOffset: new Cesium.Cartesian2(-6, 6),
                    scale: 0.8,
                },
                label: {
                    scale: 1,
                    font: "bolder 16px sans-serif",
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    text: item.name,//图标名称
                    fillColor: Cesium.Color.fromCssColorString("#ffffff"),
                    pixelOffset: new Cesium.Cartesian2(0, -60)
                },
                properties: new Cesium.PropertyBag({
                    type: "point",
                    details: item
                })
            });

这个写法 可以批量5万+

        billboards1 = window.viewer3d.scene.primitives.add( 
            new Cesium.BillboardCollection()
        );
        labels1 = window.viewer3d.scene.primitives.add( 
            new Cesium.LabelCollection()
        );
        billboards1.add({
            id:'唯一', 
            position: Cesium.Cartesian3.fromDegrees(126.04080, 42.68249, -20),
            scale: 1.5,
            sizeInMeters: true,
            image: require('img'),
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        });
        labels1.add({
            position: Cesium.Cartesian3.fromDegrees(126.04080, 42.68249, 10),
            text: '文字', 
            scale: 0.7,
            outlineColor:  Cesium.Color.DARKBLUE,
            outline:true,
            outlineWidth: 5.0,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            heightReference: Cesium.HeightReference.NONE,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 1000.0),
            eyeOffset: new Cesium.Cartesian3(0, 0, -100.0)
        })