Cesium自定义弹窗

css

<style type="text/css">
			html,
			body,
			#cesiumContainer {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			.leaflet-popup {
				position: absolute;
				text-align: center;
			}
			.leaflet-popup-close-button {
				position: absolute;
				top: 0;
				right: 0;
				padding: 4px 4px 0 0;
				text-align: center;
				width: 18px;
				height: 14px;
				font: 16px/14px Tahoma, Verdana, sans-serif;
				color: #c3c3c3;
				text-decoration: none;
				font-weight: bold;
				background: transparent;
			}

			.leaflet-popup-content-wrapper {
				text-align: center;
				overflow-y: auto;
				background: transparent;
				padding: 1px;
				text-align: left;
				border-radius: 5px;
			}

			.leaflet-popup-tip-container {
				margin: 0 auto;
				width: 40px;
				height: 20px;
				position: relative;
				overflow: hidden;
			}

			/*引导线*/
			.leaflet-popup-tip {
				background: white;
				box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
				width: 17px;
				height: 17px;
				padding: 1px;
				margin: -10px auto 0;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		</style>

js

var Popups = [];
		var viewer = new Cesium.Viewer('cesiumContainer', {
			//imageryProvider: globemap,
			selectionIndicator: false,
			animation: false,
			baseLayerPicker: false,
			geocoder: false,
			timeline: false,
			sceneModePicker: false,
			navigationHelpButton: false,
			infoBox: false,
			fullscreenButton: false,
			homeButton: false,
		});

		viewer.scene.globe.depthTestAgainstTerrain = true;

		var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
			url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
			name: "arcgis影像服务"
		});
		viewer.imageryLayers.addImageryProvider(imageryProvider);

		viewer.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(114.21772195, 22.725681793, 53298.0),
		})

		//获取当前点击的位置坐标
		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: '<div class="leaflet-popup-content-wrapper" style="background:#FFF;">' +
					'<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width:300px;max-height:500px"><h5>纬度:' +
					latitude + ',<br>经度:' + longitude + '</h5></div>' +
					'</div>',
				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);

		/*滚轮事件 监听高度值*/
		handler.setInputAction(function(wheelment) {
			var height = Math.ceil(viewer.camera.positionCartographic.height);
			console.log("高：" + height);
		}, Cesium.ScreenSpaceEventType.WHEEL)

		var PopupCoordinatePositioning = function(paramObj) {
			$("#" + paramObj.id).remove(); //移除
			var position = paramObj.coordinate;
			if (!position) {
				position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
			}
			var MarkStr = '<div id="' + paramObj.id +
				'" class="leaflet-popup" style="bottom: 0px; left: 0px;background: transparent;">' +
				paramObj.HTMLdiv +
				'<div class="leaflet-popup-tip-container" style="height: initial;">' +
				'<div class="leaflet-popup-tip" style="transform: inherit; width:' + paramObj.lineStyle.Linewidth + 'px; height:' +
				paramObj.lineStyle.Lineheight + 'px; background: ' + paramObj.lineStyle.Linebackground +
				'; margin: auto; box-shadow:' + paramObj.lineStyle.Linebackground + ' 0px 1px 10px;"></div>' +
				'<div style="box-shadow: 0px 0px 8px ' + paramObj.CircleStyle.Circlecolor + ';width:' + paramObj.CircleStyle.Circleradius +
				'px;height:' + paramObj.CircleStyle.Circleradius + 'px;background:' + paramObj.CircleStyle.Circlecolor +
				';margin:auto;border-radius:50%;"></div>' +
				'</div>' +
				'</div>';
			var id = viewer._container.id;
			$("#bubbleContent").append(MarkStr);
			var AllClass = $("#" + paramObj.id).attr("class");
			if (AllClass.indexOf("leaflet-popup-content-wrapper") == -1) {
				$("#" + paramObj.id).attr("class", AllClass + " leaflet-popup-content-wrapper");
			}
			var realTime = new Object(); //示例初始化一个Object 
			realTime.PopupsID = paramObj.id;
			realTime.scenePosition = position;
			realTime.paramObj = paramObj;
			if (Popups.length == 0) {
				Popups.push(realTime);
			}
			var bools = true;
			for (var i = 0; i < Popups.length; i++) {
				if (Popups[i].PopupsID == paramObj.id) {
					Popups[i] = realTime;
					bools = false;
				}
			}
			if (bools) {
				Popups.push(realTime);
			}

			$("#" + paramObj.id).show();
			viewer.scene.postRender.addEventListener(function() { // 每一帧都去计算气泡的正确位置
				if (Popups.length > 0) {
					for (var i = 0; i < Popups.length; i++) {
						var infoboxContainer = document.getElementById(Popups[i].PopupsID); //morphComplete
						if (infoboxContainer != null) {
							//var infoboxContainer = document.getElementById("bubble");//morphComplete
							if (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';
							}
						}
					}
				}
				var height = Math.ceil(viewer.camera.positionCartographic.height);
				
			});

		}