cesium添加billboard以及在buillboard上添加文字


 cesium中添加billboard以及在公告牌上添加文字

以及點擊相應的billboard事件,以及鼠標滑過billboard事件(鼠標滑過,箭頭變小手)

var that= this
            var viewer = new this.Cesium.Viewer("cesiumContainer",{
                geocoder:false,     //右上角左側
                homeButton:false,
                sceneModePicker:false,
                baseLayerPicker:false,
                navigationHelpButton:false,
                animation:false,
                // creditContainer:"credit",
                timeline:false,
                fullscreenButton:false,
                vrButton:false,
                selectionIndicator : false,   //點擊之后顯示的聚焦框
                infoBox : false,    //點擊之后默認顯示的提示框
            });
            //設置視角
            viewer.camera.setView({
                 // Cesium的坐標是以地心為原點,一向指向南美洲,一向指向亞洲,一向指向北極州
                // fromDegrees(lng,lat,height)方法,將經緯度和高程轉換為世界坐標
                destination: this.Cesium.Cartesian3.fromDegrees(118.57,37.53,6000),
                orientation: {
                    //指向
                    heading: this.Cesium.Math.toRadians(0),
                    //視角
                    pitch: this.Cesium.Math.toRadians(-50),
                    roll: this.Cesium.Math.toRadians(0 ),
                    range:10000
                }
            })
            viewer.zoomTo(viewer);
           //添加圖標
            viewer.entities.add({
                position: this.Cesium.Cartesian3.fromDegrees(118.56,37.57),
                billboard: {
                    image: require('../../assets/images/camera.png'),
                    scale:0.8
                },
                name:'攝像頭1'
            });
            //添加圖文廣告牌
            viewer.entities.add({
                name: 'build',
                position: this.Cesium.Cartesian3.fromDegrees(118.577282,37.563443),
                label: { //文字標簽
                    text: '匯豐馨園',
                    font: '500 30px Helvetica',// 15pt monospace
                    scale: 0.5,
                    style: this.Cesium.LabelStyle.FILL,
                    fillColor: this.Cesium.Color.WHITE,
                    pixelOffset: new this.Cesium.Cartesian2(0, -5),   //偏移量
                    showBackground: true,
                    // backgroundColor: new this.Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0)   //背景顔色
                },
                billboard: { //圖標
                    image: require('../../assets/images/testImg.png'),
                    width: 100,
                    height: 46,
                    // pixelOffset: new this.Cesium.Cartesian2(100, -35),   //偏移量
                },
            });

            //鼠標滑過箭頭變小手
            const handler = new this.Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                const pickedObject = viewer.scene.pick(movement.endPosition);
                if (that.Cesium.defined(pickedObject)) {
                    viewer._container.style.cursor = "pointer";
                } else {
                    viewer._container.style.cursor = "default";
                }
            }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);

            //點擊廣告牌事件
            var handlerVideo = new this.Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handlerVideo.setInputAction(function (click) {
                var pick = viewer.scene.pick(click.position);
                if (pick && pick.id._name == "攝像頭1") {
                    that.$confirm('點擊事件成功', '提示', {
                        confirmButtonText: '確定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(() => {}).catch(() => {});
                } else if(pick && pick.id._name == "build"){
                    that.$notify({
                        title: '成功',
                        message: '這個類型點擊成功',
                        type: 'success'
                    });
                            }else {
                    return;
                }
            }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);

紅色文字廢了我一下午的時間一直報錯沒找到問題,后來發現是因為that  this的問題,簡直是懵逼了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM