二. vue-cesium开发三维地图 （天地图）创建 建模 楼房+文字

1.提供的文件 不是自己画的白膜 需要花钱买

建模文件

建模文件上的文字 以及数据格式

1.加白膜

      tilesetFn(){
        let that = this;
        tileset = new Cesium.Cesium3DTileset({
            url: "json/3Dtiles/huinan/tileset.json",
        });
        // 监听数据加载完成
        // tileset.allTilesLoaded.addEventListener(() => {
        //     console.log('数据加载完成');
        //     console.timeEnd('3dtiles');
        //     if(typeof complete == 'function') {
        //         complete()
        //     } else {
        //         console.error('complete参数值格式有误，应为function类型')
        //     }
        //     // 加载完成后飞往该处
        //     if(flyTo) {
        //         viewer.flyTo(tileset);
        //     }
        // });

        setStyle = (_3DTileset) => {
            _3DTileset.style = new Cesium.Cesium3DTileStyle();
            _3DTileset.style.color = {
                conditions:
                    [ 
                       ['regExp("平房").test(${Name_2})', 'rgba(255,0,0,1)']
                    ]

            };
        }
        // 这里的heading，pitch，roll特别重要，是相机旋转还有视角的核心
        // heading：以弧度为单位的航向角，我认为是鼠标按住不动x轴方向的旋转
        // pitch: 以弧度为单位的俯仰角,我认为是鼠标按住不动y轴方向的旋转
        // roll: 以弧度为单位的滚转角，我认为是鼠标滚动z轴方向的旋转
        // direction  up 通过上视角和下视角
    
        tileset.readyPromise.then(function () {
             window.viewer3d.scene.primitives.add(tileset); // 
        
            window.viewer3d.camera.flyTo({ 
                destination: Cesium.Cartesian3.fromDegrees(126.03549, 42.64096, 1384.0), // //世界坐标系下的一个坐标点
                orientation: { ////旋转角度
                    heading: Cesium.Math.toRadians(-3.0),//方位角
                    pitch : Cesium.Math.toRadians(-15.0),
                    roll: 0.0 ,  //旋转角
                },
                duration:1,
                complete:function callback() {
                  
                } 
            });

        })
    },

2.白膜加文字

        labels1 = window.viewer3d.scene.primitives.add(  
            new Cesium.LabelCollection()  // 这个是文字
        );
        
             // 建筑 文字
        fetch('json/jianzhuxinxi1.geojson').then(function (rs) {
            return rs.json();
        }).then(function (rs) {
            console.log(rs)
            var data = eval(rs);
            points1 = [];
            data.features.forEach(feature => {
                points1.push({
                    geometry: {
                        coordinates: feature.geometry.coordinates
                    },
                    properties: {
                        mc: feature.properties.Name_2,
                        h: feature.properties.height
                    }
                })
            });
            for (var i = 0; i <points1.length; i++) {
                var point = points1[i];
                var geo = point.geometry;
                var height = point.properties.h + 2;
                labels1.add({
                    position: Cesium.Cartesian3.fromDegrees(geo.coordinates[0], geo.coordinates[1], height),
                    text: point.properties.mc,
                    scale: 0.4,
                    //   backgroundColor: new Cesium.Color.fromCssColorString('#0a518e'),  //文字背景
                    backgroundColor: new Cesium.Color.fromBytes (68,68,68),  //文字背景
                    showBackground: true, //显示文字背景
                    outlineColor: new Cesium.Color.fromCssColorString('#67ADDF'),
                    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),
                })
            }
        })