基礎地圖-在線地圖-天地圖（標注）
效果圖如下：
在xbsj-earthSDK中想影像中出現標注的地名地址的話，只需要在 earth.sceneTree.root 的children下載配置一個czmObject。格式和無標注的一樣。
示例代碼如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="xbsj-labels" content="Earth示例"></meta>
<title>天地圖-標記</title>
<!-- 0 引入js文件 -->
<script src="../../XbsjEarth/XbsjEarth.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="earthContainer" style="width: 100%; height: 100%; background: grey">
</div>
<script>
var earth;
function startup() {
earth = new XE.Earth('earthContainer');
earth.sceneTree.root = {
"children": [
{
"czmObject": {
"name": "天地圖-影像",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"XbsjImageryProvider": {
"url": "http://t6.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=xxxxxxxxxxxxxxxxxxx"
},
}
}
},
{
"czmObject": {
"name": "天地圖-標記",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"XbsjImageryProvider": {
"url": "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=xxxxxxxxxxxxxxxxxxx"
},
}
}
}
]
}
}
// 1 XE.ready()會加載Cesium.js等其他資源，注意ready()返回一個Promise對象。
XE.ready().then(startup);
</script>
</body>
</html>
其中想要正確的將標注的地址顯示在影像之上有兩種方式。
1. 正確配置children的順序，標注在影像之后。
2. 通過設置xbsjZIndex的大小來設置層級關系，類似css中的z-index。
下面是通過xbsjZIndex來設置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="xbsj-labels" content="Earth示例">
</meta>
<title>天地圖-標記</title>
<!-- 0 引入js文件 -->
<script src="../../XbsjEarth/XbsjEarth.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="earthContainer" style="width: 100%; height: 100%; background: grey">
</div>
<script>
var earth;
function startup() {
earth = new XE.Earth('earthContainer');
earth.sceneTree.root = {
"children": [{
"czmObject": {
"name": "天地圖-標記",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"XbsjImageryProvider": {
"url": "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=xxxxxxxxxxxxxxxxxxxxxxxxx"
},
},
xbsjZIndex:99
}
},
{
"czmObject": {
"name": "天地圖-影像",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"XbsjImageryProvider": {
"url": "http://t6.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=xxxxxxxxxxxxxxxxxxxxxxxxx"
},
}
}
},
]
}
}
// 1 XE.ready()會加載Cesium.js等其他資源，注意ready()返回一個Promise對象。
XE.ready().then(startup);
</script>
</body>
</html>
這樣就可以將影像和地圖標注都顯示出來了。