meface/docs/.vuepress/components/Info.vue

<template>
  <div class="info-container">
    
    <h3>{{name}}</h3>
    <div id="info-viewer">

    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        name:"Info测试"
    }
  },
  methods:{
    initCesium(){
        let box = document.getElementsByClassName("content__default")[0];
        box.style.maxWidth = "100%";
        box.style.paddingTop = 0;

        let Cesium = this.$cesium;
        window.CESIUM_BASE_URL = '/cesium'
        Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
        var viewer = new Cesium.Viewer("info-viewer", {
            geocoder:false,//位置查找
            homeButton:false,//视图返回初始位置
            sceneModePicker:false,//视角选择器
            baseLayerPicker:false,//底图选择器
            navigationHelpButton:false,//导航帮助按钮
            animation:false,//动画控制器
            creditContainer:document.createElement("div"),//版权显示
            timeline:false,//时间线
            fullscreenButton:true,//全屏控件
            vrButton:false,
            skyBox:false,
            infoBox:false,
            imageryProvider:new Cesium.UrlTemplateImageryProvider({
                url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                minimumLevel: 3,
                maximumLevel: 18
            })
        });
        var imageryLayers = viewer.scene.imageryLayers;

        // //清除影像图层集合中的图层
        // imageryLayers.removeAll();

        // // 添加 ArcGIS 影像地图服务
        // const esriImagery = new Cesium.ArcGisMapServerImageryProvider({
        //     url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        //     // url: "http://server.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
        // });
        // imageryLayers.addImageryProvider(esriImagery);

         //添加OSM的建筑
        const tileset = viewer.scene.primitives.add(
            new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(96188),
            })
        );
        // Add OSM Building tileset
        let osmBuildingsTileset = Cesium.createOsmBuildings();

        //设置条件渲染
        osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
            defines: {
            mh: "${feature['cesium#estimatedHeight']}",
            },
            color: {
            conditions: [
                // ["(${mh} >= 100.0)", "color('blue')"],
                // ["(${mh} >= 1.0)", "color('red')"],
                ["${mh} >= 300", "rgba(45, 0, 75, 0.5)"],
                ["${mh} >= 200", "rgb(102, 71, 151)"],
                ["${mh} >= 100", "rgb(170, 162, 204)"],
                ["${mh} >= 50", "rgb(224, 226, 238)"],
                ["${mh} >= 25", "rgb(252, 230, 200)"],
                ["${mh} >= 10", "rgb(248, 176, 87)"],
                ["${mh} >= 5", "rgb(198, 106, 11)"],
                ["true", "rgb(127, 59, 8)"],
                // ["${name} === '周大福金融中心（广州东塔）'","color('red')"],
                // ["${name} === '周大福金融中心（广州东塔）'", "color('red')"],
            ],
            },
            // "show" : "${Height} > 50.0"
        });
        viewer.scene.primitives.add(osmBuildingsTileset);

         // 创建一个用于存储标注的数据源
        const dataSource = new Cesium.CustomDataSource("poiIconLabel");
        viewer.dataSources.add(dataSource);

        viewer.camera.flyTo({
            destination: new Cesium.Cartesian3(
                -2325771.0288233184,
                5392181.511762224,
                2484480.395134067
            ),
            orientation: {
                heading: 6.0399326,
                pitch: -0.30503,
                roll: 6.2825747,
            },
        });

        this._viewer = viewer;
        // this.dataSource = dataSource;
        this.initEvent();
    },
    initEvent(){
        let Cesium = this.$cesium;
        let viewer = this._viewer;
        //添加点击事件
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction( (movement) =>{
            viewer.selectedEntity = undefined;
            const pickedBuilding = viewer.scene.pick(movement.position);
            if (pickedBuilding) {
                const lat = pickedBuilding.getProperty("cesium#latitude");
                const lon = pickedBuilding.getProperty("cesium#longitude");
                const height = pickedBuilding.getProperty("cesium#estimatedHeight");
                const name = pickedBuilding.getProperty("name");
                const color = Cesium.Color.SNOW;
                const url = "/images/local.png";
                this.poiIconLabelAdd(lon, lat, height, name, color, url);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    /**
     * 用于添加poi的icon和label的函数
     * @param {*} lon ：经度
     * @param {*} lat ：纬度
     * @param {*} name ：标签内容
     * @param {*} color ：底部圆和横线的颜色
     * @param {*} url ：icon地址
     */
    poiIconLabelAdd(lon, lat, height, name, color, url) {
        let Cesium = this.$cesium;
        // 获取标注数据源
        const labelDataSource = this._viewer.dataSources.getByName("poiIconLabel")[0];
        labelDataSource.entities.removeAll();

        //添加图标和标注
        labelDataSource.entities.add({
            name: name,
            position: Cesium.Cartesian3.fromDegrees(lon, lat, height + 300),
            // 图标
            billboard: {
                // image: new Cesium.Resource.fetchImage(url),
                // image:require(url),
                image:url,
                width: 50,
                height: 50,
            },
            label: {
                //文字标签
                text: name,
                font: "20px sans-serif",
                style: Cesium.LabelStyle.FILL,
                // 对齐方式(水平和竖直)
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                pixelOffset: new Cesium.Cartesian2(20, -2),
                showBackground: true,
                backgroundColor: new Cesium.Color.fromBytes(0, 70, 24),
            },
        });

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

            // 画点
            labelDataSource.entities.add({
            // 给初始点位设置一定的离地高度，否者会被压盖
            position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
            point: {
                color: color,
                pixelSize: 15,
            },
        });
    },
  },
  mounted(){
    this.initCesium()
  }
}
</script>

<style lang='stylus' scoped>
#info-viewer{
  height: 80vh;
  width: 100%
}
</style>