根據近期開發需求，不使用Cesium的infobox，想加入openlayres3中風格的氣泡窗口， 還要保證隨地球移動的消息框
理論體系借鑑
https://blog.csdn.net/zlx312/article/details/79825111 這位
https://blog.csdn.net/u013929284/article/details/52503295 這位
但由於代碼太亂或不全，自己還是研究透徹理論才做；
此爲第一版本很多漏洞有待優化；
第一步上圖：
<html>
<head>
<meta charset="UTF-8">
<title>二維轉三維</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
#cesiumContainer {
position: absolute;
left: 100px;
top: 100px;
width: 80%;
height: 80%;
}
/*leaflet風格氣泡窗口樣式模板*/
.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;
max-height: 200px;
overflow-y: auto;
background: white;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.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>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
<script src="http://mapapitest.tygps.com/TYmapAPI/service/TYMapAPI?key=07e0091d0d250195"></script>
<script>
/*
* 加載地球
* */
LoadEarth('cesiumContainer', {
vrButton: false,
shadows: true,
fullscreenButton: false,
HelpButton: false
});
/*
* 切換圖層
* */
BaseMap({BaseMap: 'arcgis_sl'});
/*
* star
* */
var _position, _pm_position, _cartesian, max_width = 300, max_height = 500, infoDiv;
var handler_teemo = new Cesium.ScreenSpaceEventHandler(_teemo_canvas);
handler_teemo.setInputAction(function (CLICK) {
//http://blog.csdn.net/u013929284/article/details/52503295
var cartesian = _teemo_scene.globe.pick(_teemo_camera.getPickRay(CLICK.position), _teemo_scene);
var cartographic = _teemo_scene.globe.ellipsoid.cartesianToCartographic(cartesian);
var picks = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_teemo_scene, cartesian);
_position = CLICK.position;
_cartesian = cartesian;
_pm_position = {x: picks.x, y: picks.y}
var lng = cartographic.longitude * 180 / Math.PI;
var lat = cartographic.latitude * 180 / Math.PI;
var hei = cartographic.height;
if (infoDiv) {
console.warn("氣泡尚未關閉");
return false;
}else {
infoDiv = window.document.createElement("div");
infoDiv.id = "trackPopUp";
infoDiv.style.display = "none";
infoDiv.innerHTML = '<div id="trackPopUpContent" class="leaflet-popup" style="top:0;left:0;">' +
'<a class="leaflet-popup-close-button" href="javascript:void(0)">×</a>' +
'<div class="leaflet-popup-content-wrapper">' +
'<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width: ' + max_width + 'px;max-height: ' + max_height + 'px"><h2>這是一個大大的提示氣泡</h2></div>' +
'</div>' +
'<div class="leaflet-popup-tip-container">' +
'<div class="leaflet-popup-tip"></div>' +
'</div>' +
'</div>';
window.document.getElementById("cesiumContainer").appendChild(infoDiv);
window.document.getElementById("trackPopUp").style.display = "block";
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
var _pm_position_2;
_teemo_viewer.scene.postRender.addEventListener(function () {
if (_pm_position != _pm_position_2) {
_pm_position_2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_teemo_scene, _cartesian);
var popw = document.getElementById("trackPopUpContent").offsetWidth;
var poph = document.getElementById("trackPopUpContent").offsetHeight;
var trackPopUpContent_ = window.document.getElementById("trackPopUpContent");
trackPopUpContent_.style.left = _pm_position_2.x-(popw/2);
trackPopUpContent_.style.top = _pm_position_2.y-(poph-10);
}
});
/*
* end
* */
</script>
</html>
代碼中cesium被封裝一層，各位只需將 star 和 end 之間的代碼竊走即可，無需關注其他。
此版本中重大bug尚在想辦法，即地球翻轉也會顯示這個信息框，攻克後會及時放出