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