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
                    width: 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 {
    width: 100%;
    height: 100%;
    display: inline-block;
}
#cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.cesiumForm {
    width: 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
posted on 2020-03-23 11:02 3D入魔阅读(2283) 评论(0) 编辑收藏举报