阅读 59

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

 

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

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐