南宁工作室注册,深圳网站建设公司推荐乐云seo,c2g的代表性电商平台,网站建设违约合同展示示例图#xff1a;Cesium自定义HTML弹窗核心的实现思路部分#xff1a;(1)cesium 的点击事件 Cesium.ScreenSpaceEventType.LEFT_CLICK 监听左键单击鼠标事件获取当前位置坐标#xff0c;然后根据当前笛卡尔坐标去确认气泡窗口div的显示位置#xff1b;(2)监听 cesium …展示示例图Cesium自定义HTML弹窗核心的实现思路部分(1)cesium 的点击事件 Cesium.ScreenSpaceEventType.LEFT_CLICK 监听左键单击鼠标事件获取当前位置坐标然后根据当前笛卡尔坐标去确认气泡窗口div的显示位置(2)监听 cesium 的 postRender 每一帧变化的监听事件该事件就是为了确认你在转动球体时气泡只定位到当前位置不会出现偏差该事件每帧的移动时重新对气泡进行重新定位屏幕坐标到笛卡尔坐标的转换。1.左键鼠标单击监听事件//获取当前点击的位置坐标var handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function(movement) {/* var windowPosition viewer.camera.getPickRay(movement.position);var cartesianCoordinates viewer.scene.globe.pick(windowPosition, viewer.scene);var cartoCoordinates viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesianCoordinates); */var cartesian2 viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);var carto2 viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian2);latitude carto2.latitude * 180 / Math.PI;longitude carto2.longitude * 180 / Math.PI;//alert(纬度:latitude,经度:longitude);var cartesian viewer.scene.pickPosition(movement.position);//弹窗 参数var paramObj {id: trackPopUpContent,HTMLdiv: 纬度: latitude ,经度: longitude ,Offset: {x: 0,y: 0},coordinate: cartesian, //笛卡尔坐标参数lineStyle: {Linewidth: 3,Lineheight: 25,Linebackground: #409EFF},CircleStyle: {Circleradius: 8,Circlecolor: #409EFF},heighthidenum: 1000, //高度隐藏值}//固定弹窗 位置PopupCoordinatePositioning(paramObj);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);2.地图每一帧变化的监听事件viewer.scene.postRender.addEventListener(function() { // 每一帧都去计算气泡的正确位置if (Popups.length 0) {for (var i 0; i Popups.length; i) {var infoboxContainer document.getElementById(Popups[i].PopupsID); //morphCompleteif (infoboxContainer ! null) {//var infoboxContainer document.getElementById(bubble);//morphCompleteif (Popups[i].scenePosition) {var canvasHeight viewer.scene.canvas.height;var windowPosition new Cesium.Cartesian2();Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Popups[i].scenePosition, windowPosition);infoboxContainer.style.bottom (canvasHeight - windowPosition.y Popups[i].paramObj.Offset.y) px;infoboxContainer.style.left (windowPosition.x -(infoboxContainer.scrollWidth / 2)) px;}}}}});
