基础地图-在线地图-天地图（标注）

效果图如下：

在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>

这样就可以将影像和地图标注都显示出来了。

转载于:https://www.cnblogs.com/justyouadmin/p/11383947.html

基础地图-在线地图-天地图（标注）相关推荐

C# .NET winform地图开发GMap离线地图在线地图自建地图服务器
目录添加GMap引用下载GMap demo 尝试一个测试程序下载离线地图使用离线模式读取地图加载高德地图获取WMTS 坐标系转化 GMap常用地图操作自建地图服务器添加GMap引用下 ...
基础地图-在线地图-天地图（无标注）
示例效果: 代码展示: <!DOCTYPE html> <html lang="zh-CN"><head><meta charset=&q ...
QGIS-申请天地图key并加载在线地图，在线图源坐标系差异
QGIS-申请天地图key并加载在线地图,在线图源坐标系差异概述申请key 加载地图坐标系坐标系转换国内图源(GC-J02火星坐标系) 概述从2019年1月1日起,调用天地图的地图服务都需 ...
常用的几种在线地图（天地图、百度地图、高德地图）坐标系之间的转换算法
1.首先弄明白几种在线地图的坐标系: (1)天地图:CGCS2000,2000国家大地坐标系:我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标.因为CGCS2000的定义与WGS84实 ...
arcgis api for js入门开发系列十七在线地图（天地图、百度地图、高德地图）
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
在线地图插件forarcmap_QGIS基础篇插件安装(在线地图纠偏)
QGIS基础篇,可以关注微信公众号,发送关键字获取相关文章. 本文主要介绍,QGIS插件安装,QGIS插件是基于Python和Qt开发的,通过其插件平台,可以安装很多有用的插件. 1. 插件安装,主要 ...
QGIS加载在线地图：高德、天地图等
QGIS能够加载WMS.WMTS.WFS,以及XYZ形式的瓦片等在线地图服务,通常可以作为空间数据的底图一起可视化出来,例如高德地图.天地图.OSM(openstreetmap)等在线地图服务. QG ...
ArcGIS中添加在线地图（影像图、街道图、天地图等）无需插件
前言: ArcGIS作为最强大的地理数据处理.编辑.制图和地图服务发布.管理等的GIS平台,在不同的专业都可以看到它的身影.对于那些利用GIS信息进行编辑,设计的专业人士来说,其桌面端ArcMap备受 ...
ArcGIS中添加谷歌地图、天地图、高德地图、Bing...在线地图（附插件下载）
很久之前我们推荐过好两款ArcGIS在线地图插件,这个链接:我把谷歌地图.高德地图.天地图.Bing-都装进了ArcGIS 不知道什么情况最近多了不少留言: 看到留言后我们立马重新安装查看. 当时推荐 ...

基础地图-在线地图-天地图（标注）

基础地图-在线地图-天地图（标注）相关推荐

最新文章

热门文章