1. 天地图影像服务概述
天地图作为国家地理信息公共服务平台,提供了丰富的地理空间数据服务,包括矢量地图、影像地图、地形图等多种数据类型。其中影像地图服务尤为开发者关注,它提供了高分辨率的卫星影像和航拍影像数据,覆盖全国范围。
天地图影像服务采用标准的WMTS(Web Map Tile Service)协议提供服务,支持多种坐标系统和投影方式。开发者可以通过RESTful API接口调用这些服务,在WebGIS应用中展示高质量的影像底图。
提示:使用天地图服务需要先申请开发者密钥(key),这是调用所有天地图服务的必要凭证。申请过程完全免费,只需在天地图官网注册账号即可获取。
2. 二维地图加载天地图影像
2.1 Leaflet框架集成方案
Leaflet作为轻量级的二维地图库,是加载天地图影像的理想选择。以下是完整的集成代码示例:
javascript复制// 初始化地图
var map = L.map('map').setView([39.9042, 116.4074], 12);
// 天地图影像图层
var tdtImgLayer = L.tileLayer(
'http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥',
{
subdomains: ['0', '1', '2', '3', '4'],
attribution: '© 天地图'
}
).addTo(map);
// 天地图标注图层
var tdtCvaLayer = L.tileLayer(
'http://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥',
{
subdomains: ['0', '1', '2', '3', '4']
}
).addTo(map);
这段代码实现了:
- 创建基础地图容器
- 加载天地图影像底图(img_w服务)
- 叠加天地图矢量标注(cva_w服务)
注意:实际使用时需要将"您的密钥"替换为真实的天地图开发者key。subdomains参数用于负载均衡,可以提高瓦片加载的稳定性和速度。
2.2 常见问题与解决方案
2.2.1 跨域问题处理
在开发环境中,可能会遇到跨域请求被浏览器拦截的情况。解决方法有:
- 配置本地开发服务器代理
- 在天地图控制台配置域名白名单
- 使用nginx反向代理
推荐使用nginx代理方案,配置示例如下:
nginx复制location /tianditu/ {
proxy_pass http://t0.tianditu.gov.cn/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
2.2.2 瓦片加载优化
为提高瓦片加载性能,可以采取以下措施:
- 预加载周边区域瓦片
- 实现瓦片缓存机制
- 根据网络状况动态调整请求并发数
- 使用WebWorker进行异步加载
3. 三维场景加载天地图影像
3.1 Cesium集成方案
Cesium是强大的三维地理可视化引擎,与天地图影像服务完美兼容。以下是基础集成代码:
javascript复制// 初始化Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=您的密钥',
subdomains: ['0', '1', '2', '3', '4'],
layer: 'img',
style: 'default',
format: 'image/jpeg',
tileMatrixSetID: 'w',
maximumLevel: 18
}),
baseLayerPicker: false
});
// 添加地形数据
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask: true,
requestVertexNormals: true
});
3.2 三维场景优化技巧
3.2.1 影像与地形匹配
天地图影像与Cesium地形数据可能存在高程偏差,可通过以下方式校正:
- 调整地形夸张系数
- 使用本地高程数据
- 应用高程偏移参数
javascript复制viewer.scene.globe.terrainExaggeration = 1.2; // 适当调整地形夸张系数
3.2.2 性能优化
三维场景对性能要求较高,推荐优化措施包括:
- 实现细节层次(LOD)控制
- 使用3D Tiles规范组织数据
- 启用Frustum Culling
- 合理设置相机移动速度
javascript复制// 性能优化配置
viewer.scene.globe.depthTestAgainstTerrain = true; // 启用深度测试
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-45),
roll: 0.0
}
});
4. 二三维联动实现
4.1 联动原理与架构
二三维联动的核心是通过共享状态实现视图同步:
- 地图状态中心化管理(中心点、缩放级别、视角等)
- 二维地图事件触发三维场景更新
- 三维场景变化反馈到二维地图
javascript复制// 共享视图状态
const sharedViewState = {
center: [116.4, 39.9],
zoom: 12,
pitch: 0
};
// Leaflet地图事件监听
map.on('moveend', function() {
const center = map.getCenter();
sharedViewState.center = [center.lng, center.lat];
sharedViewState.zoom = map.getZoom();
// 更新Cesium视图
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
sharedViewState.center[0],
sharedViewState.center[1],
10000
)
});
});
// Cesium场景变化监听
viewer.camera.changed.addEventListener(function() {
const position = viewer.camera.position;
const cartographic = Cesium.Cartographic.fromCartesian(position);
sharedViewState.center = [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude)
];
// 更新Leaflet视图
map.setView(
[sharedViewState.center[1], sharedViewState.center[0]],
sharedViewState.zoom
);
});
4.2 高级联动功能
4.2.1 要素同步高亮
实现跨视图的要素高亮需要:
- 统一要素ID体系
- 建立要素索引
- 实现跨视图渲染器
javascript复制// 要素索引表
const featureRegistry = new Map();
// 二维地图要素点击事件
map.on('click', function(e) {
const feature = getFeatureAtPosition(e.latlng);
if (feature) {
highlightFeatureIn3D(feature.id);
}
});
// 三维场景要素点击事件
viewer.screenSpaceEventHandler.setInputAction(function(movement) {
const pickedFeature = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedFeature)) {
highlightFeatureIn2D(pickedFeature.id);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
4.2.2 分析结果同步展示
空间分析结果在二三维视图中的同步展示:
- 统一分析结果数据格式
- 实现多视图渲染适配器
- 建立结果状态同步机制
javascript复制// 缓冲区分析示例
function runBufferAnalysis(center, radius) {
// 执行分析
const bufferResult = createBuffer(center, radius);
// 二维展示
L.geoJSON(bufferResult, {
style: {color: '#ff7800', weight: 1}
}).addTo(map);
// 三维展示
viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray(
bufferResult.geometry.coordinates[0].flat()
),
material: new Cesium.ColorMaterialProperty(
Cesium.Color.ORANGE.withAlpha(0.5)
)
}
});
}
5. 进阶应用与优化
5.1 离线环境部署
在某些特殊场景下需要离线使用天地图影像:
-
瓦片下载与存储
- 使用专门的瓦片下载工具
- 按需下载特定区域和层级
- 建立本地瓦片索引
-
本地服务搭建
- 使用GeoServer发布本地瓦片
- 配置nginx静态文件服务
- 实现WMTS兼容接口
bash复制# 本地瓦片目录结构示例
tiles/
├── img_w
│ ├── 10
│ │ ├── 100
│ │ │ └── 200.jpg
│ │ └── ...
│ └── ...
└── cva_w
├── 10
│ ├── 100
│ │ └── 200.png
│ └── ...
└── ...
5.2 性能监控与调优
建立完善的性能监控体系:
-
关键指标采集
- 瓦片加载耗时
- 渲染帧率(FPS)
- 内存占用
- 网络请求数
-
性能分析工具
- Chrome DevTools Performance面板
- Cesium Inspector
- 自定义性能仪表盘
javascript复制// 自定义性能监控
setInterval(() => {
const stats = {
fps: viewer.scene.frameState.framesPerSecond,
memory: performance.memory ? performance.memory.usedJSHeapSize : 0,
tiles: viewer.scene.globe._surface._tilesToRender.length
};
updatePerformanceDashboard(stats);
}, 1000);
5.3 安全与权限控制
企业级应用需要考虑的安全措施:
-
服务访问控制
- API密钥轮换
- 请求频率限制
- 域名白名单
-
数据安全
- 敏感区域模糊处理
- 自定义水印叠加
- 终端数据加密
javascript复制// 自定义安全水印
function addSecurityWatermark() {
const canvas = document.createElement('canvas');
// 水印绘制逻辑...
viewer.imageryLayers.addImageryProvider(
new Cesium.SingleTileImageryProvider({
url: canvas.toDataURL(),
rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
})
);
}
在实际项目中,我们团队发现天地图影像在18级以上的缩放级别存在明显的加载延迟问题。经过分析,这是因为高等级瓦片数据量激增导致的。我们的解决方案是:
- 对高频访问区域实现本地缓存
- 动态降低非焦点区域的瓦片质量
- 实现智能预加载算法,根据用户操作习惯预测下一步可能查看的区域
另一个值得分享的经验是:在移动端使用天地图时,建议将最大缩放级别控制在16级左右,这样可以显著提升性能表现,同时仍能保证大多数场景下的清晰度需求。
