当前位置：首页 > news >正文

OpenLayers数据源集成 -- 章节八：天地图集成详解

news 2025/9/13 8:05:24

前言

在前面的文章中，我们学习了OpenLayers中高德地图的集成方法。本文将深入探讨OpenLayers中天地图的集成技术，这是WebGIS开发中接入国家权威地理数据的重要方案。天地图作为国家地理信息公共服务平台，提供权威、准确、全面的地理信息服务，是构建国家级地理信息应用的重要基础。通过OpenLayers集成天地图，我们可以充分利用国家基础地理信息数据，为用户提供高质量、权威的地图服务。通过一个完整的示例，我们将详细解析天地图的配置、多图层叠加和坐标转换等关键技术。

项目结构分析

模板结构

<template><!--地图挂载dom--><div id="map"></div>
</template>

模板结构详解：

地图容器: id="map" 作为地图的唯一挂载点

极简设计: 采用最简化的模板结构，专注于天地图功能展示

注释说明: 明确标识地图挂载的DOM元素

响应式布局: 通过CSS样式实现全屏显示效果

依赖引入详解

import Map from 'ol/Map'
import { XYZ } from 'ol/source'
import View from 'ol/View'
import { Tile as TileLayer } from 'ol/layer'
import { transform } from 'ol/proj'

依赖说明：

Map: OpenLayers的核心地图类，负责地图实例的创建和管理

XYZ: XYZ瓦片数据源类，用于加载标准XYZ格式的瓦片服务

View: 地图视图类，控制地图的显示范围、缩放级别和投影方式

Tile as TileLayer: 瓦片图层类，用于显示瓦片数据

transform: 坐标转换函数，用于不同投影系统之间的坐标转换

技术背景：

天地图: 国家地理信息公共服务平台

权威数据: 基于国家基础地理信息数据

多图层: 支持矢量、影像、注记等多种图层类型

坐标转换: 支持多种投影系统之间的转换

数据属性初始化

data() {return {}
}

属性说明：

空数据对象: 当前示例不需要响应式数据

地图实例: 直接在mounted生命周期中创建和管理

简化设计: 专注于核心功能展示，减少不必要的状态管理

坐标转换详解

1. 坐标转换实现

var center = transform([114.5, 38.0], 'EPSG:4326', 'EPSG:3857')

坐标转换详解：

输入坐标: [114.5, 38.0] 经纬度坐标

经度: 114.5° (东经114.5度)

纬度: 38.0° (北纬38.0度)

地理位置: 中国河北省石家庄市附近

源投影: 'EPSG:4326' WGS84地理坐标系

目标投影: 'EPSG:3857' Web墨卡托投影坐标系

转换结果: 返回Web墨卡托投影坐标

坐标系统说明：

EPSG:4326: WGS84地理坐标系，使用经纬度表示

EPSG:3857: Web墨卡托投影坐标系，使用米为单位

转换必要性: 天地图服务使用Web墨卡托投影，需要坐标转换

天地图图层配置详解

1. 天地图路网图层

new TileLayer({title: '天地图路网',crossOrigin: 'anonymous',wrapX: false,source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的key',}),
})

配置详解：

TileLayer图层配置

title: '天地图路网' 图层标题，用于标识和调试

crossOrigin: 'anonymous' 跨域设置，允许跨域请求

wrapX: false 禁止X轴方向的重复平铺

XYZ数据源配置

url: 天地图矢量瓦片服务地址

服务域名: t0.tianditu.gov.cn 天地图官方服务域名

服务路径: /DataServer 天地图数据服务接口

服务参数:

T=vec_w: 矢量地图类型（vec表示矢量，w表示Web墨卡托投影）

x={x}: 瓦片X坐标

y={y}: 瓦片Y坐标

l={z}: 缩放级别（l参数等同于z参数）

tk: API密钥，用于身份验证

2. 天地图文字标注图层

new TileLayer({title: '天地图文字标注',attributions: '天地图的属性描述',wrapX: false,source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你的key',}),
})

配置详解：

title: '天地图文字标注' 图层标题

attributions: '天地图的属性描述' 版权信息

T=cia_w: 影像注记图层（cia表示影像注记，w表示Web墨卡托投影）

天地图服务类型详解

1. 天地图服务类型说明

矢量地图服务：

// 矢量地图
T=vec_w  // 矢量地图（Web墨卡托投影）
T=vec_c  // 矢量地图（CGCS2000投影）// 矢量注记
T=cva_w  // 矢量注记（Web墨卡托投影）
T=cva_c  // 矢量注记（CGCS2000投影）

影像地图服务：

// 影像地图
T=img_w  // 影像地图（Web墨卡托投影）
T=img_c  // 影像地图（CGCS2000投影）// 影像注记
T=cia_w  // 影像注记（Web墨卡托投影）
T=cia_c  // 影像注记（CGCS2000投影）

地形地图服务：

// 地形地图
T=ter_w  // 地形地图（Web墨卡托投影）
T=ter_c  // 地形地图（CGCS2000投影）// 地形注记
T=cta_w  // 地形注记（Web墨卡托投影）
T=cta_c  // 地形注记（CGCS2000投影）

2. 多图层组合示例

// 完整的天地图图层组合
const layers = [// 矢量地图new TileLayer({title: '天地图矢量地图',source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=your-key',}),zIndex: 0}),// 矢量注记new TileLayer({title: '天地图矢量注记',source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=your-key',}),zIndex: 1}),// 影像地图new TileLayer({title: '天地图影像地图',source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=your-key',}),zIndex: 2,visible: false}),// 影像注记new TileLayer({title: '天地图影像注记',source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=your-key',}),zIndex: 3,visible: false})
];

地图初始化详解

1. 地图实例创建

var map = new Map({target: 'map',layers: [// 路网图层new TileLayer({title: '天地图路网',crossOrigin: 'anonymous',wrapX: false,source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的key',}),}),// 文字标注图层new TileLayer({title: '天地图文字标注',attributions: '天地图的属性描述',wrapX: false,source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你的key',}),}),],view: new View({center: center,zoom: 11,}),
})

配置详解：

layers图层配置

图层顺序: 路网图层在下层，文字标注图层在上层

图层叠加: 通过zIndex控制图层显示顺序

可见性: 两个图层都默认可见

View视图配置

center: center 使用转换后的Web墨卡托坐标

zoom: 11 缩放级别，适合显示城市级别的地图

投影: 默认使用EPSG:3857（Web墨卡托投影）

2. 注释代码分析

// 注释掉的代码展示了另一种配置方式
// var map = new Map({
//     target: 'map',
//     layers: [
//         new TileLayer({
//             title: "天地图矢量图层",
//             source: new XYZ({
//                 url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的key",
//                 wrapX: false
//             })
//         }),
//         new TileLayer({
//             title: "天地图矢量图层注记",
//             source: new XYZ({
//                 url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的key",
//                 wrapX: false
//             })
//         })
//     ],
//     view: new View({
//         center: [0, 0],
//         projection: "EPSG:4326",
//         zoom: 3,
//     })
// });

注释代码特点：

旧版配置: 使用较旧的配置方式

坐标系统: 使用EPSG:4326地理坐标系

服务域名: 使用旧版域名 t0.tianditu.com

图层组合: 矢量图层 + 矢量注记图层

核心API方法总结

TileLayer对象方法

方法	功能	参数	返回值	示例
getSource()	获取数据源	-	XYZ	layer.getSource()
setSource(source)	设置数据源	XYZ	-	layer.setSource(source)
setOpacity(opacity)	设置透明度	Number(0-1)	-	layer.setOpacity(0.7)
getOpacity()	获取透明度	-	Number	layer.getOpacity()
setVisible(visible)	设置可见性	Boolean	-	layer.setVisible(false)
getVisible()	获取可见性	-	Boolean	layer.getVisible()
setZIndex(zIndex)	设置层级	Number	-	layer.setZIndex(5)
getZIndex()	获取层级	-	Number	layer.getZIndex()

transform函数

方法	功能	参数	返回值	示例
transform(coordinate, source, destination)	坐标转换	Coordinate, String, String	Coordinate	transform([114.5, 38.0], 'EPSG:4326', 'EPSG:3857')

XYZ对象方法

方法	功能	参数	返回值	示例
getUrl()	获取服务URL	-	String	source.getUrl()
setUrl(url)	设置服务URL	String	-	source.setUrl(newUrl)
getTileLoadFunction()	获取瓦片加载函数	-	Function	source.getTileLoadFunction()
setTileLoadFunction(func)	设置瓦片加载函数	Function	-	source.setTileLoadFunction(...)
getTileGrid()	获取瓦片网格	-	TileGrid	source.getTileGrid()
setTileGrid(tileGrid)	设置瓦片网格	TileGrid	-	source.setTileGrid(grid)

实际应用扩展

1. 动态图层切换

// 创建多个天地图图层
const vectorLayer = new TileLayer({title: '天地图矢量地图',source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=your-key',}),zIndex: 0
});const imageLayer = new TileLayer({title: '天地图影像地图',source: new XYZ({url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=your-key',}),zIndex: 1,visible: false
});// 图层切换方法
function switchLayer(layerName) {const layers = map.getLayers();layers.forEach(layer => {if (layer.get('title') === layerName) {layer.setVisible(true);} else {layer.setVisible(false);}});
}

2. 坐标转换工具

// 坐标转换工具函数
function coordinateTransform(lon, lat, fromProj, toProj) {return transform([lon, lat], fromProj, toProj);
}// 使用示例
const wgs84Coord = [114.5, 38.0]; // WGS84坐标
const webMercatorCoord = coordinateTransform(114.5, 38.0, 'EPSG:4326', 'EPSG:3857');
const cgcs2000Coord = coordinateTransform(114.5, 38.0, 'EPSG:4326', 'EPSG:4490');console.log('WGS84坐标:', wgs84Coord);
console.log('Web墨卡托坐标:', webMercatorCoord);
console.log('CGCS2000坐标:', cgcs2000Coord);

3. 天地图服务监控

// 监控天地图服务状态
function monitorTiandituService() {const services = [{name: '矢量地图',url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x=0&y=0&l=0&tk=your-key'},{name: '影像地图',url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x=0&y=0&l=0&tk=your-key'}];services.forEach(service => {fetch(service.url).then(response => {if (response.ok) {console.log(`${service.name}服务正常`);} else {console.error(`${service.name}服务异常:`, response.status);}}).catch(error => {console.error(`${service.name}服务连接失败:`, error);});});
}

4. 多投影系统支持

// 支持多种投影系统的天地图配置
const projectionConfigs = {'EPSG:3857': { // Web墨卡托投影vec: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=your-key',img: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=your-key'},'EPSG:4490': { // CGCS2000投影vec: 'https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=your-key',img: 'https://t0.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=your-key'}
};// 根据投影系统创建图层
function createLayerByProjection(projection, layerType) {const config = projectionConfigs[projection];if (config && config[layerType]) {return new TileLayer({title: `天地图${layerType}图层`,source: new XYZ({url: config[layerType]})});}return null;
}

5. 图层透明度控制

// 图层透明度控制
function setLayerOpacity(layerName, opacity) {const layers = map.getLayers();layers.forEach(layer => {if (layer.get('title') === layerName) {layer.setOpacity(opacity);}});
}// 透明度渐变效果
function fadeInLayer(layerName) {let opacity = 0;const interval = setInterval(() => {opacity += 0.1;setLayerOpacity(layerName, opacity);if (opacity >= 1) {clearInterval(interval);}}, 100);
}