vue cesium 加载倾斜摄影数据并在上面添加自定义标注【转】

在main.js引入

import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'

Vue.prototype.Cesium = Cesium;

<br>// 以下是组件内容<br><br><br><br><template>

    <div class="cesium-wrap">

        <div id="cesiumContainer"></div>

        <el-form ref="form" :model="form" label-width="80px" class="cesiumForm" v-if="showForm" size="mini">

            <el-form-item label="id">

                <el-select v-model="form.id" placeholder="请选择" @change="changeLing">

                    <el-option v-for="item in lingList" :key="'ling' + item.id" :label="item.name" :value="item.id"></el-option>

                </el-select>

            </el-form-item>

            <el-form-item label="名称"><el-input v-model="form.name"></el-input></el-form-item>

            <el-form-item>

                <el-button type="primary" @click="onSubmit()">提交</el-button>

                <el-button @click="handleClose">取消</el-button>

                <el-button @click="deleHandle">删除</el-button>

            </el-form-item>

        </el-form>

    </div>

</template>

 

<script>

export default {

    data() {

        return {

            terrainUrl: 'http://172.0.0.1:8888/terrain2/',

            imageryUrl: 'http://172.0.0.1:8888/image/{z}/{x}/{y}.jpg',

            orgPos: { lon: 99.79602474, lat: 26.45798084, height: 300000 }, //7286.13}

            viewer: null, //

            terrainProvider: '', // 添加地形图数据

            imageryProvider: '', // 图形数据

            form: {

                id: '',

                name: '',

                jd: '',

                wd: '',

                height: ''

            },

            showForm: false,

            img: '/static/images/mark.png',

            lingList: []

        };

    },

    created() {

        this.queryMingTombsHandler();

    },

    mounted() {

        this.initViewer();

    },

    watch: {},

    methods: {

        // 获取数据

        queryMingTombsHandler() {

            this.lingList = [];

            this.$commonHttp(请求地址).then(res => {

                if (res.code == this.$codeState.OKCODE) {

                    let data = res.data;

                    this.lingList = data;

                    this.lingList.forEach(item => {

                        if (item.height) {

                            this.addEntities(item);

                        }

                    });

                    console.log('lingList', this.lingList);

                }

            });

        },

        // 选择

        changeLing(val) {

            this.lingList.forEach(item => {

                if (item.id == val) {

                    this.form.name = item.name;

                    console.log('this.form', this.form);

                }

            });

        },

        onSubmit() {

            this.$commonHttp(请求地址, {

                id: this.form.id,

                jd: this.form.jd,

                wd: this.form.wd,

                height: this.form.height

            }).then(res => {

                if (res.code == this.$codeState.OKCODE) {

                    this.addEntities(this.form);

                    this.showForm = false;

                    this.clearFromHandler();

                }

            });

        },

        handleClose() {

            this.showForm = false;

        },

        deleHandle() {

            this.$commonHttp(请求地址, {

                id: this.form.id

            }).then(res => {

                if (res.code == this.$codeState.OKCODE) {

                    this.showForm = false;

                    this.clearFromHandler();

                }

            });

        },

        // 将屏幕坐标转为经纬度

        lonLan(position) {

            let viewer = this.viewer;

            let Cesium = this.Cesium;

            var position1, cartographic1, lon, lat, height;

            let lonLanHei = {

                lon: '',

                lat: '',

                height: ''

            };

            let ray = viewer.scene.camera.getPickRay(position);

            position1 = viewer.scene.globe.pick(ray, viewer.scene);

            cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position1);

            let feature = viewer.scene.pick(position);

            if (feature == undefined) {

                lon = Cesium.Math.toDegrees(cartographic1.longitude);

                lat = Cesium.Math.toDegrees(cartographic1.latitude);

                height = cartographic1.height;

            } else {

                let cartesian = viewer.scene.pickPosition(position);

                if (Cesium.defined(cartesian)) {

                    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);

                    lon = Cesium.Math.toDegrees(cartographic.longitude);

                    lat = Cesium.Math.toDegrees(cartographic.latitude);

                    height = cartographic.height; //模型高度 } };//

                }

            }

            lonLanHei.lat = lat;

            lonLanHei.lon = lon;

            lonLanHei.height = height;

            return lonLanHei;

        },

        clearFromHandler() {

            this.form.id = '';

            this.form.jd = '';

            this.form.wd = '';

            this.form.name = '';

            this.form.height = '';

        },

 

        initViewer() {

            //添加地形图数据

            // this.terrainProvider = new this.Cesium.CesiumTerrainProvider({

            //   url: this.terrainUrl

            // });

            // 添加图片数据

            // this.imageryProvider = new this.Cesium.UrlTemplateImageryProvider({

            //   url: this.imageryUrl,

            //   tilingScheme: new this.Cesium.WebMercatorTilingScheme(),

            //   maximumLevel: 19

            // });

            let terrainModels = this.Cesium.createDefaultTerrainProviderViewModels();

            // 初始化

            this.viewer = new this.Cesium.Viewer('cesiumContainer', {

                // terrainProvider: this.terrainProvider,

                // imageryProvider: this.imageryProvider,

                infoBox: false, //是否显示信息框--点击mark时，true有会

                geocoder: false, // 查找位置，查到后会将镜头对准找到的地址

                homeButton: false, // 视角返回初始位置

                sceneModePicker: false, // 旋转视角的模式，有三种3D,2D,哥伦布视图

                //baseLayerPicker: false, // 图层选择器，选择要显示的地图服务和地形服务。

                navigationHelpButton: false, // 导航帮助按钮，显示默认的地图控制帮助。

                fullscreenButton: true, // 全屏按钮

                animation: false, // 动画，控制试图动画的播放速度

                timeline: false, // 时间线，指示当前时间，并允许用户跳到特定的时间。

                selectionIndicator: false, // 禁止entity选中

                vrButton: true,

                scene3DOnly: false,

                sceneMode: 3

                //terrainProviderViewModels: terrainModels,

                //selectedTerrainProviderViewModel: terrainModels[1] // Select STK high-res terrain

            });

            this.viewer.scene.globe.depthTestAgainstTerrain = false;

            // cesium的label的清晰度

            this.viewer.scene.postProcessStages.fxaa.enabled = false;

            // 加载倾斜摄影数据

            this.loadTilesetHandler();

            // this.initCamera();

            //去掉地图标志

            this.viewer._cesiumWidget._creditContainer.style.display = 'none';

            this.initMark();

        },

        // 加载倾斜摄影数据

        loadTilesetHandler() {

            let tileset = this.viewer.scene.primitives.add(

                new this.Cesium.Cesium3DTileset({

                    url: 'http://172.18.49.225:65432/qxsy/tileset.json' //

                })

            );

            tileset.readyPromise

                .then(() => {

                    this.viewer.scene.primitives.lowerToBottom(tileset);

                    let boundingSphere = tileset.boundingSphere;

                    this.viewer.camera.viewBoundingSphere(boundingSphere, new this.Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));

                    this.viewer.camera.lookAtTransform(this.Cesium.Matrix4.IDENTITY);

                })

                .otherwise(function(Aerror) {

                    throw error;

                });

        },

        initCamera() {

            let self = this;

            this.viewer.scene.camera.flyTo({

                destination: this.Cesium.Cartesian3.fromDegrees(this.orgPos.lon, this.orgPos.lat, this.orgPos.height), // 设置位置

                orientation: {

                    heading: this.Cesium.Math.toRadians(0.0), // 方向

                    pitch: this.Cesium.Math.toRadians(-90), // 倾斜角度

                    roll: this.Cesium.Math.toRadians(0)

                },

                complete: () => {

                    // 到达位置后执行的回调函数

                    this.viewer.scene.camera.flyTo({

                        destination: self.Cesium.Cartesian3.fromDegrees(self.orgPos.lon, self.orgPos.lat, self.orgPos.height),

                        orientation: {

                            heading: self.Cesium.Math.toRadians(0.0),

                            pitch: self.Cesium.Math.toRadians(-30),

                            roll: self.Cesium.Math.toRadians(0)

                        },

                        complete: () => {},

                        duration: 3

                    });

                },

                duration: 5 // 设置飞行持续时间，默认会根据距离来计算

            });

        },

        initMark() {

            const viewer = this.viewer;

            const Cesium = this.Cesium;

 

            // 左击进入360全景

            viewer.screenSpaceEventHandler.setInputAction(e => {

                viewer.selectedEntity = this.pickEntity(viewer, e.position);

                if (!viewer.selectedEntity) {

                    let obj = this.lonLan(e.position);

                    this.form.jd = obj.lon;

                    this.form.wd = obj.lat;

                    this.form.height = obj.height;

                    this.showForm = true;

                } else {

                    this.$parent.detailInfo(viewer.selectedEntity._id);

                    console.log('进入360全景', viewer.selectedEntity._id);

                }

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

 

            // 双击entity，会放大视图，entity居中显示，且鼠标左键失去移动功能，鼠标滚轮失去作用

            this.viewer.screenSpaceEventHandler.setInputAction(() => {}, this.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

        },

        //双击操作

        pickAndTrackObject(e) {},

        // 设置广告牌label

        addEntities(item) {

            const viewer = this.viewer;

            const Cesium = this.Cesium;

            // label显示清晰度

            viewer.scene.postProcessStages.fxaa.enabled = false;

            let wyoming = viewer.entities.add({

                id: item.id,

                name: item.name,

                position: Cesium.Cartesian3.fromDegrees(Number(item.jd), Number(item.wd), Number(item.height) + 10),

                //立广告牌

                billboard: {

                    image: this.img,

                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

                    show: true, // default

                     50, // default: undefined

                    height: 55

                },

                //字体标签样式

                label: {

                    text: item.name,

                    font:'normal 32px MicroSoft YaHei',

                    scale:0.5,

                    color: Cesium.Color.WHITE,

                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,

                    showBackground: true,

                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

                    // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 8000.0),

                    // disableDepthTestDistance: 100.0,

                    pixelOffset: new Cesium.Cartesian2(40, -20) // 调整偏移位置

                }

            });

        },

        // 拾取实体

        pickEntity(viewer, position) {

            const Cesium = this.Cesium;

            let picked = viewer.scene.pick(position);

            if (picked) {

                let id = Cesium.defaultValue(picked.id, picked.primitive.id);

                if (id instanceof Cesium.Entity) {

                    return id;

                }

            }

            return undefined;

        }

    }

};

</script>

 

<style scoped lang="less">

.cesium-wrap {

     100%;

    height: 100%;

    display: inline-block;

}

#cesiumContainer {

     100%;

    height: 100%;

    position: absolute;

    margin: 0;

    padding: 0;

    overflow: hidden;

}

.cesiumForm {

     300px;

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 10;

    #ccc;

    padding: 10px;

    transform: translate(-50%, -50%);

}

</style>

　　原文 https://www.cnblogs.com/langqq/p/10873708.html