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

OpenLayers集成天地图服务开发指南

article 2026/2/28 8:07:32

以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码：
在这里插入图片描述

一、开发环境搭建

1.1 OpenLayers库引入

<!-- 使用CDN引入最新版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核心功能库
  • 推荐使用固定版本号（如v7.3.0）确保稳定性

1.2 地图容器设置

.map {//设置地图控件显示尺寸height: 95vh;width: 95vw;
}
  • 使用视口单位(vh/vw)实现响应式布局
  • 保留5%边距防止窗口遮挡

二、地图核心配置解析

2.1 地图实例化

var map = new ol.Map({target: 'map',        // DOM元素IDlayers: [/* 图层数组 */],view: new ol.View({/* 视图配置 */})
});
  • target：绑定HTML元素的ID
  • layers：图层加载顺序遵循数组索引（先添加的在下层）
  • view：地图的空间参照系与初始状态

2.2 坐标系与投影转换

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墨卡托坐标
  • 转换公式：x = lon * 20037508.34 / 180, y = Math.log(Math.tan((90+lat)*Math.PI/360)) * 20037508.34 / Math.PI

2.3 天地图服务配置

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})
})
  • 服务参数解析：
    • T=ter_w：全球地形图（中文标注）
    • T=cta_w：地形注记层（需叠加显示）
    • x/y/z：瓦片坐标与缩放级别
    • tk：开发者密钥（需自行申请更换）
  • wrapX: true：启用经度方向瓦片循环

三、进阶功能扩展

3.1 地图控件集成

// 比例尺控件
new ol.control.ScaleLine({units: 'metric', // 公制单位className: 'ol-scale-line' // 自定义样式类
})// 旋转复位控件
new ol.control.Rotate({autoHide: false,  // 常显旋转指示器duration: 500     // 复位动画时长
})

3.2 多源数据叠加

// 添加WMS服务示例
new ol.layer.Tile({source: new ol.source.TileWMS({url: 'https://demo.geo-solutions.it/geoserver/wms',params: {'LAYERS': 'topp:states','TILED': true}})
})

四、专业优化建议

4.1 性能优化

  1. 预加载设置：
new ol.layer.Tile({preload: Infinity, // 预加载所有相邻瓦片useInterimTilesOnError: false // 禁用错误瓦片显示
})
  1. 缓存控制：
source: new ol.source.XYZ({cacheSize: 512,    // 缓存容量crossOrigin: 'anonymous' // 跨域标识
})

4.2 错误处理

// 监听瓦片加载错误
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算法基础

转载吱一声~

相关文章：

OpenLayers集成天地图服务开发指南

以下是一份面向GIS初学者的OpenLayers开发详细教程&#xff0c;深度解析代码&#xff1a; 一、开发环境搭建 1.1 OpenLayers库引入 <!-- 使用CDN引入最新版OpenLayers --> <link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/ollatest/ol.c…...

编程日记 2026/2/7 0:57:44

VBA-Excel

VBA 一、数据类型与变量 常用数据类型&#xff1a; Byte&#xff1a;字节型&#xff0c;0~255。Integer&#xff1a;整数型&#xff0c;用于存储整数值&#xff0c;范围 -32768 到 32767。Long&#xff1a;长整型&#xff0c;可存储更大范围的整数&#xff0c;范围 -214748364…...

编程日记 2026/2/14 8:15:23

OpenHarmony 开源鸿蒙北向开发——linux使用make交叉编译第三方库

这几天搞鸿蒙&#xff0c;需要编译一些第三方库到鸿蒙系统使用。 头疼死了&#xff0c;搞了一个多星期总算搞定了。 开贴记坑。 一、SDK下载 1.下载 在linux下使用命令 wget https://cidownload.openharmony.cn/version/Master_Version/OpenHarmony_5.1.0.54/20250313_02…...

编程日记 2026/2/7 0:56:50

向量库特点和使用场景

开源的专用向量数据库 Milvus 特点：开源分布式向量数据库，性能强大，支持多种索引类型（如IVF、HNSW等）、多种距离度量和灵活的查询方式，社区活跃，功能丰富，适用于处理大规模向量数据和复杂的检索任务。适用场景：适用于需要高性能、高扩展性的向量检索场景，如大型AI应用…...

编程日记 2026/2/15 17:31:18

【第14届蓝桥杯C/C++B组省赛】01串的熵

问题描述 算法思想 首先分析题目中给出的公式 S 100时&#xff0c;其信息熵为 H(S)−p(0)log2​(p(0)) − p(0)log2​(p(0)) − p(1)log2​(p(1)) 继续化简公式得 设0出现的次数为x&#xff0c;1出现的次数为3-x H(S)−x * p(0) * log2​(p(0)) − (3-x) * p(1) * log2​(p(1)…...

编程日记 2026/2/20 23:08:42

鸿蒙harmonyOS笔记：练习CheckBoxGroup获取选中的值

除了视觉效果实现全选和反选以外&#xff0c;咱们经常需要获取选中的值&#xff0c;接下来看看如何实现。 核心步骤&#xff1a; 1. 给 CheckBoxGroup 注册 onChange。 2. CheckBox 添加 name 属性。 3. 在 onChange 的回调函数中获取 选中的 name 属性。 事件&#xff1a…...

编程日记 2026/2/22 7:26:30

收数据花式画图plt实战

目录 Python plt想把纵坐标化成对数形式代码 子图ax. 我又有ax scatter&#xff0c;又有ax plot&#xff0c;都要去对数 数字接近0&#xff0c;取对数没有定义&#xff0c;怎么办 创建数据 添加一个小的常数以避免对数未定义的问题 创建一个figure和一个子图ax 在子图a…...

编程日记 2026/2/28 1:58:26

系统架构书单推荐（一）领域驱动设计与面向对象

本文主要是个人在学习过程中所涉猎的一些经典书籍&#xff0c;有些已经阅读完&#xff0c;有些还在阅读中。于我而言&#xff0c;希望追求软件系统设计相关的原则、方法、思想、本质的东西&#xff0c;并希望通过不断的学习、实践和积累&#xff0c;提升自身的知识和认知。希望…...

编程日记 2026/2/14 10:33:40

Centos6配置yum源

Centos6配置yum源 为Centos6配置CentOS Vault源—防止yum源过期为Centos6配置epel源为Centos6配置ELRepo源---已ELRepo被官方清空Centos6安装dockerdocker配置国内镜像加速 为Centos6配置CentOS Vault源—防止yum源过期 参考&#xff1a;https://mirrors.ustc.edu.cn/help/cen…...

编程日记 2026/2/27 14:00:08

CVPR 2025 | 文本和图像引导的高保真3D数字人高效生成GaussianIP

小小宣传一下CVPR 2025的工作GaussianIP。 arXiv&#xff1a;https://arxiv.org/abs/2503.11143 Github&#xff1a;https://github.com/silence-tang/GaussianIP 欢迎star, issue~ 摘要 文本引导的3D人体生成随着高效3D表示及2D升维方法&#xff08;如SDS&#xff09;的发展…...

编程日记 2026/2/14 13:37:05

MySQL密码修改的全部方式一篇详解

本文将详细介绍多种修改MySQL密码的方式。 本文目录 一、alter user 语句操作步骤 二、set password操作步骤 三、直接修改 mysql.user表操作步骤 一、alter user 语句 当你以 root 用户或者拥有足够权限的用户登录 MySQL 时&#xff0c;可以使用 ALTER USER 语句来修改密码。…...

编程日记 2026/2/19 3:18:36

Cursor从小白到专家

文章目录 1&#xff1a;简单开发一个贪吃蛇游戏规则设置提示词 cursor开发小工具开发整体步骤创建.cursorrules输入提示词composer模式chat模式 执行cursor accept all发布到线上进行分享 cursor开发一个浏览器插件创建.cursorrulescursor rules范例集工具 输入提示词执行curso…...

编程日记 2026/2/14 13:20:21

使用C++在Qt框架下调用DeepSeek的API接口实现自己的简易桌面小助手

项目背景 随着DeepSeek的爆火&#xff0c;最近的DeepSeek也进行了新一轮技术的更新&#xff0c;为了拥抱新时代&#xff0c;我们也要不断学习新的知识&#xff0c;难的底层原理我们接触不到&#xff0c;简单的调用还能难住我们&#xff1f; 因为在网络上搜集到的资源都是用Py…...

编程日记 2026/2/16 23:18:53

Kotlin 协程基础知识汇总（一）

1、协程基础 Kotlin 是一门仅在标准库中提供最基本底层 API 以便其他库能够利用协程的语言。与许多其他具有类似功能的语言不同&#xff0c;async 与 await 在 Kotlin 中并不是关键字&#xff0c;甚至都不是标准库的一部分。此外&#xff0c;Kotlin 的挂起函数概念为异步操作提…...

编程日记 2025/9/19 10:06:38

Deepseek训练成AI图片生成机器人

目录 内容安全层 语义理解层 提示词工程层 图像生成层 交付系统 训练好的指令（复制就可以） 内容安全层 理论支撑：基于深度语义理解的混合过滤系统 敏感词检测：采用BERT+CRF混合模型，建立三级敏感词库（显性/隐性/文化禁忌），通过注意力机制捕捉上下文关联风险 伦…...

编程日记 2026/2/17 12:25:40

关于MTU的使用（TCP/IP网络下载慢可能与此有关）

参考链接&#xff1a;告诉你mtu值怎么设置才能网速最好&#xff01; -Win7系统之家 出现网络速度被限制&#xff0c;可能与MTU值相关&#xff0c;先查看下本机的MTU winR,然后输入&#xff1a;netsh interface ipv4 show subinterfaces &#xff0c;查看自己网络中的MTU&…...

编程日记 2026/2/17 18:23:17

【信息系统项目管理师】【高分范文】【历年真题】​论信息系统项目的风险管理

【手机端浏览】☞【信息系统项目管理师】【高分范文】【历年真题】​论信息系统项目的风险管理 2023年上半年考题 【题目】 论信息系统项目的风险管理 项目风险管理旨在识别和管理未被项目计划及其他过程所管理的风险&#xff0c;如果不妥善管理&#xff0c;这些风险可能导致项…...

编程日记 2026/2/18 6:08:43

Debain-12.9使用vllm部署内嵌模型/embedding

Debain-12.9使用vllm部署内嵌模型/embedding 基础环境准备下载模型部署模型注册dify模型 基础环境准备 基础环境安装 下载模型 modelscope download --model BAAI/bge-m3 --local_dir BAAI/bge-m3部署模型 vllm serve ~/ollama/BAAI/bge-m3 --served-model-name bge-m3 --t…...

编程日记 2026/2/21 6:43:40

香橙派连接摄像头过程

在香橙派上下载NoMachine 在控制电脑上也下载NoMachine sudo nmcli dev wifi connect "你的WiFi名称" password "你的WiFi密码" 连接上wifi后就可以在NoMachine连上香橙派了 &#xff08;不过前提是香橙派有安装桌面端系统&#xff08;非仅窗口端&…...

编程日记 2026/2/18 13:22:41

Milvus学习整理

Milvus学习整理 一、度量类型(metric_type) 二、向量字段和适用场景介绍 三、索引字段介绍 &#xff08;一&#xff09;、概述总结 &#xff08;二&#xff09;、详细说明 四、简单代码示例 &#xff08;一&#xff09;、建立集合和索引示例 &#xff08;二&#xff09…...

编程日记 2026/2/19 21:41:34

MySQL事务全解析：从概念到实战

在数据库操作中&#xff0c;事务是一个至关重要的概念&#xff0c;它确保了数据的完整性和一致性。今天&#xff0c;就让我们深入探讨MySQL事务的方方面面&#xff0c;从基础概念到实际应用&#xff0c;全面掌握这一技能。 一、为什么需要事务 假设张三要给李四转账100元&…...

编程日记 2026/2/18 0:40:34

重叠构造函数 、JavaBean模式、建造者模式、Spring的隐性大手

构造函数 重叠构造函数JavaBean模式建造者模式构造Spring看起来为什么简单番外篇为什么在JavaBean中 无参构造函数是必须的呢 小结 构造函数对我来讲是很平常的一个东西&#xff0c;今天来谈谈新的收获。 重叠构造函数 通常我们定义好实体类后&#xff0c;不会特意的去调整构造…...

编程日记 2025/9/12 4:01:43

题单：精挑细选

题目描述 小王是公司的仓库管理员&#xff0c;一天&#xff0c;他接到了这样一个任务&#xff1a;从仓库中找出一根钢管。这听起来不算什么&#xff0c;但是这根钢管的要求可真是让他犯难了&#xff0c;要求如下&#xff1a; 1.1. 这根钢管一定要是仓库中最长的&#xff1b; …...

编程日记 2025/7/21 1:46:34

GGUF 和 llama.cpp 是什么关系

这是个非常关键的问题&#xff0c;咱们来细说下&#xff1a;GGUF 和 llama.cpp 是什么关系&#xff0c;它们各自干什么&#xff0c;如何配合工作。 &#x1f527; 一、llama.cpp 是什么&#xff1f; llama.cpp 是 Meta 的开源大语言模型 LLaMA&#xff08;Language Model from…...

编程日记 2025/9/21 5:26:04

手机怎么换网络IP有什么用？操作指南与场景应用‌

在数字化时代&#xff0c;手机已经成为我们日常生活中不可或缺的一部分&#xff0c;无论是工作、学习还是娱乐&#xff0c;手机都扮演着至关重要的角色。而在手机的使用过程中&#xff0c;网络IP地址作为设备在互联网上的唯一标识符&#xff0c;其重要性和作用不容忽视。本文将…...

编程日记 2026/2/17 0:01:32

强化学习中的深度卷积神经网络设计与应用实例

I. 引言 强化学习&#xff08;Reinforcement Learning&#xff0c;RL&#xff09;是机器学习的一个重要分支&#xff0c;通过与环境的交互来学习最优策略。深度学习&#xff0c;特别是深度卷积神经网络&#xff08;Deep Convolutional Neural Networks&#xff0c;DCNNs&#…...

编程日记 2025/12/20 21:08:50

软考程序员-操作系统基本知识核心考点和知识重点总结

以下是软考程序员考试中操作系统基本知识章节的核心考点和知识重点总结&#xff0c;结合历年真题和考试大纲整理而成&#xff1a; 一、操作系统基本概念与功能 定义与作用 操作系统是管理计算机软硬件资源的核心系统软件&#xff0c;负责协调程序执行、优化资源利用&#xff0c…...

编程日记 2026/2/18 16:37:11

思源配置阿里云 OSS 踩坑记

按照正常的配置IAM&#xff0c;赋予OSS权限&#xff0c;思源笔记还是无法使用&#xff0c;缺少ListBuckets权限。 正常配置权限&#xff0c;又无法覆盖&#xff0c;因此需要手动配置权限。 {"Version": "1","Statement": [{"Effect":…...

编程日记 2026/2/17 16:50:55

科技赋能安全：慧通测控的安全带全静态性能测试

汽车的广泛普及给人们的出行带来了极大便利&#xff0c;但交通事故频发也成为严重的社会问题。据世界卫生组织统计&#xff0c;全球每年约有 135 万人死于道路交通事故&#xff0c;而安全带在减少事故伤亡方面起着不可替代的作用。正确使用安全带可使前排驾乘人员的死亡风险降低…...

编程日记 2026/2/16 17:39:58

记录修复一个推拉门滑轮

推拉门有个滑轮的固定螺丝不知什么时候掉了&#xff0c;也找不到&#xff0c;这就导致推拉门卡在轨道上。 这种滑轮在夕夕上很便宜&#xff0c;比哈罗单车还划算&#xff0c;但是现在缺的只是螺丝&#xff0c;如果买就会多出来一个轮… 这种螺丝比较长&#xff0c;大概是m4的…...

编程日记 2026/2/21 12:13:12