以下是一份面向GIS初学者的OpenLayers开发详细教程,深度解析代码:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js">script>
ol.css
:包含地图控件、图层等可视化样式ol.js
:OpenLayers核心功能库.map {
//设置地图控件显示尺寸
height: 95vh;
width: 95vw;
}
var map = new ol.Map({
target: 'map', // DOM元素ID
layers: [/* 图层数组 */],
view: new ol.View({/* 视图配置 */})
});
target
:绑定HTML元素的IDlayers
:图层加载顺序遵循数组索引(先添加的在下层)view
:地图的空间参照系与初始状态view: new ol.View({
center: ol.proj.fromLonLat([120.62, 31.32]), // 苏州坐标
zoom: 8,
projection: "EPSG:3857"
})
EPSG:3857
:Web墨卡托投影(Google/Bing等通用)ol.proj.fromLonLat()
:将WGS84坐标(EPSG:4326)转换为Web墨卡托坐标new ol.layer.Tile({
title: "天地图地形图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=您的密钥",
wrapX: true
})
})
wrapX: true
:启用经度方向瓦片循环// 比例尺控件
new ol.control.ScaleLine({
units: 'metric', // 公制单位
className: 'ol-scale-line' // 自定义样式类
})
// 旋转复位控件
new ol.control.Rotate({
autoHide: false, // 常显旋转指示器
duration: 500 // 复位动画时长
})
// 添加WMS服务示例
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://demo.geo-solutions.it/geoserver/wms',
params: {
'LAYERS': 'topp:states',
'TILED': true
}
})
})
new ol.layer.Tile({
preload: Infinity, // 预加载所有相邻瓦片
useInterimTilesOnError: false // 禁用错误瓦片显示
})
source: new ol.source.XYZ({
cacheSize: 512, // 缓存容量
crossOrigin: 'anonymous' // 跨域标识
})
// 监听瓦片加载错误
source.on('tileloaderror', function(event) {
console.error('Tile加载失败:', event.tile.src);
});
// 全局错误捕获
map.on('error', function(error) {
console.error('地图错误:', error.message);
});
一下代码展示了如何加载天地图地形晕渲与地形注记。注意修改您的密钥
。
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- 引入在线 OpenLayers 样式和脚本 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
<style>
.map {
height: 95vh;
width: 95vw;
}
</style>
<title>天地图地形图</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
// 创建地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: "天地图地形图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=您的密钥",
wrapX: true
})
}),
new ol.layer.Tile({
title: "天地图地形图层注记",
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=您的密钥",
wrapX: true
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([120.62, 31.32]), // 设置初始中心点(苏州)
zoom: 8,
projection: "EPSG:3857" // 使用Web墨卡托投影以适配 OpenLayers
})
});
// 添加比例尺
var scaleLineControl = new ol.control.ScaleLine();
map.addControl(scaleLineControl);
// 添加方向工具(重置旋转)
var rotateControl = new ol.control.Rotate();
map.addControl(rotateControl);
</script>
</body>
</html>
下方连接教程中的代码已经添加了控件直接控制不同类型地图(以及注记)。只需要填入您的密钥即可使用。
OpenLayers集成天地图服务【懒人版】
本教程完整实现了基于OpenLayers的地形图展示系统。
推荐学习路径:OpenLayers官方文档 → OGC服务规范 → WebGL地图渲染 → GIS算法基础
转载吱一声~