首页 > 其他 > 详细

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

时间:2022-05-27 21:16:44      阅读:14      评论:0      收藏:0      [点我收藏+]

 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的问题,简直是懵逼了。

 

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

原文:https://www.cnblogs.com/menxiaojin/p/15334993.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!