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