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

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

news 来源：原创 2025/8/4 5:29:37

以下是一份面向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 性能优化

预加载设置：

new ol.layer.Tile({preload: Infinity, // 预加载所有相邻瓦片useInterimTilesOnError: false // 禁用错误瓦片显示
})

缓存控制：

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开发详细教程，深度解析代码： 一、开发环境搭建 1.1 OpenLayers库引入  <link rel"stylesheet" href"https://cdn.jsdelivr.net/npm/ollatest/ol.c…...

编程日记 2025/8/4 5:29:37

1、双指针法

关于每个知识点的例题可以自己看力扣标准题解。也可以在哔哩哔哩上看。想看我的，就到github 看 - 库 ，介绍里写的算法讲解那些，里面有知识点，有题库。题库，每天都发题，可能跟博客的进度不一样。因为我上传…...

编程日记 2025/8/5 1:11:20

程序算法基础

程序设计基本概念程序和算法人们做任何事情都有一定的方法和程序，如：春节联欢晚会的节目单、开会的议程等，都是程序。在程序的指导下，可以有秩序地、有效的完成每一项工作。随着计算机的问世和普及，“程序”逐渐专…...

编程日记 2025/8/3 5:30:45

JavaScript基础-删除事件（解绑事件）

在现代Web开发中，动态地添加和移除事件处理器是构建交互式网页的关键技能之一。虽然添加事件处理器相对直观，但了解如何有效地移除或“解绑”这些处理器同样重要。这不仅有助于优化性能，还能防止潜在的内存泄漏问题。本文将介绍几种方法来删除…...

编程日记 2025/7/30 17:08:14

Selenium Web UI自动化测试：从入门到实战

引言在当今快速迭代的软件开发周期中，自动化测试已成为保障产品质量、提升测试效率的核心手段之一。而针对Web应用的UI自动化测试，Selenium作为最流行的开源工具之一，凭借其跨浏览器、多语言支持（Python、Java、C#等&#xff09…...

编程日记 2025/7/30 20:41:28

AT_abc398_f [ABC398F] ABCBA

题目大意请点击这里查看原题面。给定一个字符串 S S S，找出以 S S S 为前缀的最短回文字符串。思路观察样例三，容易发现只要寻找到一个合适的“对称轴”即可。可以考虑枚举对称轴位置，判断然后得到长度并计算答案串。但是这样显然会超…...

编程日记 2025/8/2 16:38:28

RK3568开发笔记-egtouch触摸屏ubuntu系统屏幕校准

目录前言一、官方egtouch触摸屏驱动校准二、ubuntu系统xinput_calibrator工具校准 2.1. 工具安装 2.2. xinput_calibrator命令校准总结前言在基于 RK3568 平台进行开发，并使用 egtouch 触摸屏搭配 ubuntu20.04 系统时，准确的屏幕校准对于良好的用户交互体验至关重要…...

编程日记 2025/7/31 1:26:29

使用uniapp的vite版本进行微信小程序开发，在项目中使用mqtt连接、订阅、发布信息

1、保证在微信公众平台配置socket合法域名 2、项目中使用mqtt 建议在package.json中配置"mqtt": “4.1.0”，使用这个版本的依赖页面中引入mqtt并配置连接 // ts-ignoreimport * as mqtt from mqtt/dist/mqtt.js; //要使用这里面的const state reacti…...

编程日记 2025/7/31 14:42:56

【软件系统架构】单体架构

一、引言在软件开发的漫长历程中，架构的选择一直是至关重要的决策。单体架构作为一种经典的架构模式，曾经在许多项目中发挥着不可替代的作用。虽然如今微服务等架构逐渐流行，但理解单体架构对于深入掌握软件架构体系仍然有着重要意义。二、…...

编程日记 2025/7/30 11:12:44

强大的AI网站推荐（第三集）—— AskO3

网站：AskO3 号称：由华为全球技术服务部（GTS）基于盘古大模型构建的领域知识大模型博主评价：学习网络安全必备的网站，ICT服务领域顶级AI网站，如果学习HCIA，园区配置等，也可…...

编程日记 2025/7/23 4:32:38

高速网络包处理，基础网络协议上内核态直接处理数据包，XDP技术的原理

文章目录预备知识TCP/IP 网络模型（4层、7层）iptables/netfilterlinux网络为什么慢 DPDKXDPBFPeBPFXDPXDP 程序典型执行流通过网络协议栈的入包XDP 组成使用 GO 编写 XDP 程序明确流程选择eBPF库编写eBPF代码编写Go代码动态更新黑名单预备知识 TCP/IP…...

编程日记 2025/7/12 17:13:11

C++智能指针详解

C智能指针详解目录智能指针概述为什么需要智能指针C标准库中的智能指针 std::unique_ptrstd::shared_ptrstd::weak_ptr 智能指针的实际应用智能指针的最佳实践总结智能指针概述智能指针是C中用于自动管理动态分配内存的对象，它们遵循RAII（资源获…...

编程日记 2025/7/29 14:38:56

git 设置保存密码 git保存密码

目录长久保存密码长久保存密码 git push和git pull都能使用。 git config --global credential.helper store 然后执行一次 git pull，Git 会提示输入用户名和密码， 输入后保存路径： ~/.git-credentials ， Windows系统&…...

编程日记 2025/8/2 19:25:08

clamav服务器杀毒（Linux服务器断网状态下如何进行clamav安装、查杀）

ClamAV服务器杀毒（服务器断网状态也可以使用该方法） 服务器因为挖矿病毒入侵导致断网，进行离线的clamav安装并查杀安装包下载网址：https://www.clamav.net/downloads 安装.deb，如果服务器处于断网状态，可以…...

编程日记 2025/8/3 17:42:49

深入剖析 RocketMQ 的 ConsumerOffsetManager

在消息队列系统中，准确记录和管理消息的消费进度是保障系统可靠性和数据一致性的关键。RocketMQ 作为一款高性能、高可用的分布式消息队列，其 ConsumerOffsetManager 组件在消费进度管理方面发挥着至关重要的作用。本文将详细介绍 ConsumerOffsetManager…...

编程日记 2025/8/3 20:23:10

一文了解 threejs 中.bin 文件与 .gltf 文件和 .glb 文件三者之间的关系

文章目录前言一、.bin 文件的作用二、.gltf 文件的作用三、.gltf 和 .bin 的关系四、.glb 文件的作用五、如何查看或编辑 .bin 文件六、总结前言在 GLTF 生态中，.bin 文件是 GLTF 格式的重要组成部分，通常与 .gltf 文件一起使用。以下是它们的详细关…...

编程日记 2025/8/3 18:05:23

蓝桥杯（N皇后问题）------回溯法

题目描述在 NN 的方格棋盘放置了 N 个皇后，使得它们不相互攻击（即任意 2 个皇后不允许处在同一排，同一列，也不允许处在与棋盘边框成 45 角的斜线上。你的任务是，对于给定的 N，求出有多少种合法的放置方法…...

编程日记 2025/8/4 5:07:18

Linux系统中关闭Docker服务并禁止其开机自启、docker 安装目录结构分析 | 【du -sh *】

文章目录在Linux系统中关闭Docker服务并禁止其开机自启，具体步骤如下：适用于使用 systemd 的系统（如Ubuntu 16.04/CentOS 7等）适用于使用 SysVinit 或 Upstart 的旧版系统其他注意事项示例输出 linux 下一条命令实现统计各个目…...

编程日记 2025/8/3 13:42:13

免费下载 | 2025低空经济产业发展报告

低空经济概览产业链条：低空经济产业链分为上游的低空经济基础设施（如空管系统、飞行基地等）、中游的低空制造（包括无人机、eVTOL、直升机等飞行器的设计、研发、生产）和下游的低空运营及飞行服务。低空经济以低空空域…...

编程日记 2025/7/24 19:31:20

单一职责原则开闭原则其他开发原则

一、单一职责原则（Single Responsibility Principle, SRP） 定义一个类应该有且仅有一个引起它变化的原因（即一个类只负责一个职责）。核心思想高内聚：类的功能高度集中低耦合：减少不同职责之间的相互影…...

编程日记 2025/7/29 15:10:33

1.难受中，看了教程过后无从下手啊 2.pycharm专业版成功就好 3.安装包时出先问题 (base) PS G:\pycharm\projects\yolo\yolov5> pip install opencv-python>4.1.1 Requirement already satisfied: opencv-python>4.1.1 in g:\anaconda\app\lib\site-packa…...

编程日记 2025/7/28 1:03:00

手机号登录与高并发思考

基础逻辑一般来说这个验证码登录分为手机号、以及邮箱登录手机号短信验证，以腾讯云SMS 服务为例： 这个操作无非对后端来说就是两个接口： 一个是获取验证码，这块后端生成6位数字expire_time 去推送到腾讯云sdk ，腾…...

编程日记 2025/8/2 21:29:23

Linux系统管理与编程07：任务驱动综合应用

兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。 [环境] windows11、centos9.9.2207、zabbix6、MobaXterm、Internet环境 [要求] zabbix6.0安装环境：Lamp（linux httpd mysql8.0 php） [步骤] 2 …...

编程日记 2025/7/30 10:18:48

12：表的内外连接

1. 内连接内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选，前面学习的查询都是内连接，也是在开发过程中使用的最多的连接查询。新的内连接的语法： select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件; //通过…...

编程日记 2025/7/30 9:26:27

Mybatis的基础操作——03

写mybatis代码的方法有两种： 注解xml方式本篇就介绍XML的方式使用XML来配置映射语句能够实现复杂的SQL功能，也就是将sql语句写到XML配置文件中。目录一、配置XML文件的路径，在resources/mapper 的目录下二、写持久层代码 1.添加mappe…...

编程日记 2025/8/4 12:54:36

在CentOS系统上运行Ruby on Rails应用的详细步骤

以下是AI生成，仅做备份。 1. 安装必要的依赖在CentOS上，首先要安装一些基础的开发工具和依赖库，它们能确保后续的安装和运行过程顺利进行。 sudo yum update -y sudo yum install -y git gcc-c patch readline readline-devel zlib zlib-…...

编程日记 2025/7/23 19:35:52

《AI大模型趣味实战》第6集：基于大模型和RSS聚合打造个人新闻电台

《AI大模型趣味实战》第6集：基于大模型和RSS聚合打造个人新闻电台摘要本文将带您探索如何结合AI大模型和RSS聚合技术，打造一个功能丰富的个人新闻电台系统。我们将使用Python和PyQt5构建一个桌面应用程序，该应用可以从多个RSS源抓取新闻&…...

编程日记 2025/7/30 4:44:44

Unity 与 JavaScript 的通信交互：实现跨平台的双向通信

前言在现代游戏开发和 Web 应用中，Unity 和 JavaScript 的结合越来越常见。Unity 是一个强大的跨平台游戏引擎，而 JavaScript 是 Web 开发的核心技术之一。通过 Unity 和 JavaScript 的通信交互，开发者可以实现从 Unity 到 Web 页面的功能扩…...

编程日记 2025/7/29 18:40:09

Sql Server 索引性能优化分析以及分表

定位需优化语句根据工具 skywking 或者开启慢查询日志找到慢sql 的语句根据执行过程来判断慢的原因 row filter 指标看查了多少数据比例多少 type 看下是单表还是 join联表比如执行步骤多没索引优化方向减少执行次数索引没索引考虑加索引加索引尽量选择 i…...

编程日记 2025/7/26 13:44:25

Vue.js 模板语法全解析：从基础到实战应用

引言在 Vue.js 的开发体系中，模板语法是构建用户界面的核心要素，它让开发者能够高效地将数据与 DOM 进行绑定，实现动态交互效果。通过对《Vue.js 快速入门实战》中关于 Vue 项目部署章节（实际围绕 Vue 模板语法展开）…...

编程日记 2025/7/27 18:40:17

【JVM】内存区域划分，类加载机制和垃圾回收机制

本篇内容为了解 JVM 的内存区域划分，类加载机制，垃圾回收机制。实际开发中几乎用不到，但为了某些情况我们又不得不了解。目录一、JVM中的内存区域划分 1.1 内存区域划分考点二、JVM的类加载机制 2.1 类加载流程 2.2 类加载什么时候会…...

编程日记 2025/8/1 23:36:09

代码随想录算法训练营第十四天|替换数字

文档讲解：代码随想录难度：easy 附：冲 passion！！！passion！！！passion！！！ 替换数字卡码网题目链接(opens new window) 给定一个字符串…...

编程日记 2025/7/29 4:31:51

Java实体类（Javabean）-编程规范

Java学习笔记-Java实体类详解今天我们要聊一个看似简单却至关重要的知识点——Java实体类。就像快递小哥打包物件需要包装盒一样，在Java世界里处理数据也需要专门的容器，这就是我们的实体类！ 一、实体类是什么？——程序的"…...

编程日记 2025/7/30 17:39:33

深入解析 Java Stream API：筛选子节点的优雅实现！！！

🚀 深入解析 Java Stream API：筛选子节点的优雅实现 🔧 大家好！👋 今天我们来聊聊 Java 8 中一个非常常见的操作：使用 Stream API 从 Map 中筛选出特定条件的元素。🎉 具体来说，我们…...

编程日记 2025/8/1 7:56:22

Vala编程语言教程-面向对象编程语基础

基础尽管Vala语言并不强制你使用对象进行编程，但有些功能只能通过对象的方式来实现。因此，在大多数情况下，你肯定会希望采用面向对象的编程风格。与大多数当前的编程语言一样，为了定义你自己的对象类型，你需要编写一个…...

编程日记 2025/8/2 23:28:06

写读后感的时候，可以适当地引用书中的内容吗？

写读后感时，适当地引用书中的内容是可以的，这样可以更好地支持你的观点和感受，增强文章的可信度和说服力。引用书中的内容可以帮助读者更好地理解你所讨论的主题和人物，同时也可以展示你对原著的深入理解和阅读能力。但是&#…...

编程日记 2025/8/4 14:43:10

计算机网络高频（二）TCP/IP基础

计算机网络高频（二）TCP/IP基础 1.什么是TCP/IP⭐⭐ TCP/IP是一种网络通信协议，它是互联网中最常用的协议之一。TCP/IP有两个基本的协议：TCP（传输控制协议）和IP（互联网协议）。 TCP（Transmission Control Protocol，传输控制协议）是一种可靠的、面向连接的协议。它负…...

编程日记 2025/8/2 13:41:30

蓝桥杯之数论

文章目录习题质数找素数 LCM报数游戏快速幂数字诗意组合数与错位排序小蓝与钥匙同余取模数论，就是一些数学问题，蓝桥杯十分喜欢考察，常见的数论的问题有：取模，同余，大整数分解，素数&#x…...

编程日记 2025/8/1 12:52:39

无法写入文件:(FileSystemError): Error: EPERM: operation not permitted, open...)

问题分析： 当我想在Visual Studio Code中编写文件时，出现无法写入文件的错误，发现是权限的问题解决办法： 右键应用图标 → 以管理员身份运行就可以了...

编程日记 2025/7/13 3:14:25

Java爬虫抓取B站视频信息

依赖 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.17.2</version> </dependency>编码 public static List<VideoDto> parseSearchPage(Str…...

编程日记 2025/7/29 18:40:48

Sql Server数据迁移易错的地方

背景：之前一直台式机，毕业准备答辩了，要将代码搬到笔记本运行才方便些。这个Sql数据弄过来搞了好几个小时还原备份报错：媒体簇的结构不正确。SQL Server 无法处理此媒体簇。解决：升级到sql server版本比备份的那个高…...

编程日记 2025/8/3 8:50:47

七、服务器远程桌面报错

🌻🌻目录🌻🌻 一、远程桌面报错-用户账户限制（例如，时间限制）会阻止你登录。一、远程桌面报错-用户账户限制（例如，时间限制）会阻止你登录。原因是被远程的系…...

编程日记 2025/7/30 22:10:28

JAVA 之「优先队列」：大顶堆与小顶堆的实现与应用

Java 优先队列：大顶堆与小顶堆的实现与应用文章目录 Java 优先队列：大顶堆与小顶堆的实现与应用一、什么是优先队列和堆？1. 优先队列2. 堆二、Java PriorityQueue 基本用法1. 默认小顶堆示例代码输出 2. 实现大顶堆示例代码输出三、大顶堆…...

编程日记 2025/8/1 9:30:08

压缩壳学习

壳是什么壳就是软件的一个保护套，防止软件被进行反编译或被轻易地修改。其作用就是为了保护软件。常见的大类壳有压缩壳、加密壳、VM 壳的分类。压缩壳顾名思义就是用来减小软件的文件大小的；加密壳，通过加密软件来保护软件&#xff…...

编程日记 2025/7/25 22:59:46

VRRP配置双出口ipsec隧道建立。

背景：在做毕设时，发现规划的不是那么合理，vrrp主备切换后，ipsec隧道并没有跟着切换到与备防火墙建立隧道，这是因为配置了双出口，路由的设计导致vrrp主备切换ipsec隧道没有跟着切换。 fw1为主，fw…...

编程日记 2025/8/1 23:23:19

机器学习——Numpy的神奇索引与布尔索引

在 NumPy 中，神奇索引（Fancy Indexing） 和布尔索引（Boolean Indexing） 是两种强大的索引方式，用于从数组中提取特定元素或子集。以下是它们的详细说明和示例： 1. 神奇索引（Fancy In…...

编程日记 2025/8/5 1:09:11

Linux：进程间通信

文章目录前言一、进程间通信介绍1.1 进程间通信的目的1.2 进程间通信的发展与分类二、管道2.1 匿名管道原理2.2 通信管道会出现的情况和特性（重要）2.3 命名管道2.3.1 命名管道与匿名管道的区别三、system V3.1 共享内存原理3.2 键值3.2.1 键值生成原理…...

编程日记 2025/8/3 12:59:55

Mysql配套测试之查询篇

🏝️专栏：Mysql_猫咪-9527的博客-CSDN博客 🌅主页：猫咪-9527-CSDN博客 “欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。” 目录条件查询简单测试： 1.查询英语成绩不及格的同学(<60) 2…...

编程日记 2025/8/4 19:52:15

基于SSM框架的汽车租赁平台(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，汽车租赁平台当然不能排除在外。汽车租赁平台是在实际应用和软件工程的开发原理之上，运用Java语言以及SSM框架进行开发&#x…...

编程日记 2025/7/29 13:55:05

常考计算机操作系统面试习题（三下）

20. 请求页式存储管理系统缺页率计算题目： 假设一个作业的页面走向为 1、2、3、4、1、2、5、1、2、3、4、5，当分配给该作业的物理块数分别为 3 和 4 时，计算采用下述页面置换算法的缺页率： (1) 先进先出（FIFO&…...

编程日记 2025/8/2 13:31:45