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的問題,簡直是懵逼了。