<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<title>气泡弹窗</title>
<!--引用第三方的jQuery脚本库-->
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
<!--引用Cesium脚本库文件-->
<script src="./static/libs/include-cesium-local.js"></script>
<!--引用示例页面样式表-->
<link rel="stylesheet" href="./static/demo/cesium/style.css" />
<script>
//在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
'use strict';
//定义三维场景控件对象
var webGlobe;
var popup;
var popupController;
//加载三维场景
function init() {
//构造三维视图对象（视图容器div的id，三维视图设置参数）
webGlobe = new Cesium.WebSceneControl('GlobeView', {});
//构造视图功能管理对象（视图）
var sceneManager = new CesiumZondy.Manager.SceneManager({
viewer: webGlobe.viewer
});
//设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
sceneManager.showPosition('coordinate_location');
//构造第三方图层对象
var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
viewer: webGlobe.viewer
});
//加载天地图
var tdtLayer = thirdPartyLayer.appendTDTuMap({
//天地图经纬度数据
url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
//开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
token: "9c157e9585486c02edf817d2ecbc7752",
//地图类型 'vec'矢量 'img'影像 'ter'地形
ptype: "img"
});
//视点跳转
sceneManager.flyToEx(114.30182411077577, 30.531049970088603, {
height: 1632.9864145259676,
heading: 0,
pitch: -46,
roll: 0
});
//添加气泡弹窗
add();
}
//添加气泡弹窗
function add() {
//构造气泡弹窗控制对象
popupController = new CesiumZondy.Manager.PopupController({
viewer: webGlobe.viewer
});
//位置
var postion = Cesium.Cartesian3.fromDegrees(114.30252372618706, 30.544641875459394);
//添加PopUP
popup = popupController.appendPopup(
//容器div的id
'popup',
//文本
'<center>黄鹤楼</center>位于湖北省武汉市长江南岸的武昌蛇山之巅',
//坐标位置
postion,
//偏移量
[0, 0],
//弹窗的关闭按钮点击回调函数
function() {
popupController.removePopup(popup, 'popup', {});
}
);
//气泡更新：随地图操作即时更新位置
popupController.refreshPopups();
}
</script>
</head>
<body onload="init()">
<!--三维场景容器-->
<div id='GlobeView'></div>
<div id='popup' style="color:red;font-size:20px;"></div>
<!--位置信息容器-->
<div id="coordinateDiv" class="coordinateClass">
<label id="coordinate_location"></label>
</div>
</body>
</html>