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

OpenLayers 加载ArcGIS瓦片数据

article 2025/6/2 14:56:29

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

随着GIS应用的不断发展，Web地图也越来越丰富，除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式，也有Google、百度、高德、腾讯提供的GIS资源，如何加载各种GIS数据源，是WebGIS开发要解决的一个关键问题。

本节主要介绍加载百度地图数据。

1. 如何加载百度地图数据

可以参照瓦片地图的方法来加载百度地图，在OpenLayer 5地图库中没有加载百度地图数据源的方法，所以需要根据百度地图瓦片请求格式拓展数据源来加载。

// 分辨率数组
const resolutions = []
for (let i = 0; i < 19; i++) {resolutions[i] = Math.pow(2, 18 - i)
}const tileGrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions
})
// 百度地图数据源
const baiduSource = new ol.source.TileImage({projection: projection, // 坐标参考tileGrid: tileGrid, // 瓦片请求方式tileUrlFunction: function (tileCoord, pixelRatio, proj) {if (!tileCoord) {return ""}const z = tileCoord[0]let x = tileCoord[1]let y = tileCoord[2]if (x < 0) {x = "M" + (-x)}if (y < 0) {y = "M" + (-y)}return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";}
})
  • tileUrlFunction

拼接瓦片地图URL，{x}{y}{z}对应瓦片行列号和级数。

  • projection

地图投影坐标系，百度地图才用EPSG:3857坐标系。

  • tileGrid

切片网格，地图切片原点为[0,0]

2. 完整代码2

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加载Baidu数据</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style></head><body><div id="map" title="地图显示"></div></body></html><script>//地图投影坐标系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地图服务参数简单介绍============================////================================vec：矢量图层=================================////================================img：影像图层=================================////================================cva：注记图层=================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影============////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地图影像注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11421771, 4288300],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: projection}),// 鼠标控件：鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([// 加载鼠标控件new ol.control.MousePosition()])})// map.addLayer(TDTImgLayer)// map.addLayer(TDTImgCvaLayer)const resolutions = []for (let i = 0; i < 19; i++) {resolutions[i] = Math.pow(2, 18 - i)}const tileGrid = new ol.tilegrid.TileGrid({origin: [0, 0],resolutions: resolutions})// 百度地图数据源const baiduSource = new ol.source.TileImage({projection: projection,tileGrid: tileGrid,tileUrlFunction: function (tileCoord, pixelRatio, proj) {if (!tileCoord) {return ""}const z = tileCoord[0]let x = tileCoord[1]let y = tileCoord[2]if (x < 0) {x = "M" + (-x)}if (y < 0) {y = "M" + (-y)}return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";}})const baiduLayer = new ol.layer.Tile({source: baiduSource})map.addLayer(baiduLayer)
</script>

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注 哦 ！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !

相关文章：

OpenLayers 加载ArcGIS瓦片数据

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 随着GIS应用的不断发展&#xff0c;Web地图也越来越丰富&#xff0c;除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式&#xff0c;也有Google…...

编程日记 2025/6/1 14:33:46

2025蓝桥杯WP

引言 在2025年蓝桥杯网络安全赛道中&#xff0c;我们面对涵盖Web安全、逆向工程、PWN、取证分析以及加密解密等多领域的挑战&#xff0c;要求选手具备扎实且全面的安全技术与实战能力。本文将以实战记录的形式&#xff0c;逐题详细还原解题思路与操作步骤&#xff0c;并配以相…...

编程日记 2025/6/1 18:02:39

数字人教师：开启教育智慧革新之旅

在科技浪潮的推动下&#xff0c;教育领域正经历一场由数字人教师引领的深刻变革&#xff0c;这不仅是技术与教育融合的创新实践&#xff0c;更是教育模式重塑的关键路径。 一、数字人教师的崛起&#xff1a;教育变革的必然选择 随着互联网、大数据、人工智能等前沿技术的飞速…...

编程日记 2025/6/2 11:32:22

Linux中Java开发、部署和运维常用命令

在Java开发、部署和运维过程中&#xff0c;Linux操作系统常用的一些命令可以帮助开发人员、运维人员管理系统、查看日志、控制进程等。以下是一些常见的Linux命令&#xff1a; 1. 文件和目录操作 ls&#xff1a;列出当前目录下的文件和文件夹。 ls -l&#xff1a;显示详细信息…...

编程日记 2025/6/2 6:09:16

详解srs流媒体服务器的集群

前言&#xff1a; 什么是集群 集群就是多台计算机或服务器等资源&#xff0c;联在一起像一台大机器一样工作。比如一群蚂蚁一起搬东西&#xff0c;这些蚂蚁就类似集群里的各个部分。 为什么要集群 性能更强&#xff1a;能把任务分到多个机器上做&#xff0c;一起处理更快&…...

编程日记 2025/5/31 6:23:05

ubuntu22.04 安装 SecureCRT8.7.3

用到的全部软件&#xff0c;都放在这个网盘里面了&#xff0c;自取。 链接: https://pan.baidu.com/s/1AR6Lj8FS7bokMR5IrLmsIw?pwd3dzv 提取码: 3dzv 如果链接失效了&#xff0c;关注公号&#xff1a;每日早参&#xff0c;回复&#xff1a;资源&#xff0c;即可免费获取&…...

编程日记 2025/6/2 0:51:50

Day 37

继续之前的学习 过拟合的判断 import torch import torch.nn as nn import torch.optim as optim from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.preprocessing import MinMaxScaler import time import matpl…...

编程日记 2025/6/2 10:45:49

libvirt设置虚拟机mtu实现原理

背景 云计算场景下，可以动态调整虚拟机mtu，提高虚拟机网络性能。设置虚拟机（VM）virtio网卡的MTU（Maximum Transmission Unit）涉及 ​​宿主机（Host）、QEMU/KVM、vhost-net后端​​ 和 ​​虚拟机内部的virtio驱动​​之间的协作。 原理分析 1.libvirt设置mtu分析 libv…...

编程日记 2025/6/1 15:50:37

AstroNex空间任务智能控制研究与训练数据集

数据集概述 AstroNex空间任务智能控制研究与训练数据集是朗迪锋科技基于Multiverse平台精心打造的首个全面覆盖航天器智能控制全周期的综合数据集产品。该数据集汇集了轨道动力学、姿态控制、机器视觉、环境感知等多维度数据&#xff0c;为航天器智能算法研发提供丰富的训练与…...

编程日记 2025/6/1 9:31:44

汽车副水箱液位传感器介绍

汽车副水箱液位传感器是现代车辆冷却系统中不可或缺的关键部件，其核心功能在于实时监测冷却液存量，确保发动机在最佳温度范围内稳定运行。随着汽车电子化程度不断提升，这一看似简单的传感器已发展成为集机械、电子、材料技术于一体的精密装置，其工作原理与技术演进值得深入…...

编程日记 2025/6/2 12:16:07

Docker+MobaXterm+x11实现容器UI界面转发本地

本文记录了搭建一个可直接ssh访问的container&#xff0c;并可通过x11转发界面的实现过程 0.1 实验环境 PC&#xff1a;windows 11 Server&#xff1a;Ubuntu 18.04 Docker image&#xff1a;Ubuntu 18.04 1. 获取Ubuntu 18.04的镜像 使用Dockerfile获取镜像&#xff0c;对…...

编程日记 2025/6/1 5:29:48

IEEE出版|2025年智能制造、机器人与自动化国际学术会议 (IMRA2025)

【重要信息】 会议官网&#xff1a;www.icimra.com 会议时间: 2025年11月14日-16日 会议地点: 中国湛江 截稿日期&#xff1a;2025年09月16日(一轮截稿) 接收或拒收通知&#xff1a;文章投递后5-7个工作日 会议提交检索&#xff1a;EI Compendex, Scopus IEEE出版|2025年…...

编程日记 2025/6/1 18:38:08

EasyRTC嵌入式SDK音视频实时通话助力WebRTC技术与智能硬件协同发展

一、概述 在万物互联的数字化浪潮下&#xff0c;智能硬件已广泛渗透生活与工业领域&#xff0c;实时音视频通信成为智能硬件实现高效交互的核心需求。WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;而EasyRTC通过深度优化音…...

编程日记 2025/6/2 8:06:41

Higress MCP Server 安全再升级：API 认证为 AI 连接保驾护航

Higress MCP Server 安全再升级&#xff1a;API 认证为 AI 连接保驾护航 Higress 作为一款强大的 AI 原生 API 网关&#xff0c;致力于铺设 AI 与现实世界之间最短、最安全、最具成本效益的连接路径。其核心能力之一便是支持将现有的 OpenAPI 规范无缝转换为 MCP Server&#…...

编程日记 2025/6/1 11:37:48

多个vue2工程共享node_modules

手头有多个vue2项目&#xff0c;它们每个都需要一个node_modules&#xff0c;拷贝起来超级麻烦。于是想到能否共享一个node_modules呢&#xff1f;&#xff1f; 方法其实挺多&#xff0c;我选择了一个较简单的&#xff1a;符号连接法(win11平台) 创建方法很简单&#xff1a;比…...

编程日记 2025/6/2 6:13:42

蓝桥杯178 全球变暖

题目描述 你有一张某海域 NxN 像素的照片&#xff0c;"."表示海洋、"#"表示陆地&#xff0c;如下所示&#xff1a; ....... .##.... .##.... ....##. ..####. ...###. ....... 其中"上下左右"四个方向上连在一起的一片陆地组成一座岛屿。例如上…...

编程日记 2025/6/2 5:00:47

多模态理解大模型高性能优化丨前沿多模态模型开发与应用实战第七期

一、引言 在前序课程中&#xff0c;我们系统剖析了多模态理解大模型&#xff08;Qwen2.5-VL、DeepSeek-VL2&#xff09;的架构设计。鉴于此类模型训练需消耗千卡级算力与TB级数据&#xff0c;实际应用中绝大多数的用户场景均围绕推理部署展开&#xff0c;模型推理的效率影响着…...

编程日记 2025/6/1 16:46:49

mysql 合集

mysql 日志主要分为三个日志&#xff1a;redo log、binlog、undo log; redo log 主要是用来mysql 奔溃恢复 redo log 主要是有一个机制是 设置刷盘机制&#xff1a; 通过innodb_flush_log_at_trx_commit控制刷盘策略&#xff1a; 1&#xff1a;每次事务提交都刷盘&#xff08…...

编程日记 2025/6/1 3:07:24

Zustand V5教程：Vanilla Store 与 useStore 使用详解 + 实战 Demo

Zustand 是一个轻量、灵活的状态管理库。自从 Zustand v4 推出 Vanilla Store 后&#xff0c;我们可以更优雅地在组件外&#xff08;如 API 拦截器、工具函数&#xff09;访问状态&#xff0c;同时在组件内继续享受响应式的状态订阅。 本教程将通过一个“登录状态管理”示例&a…...

编程日记 2025/6/2 13:18:23

docker 搭建php 开发环境 添加扩展redis、swoole、xdebug（1）

docker-compose搭建lnmp 先决条件 首先需要安装docker 安装docker-compost 1、创建lnmp工作目录 #创建三个目录 mkdir lnmp && cd lnmp mkdir -p nginx/conf php mysql/data lnmp/www#编写nginx 配置文件 nginx/conf/default.conf vim nginx/conf/default.confserv…...

编程日记 2025/5/31 17:15:31

人脸识别技术合规备案最新政策详解

《人脸识别技术应用安全管理办法》将于2025年6月1日正式实施&#xff0c;该办法从技术应用、个人信息保护、技术替代、监管体系四方面构建了人脸识别技术的治理框架&#xff0c;旨在平衡技术发展与安全风险。 一、明确技术应用的边界 公共场所使用限制&#xff1a;仅在“维护公…...

编程日记 2025/6/1 21:43:32

(16)高性能风控系统设计

文章目录 &#x1f680; 高性能风控系统设计&#xff1a;千万级QPS实时风控解决方案TL;DR&#x1f3d7;️ 系统整体架构&#x1f4bb; Java技术栈选型详解1️⃣ 接入层技术选型&#x1f525; 接入层代码示例 2️⃣ 规则引擎层技术选型&#x1f9e0; 规则引擎优化技巧 3️⃣ 数据…...

编程日记 2025/6/1 11:58:35

AStar低代码平台-脚本调用C#方法

修改报工表表单&#xff0c;右键定义弹出菜单&#xff0c;新增一个菜单项&#xff0c;并在点击事件脚本中编写调用脚本。 编译脚本&#xff0c;然后在模块代码里面定义这个方法&#xff1a; public async Task<int> on_call_import(DataRow curRow) {PrintDataRow(cur…...

编程日记 2025/5/31 13:56:28

企业级RAG技术实战指南：从理论到落地的全景解析

前言 在大模型技术日新月异的今天&#xff0c;检索增强生成&#xff08;RAG&#xff09;技术正成为企业突破AI应用瓶颈的关键利器。当传统AI系统还在处理结构化数据的泥潭中挣扎时&#xff0c;RAG技术已经打开了通向非结构化知识海洋的大门。这本《RAG技术实战指南》以独特的工…...

编程日记 2025/6/1 18:00:33

getline()跳过输入

std::getline(cin, s) 第一个参数传递的是输入流&#xff1a;istream(输入流的基类), ifstream, istrstream 的引用&#xff1b; 第二个参数传递的是本地字符串引用&#xff0c;即从输入流读出来的东西要存放的位置。 会跳过getline()的输入 cin >> ch; getline(cin, s…...

编程日记 2025/6/1 18:03:09

【八股战神篇】RabbitMQ高频面试题

简述RabbitMQ五种模式 &#xff1f; 延伸 请介绍一下RabbitMQ的特点 延伸 简述RabbitMQ的发布与订阅模式 延伸 RabbitMQ 如何保证消息不丢失&#xff1f; 延伸 RabbitMQ 如何保证消息有序&#xff1f; 延伸 专栏简介 八股战神篇专栏是基于各平台共上千篇面经&#xf…...

编程日记 2025/6/1 15:39:44

高阶数据结构——红黑树实现

目录 1.红黑树的概念 1.1 红黑树的规则&#xff1a; 1.2 红黑树的效率 2.红黑树的实现 2.1 红黑树的结构 2.2 红黑树的插入 2.2.1 不旋转只变色&#xff08;无论c是p的左还是右&#xff0c;p是g的左还是右&#xff0c;都是一样的变色处理方式&#xff09; 2.2.2 单旋变色…...

编程日记 2025/6/2 6:17:32

互联网大厂Java求职面试：AI与大模型应用集成中的架构难题与解决方案

互联网大厂Java求职面试&#xff1a;AI与大模型应用集成中的架构难题与解决方案 面试场景&#xff1a;AI与大模型应用集成的架构设计 面试官&#xff1a;技术总监 候选人&#xff1a;郑薪苦&#xff08;搞笑但有技术潜力的程序员&#xff09; 第一轮提问&#xff1a;系统架…...

编程日记 2025/6/1 1:27:03

安卓学习笔记-声明式UI

声明式UI Jetpack Compose 是 Google 推出的用于构建 Android UI 的现代化工具包。它采用 声明式编程模型&#xff08;Declarative UI&#xff09;&#xff0c;用 Kotlin 编写&#xff0c;用于替代传统的 XML View 的方式。一句话概括&#xff1a;Jetpack Compose 用 Kotlin…...

编程日记 2025/6/2 12:08:31

AI天气预报进入“大模型时代“：如何用Transformer重构地球大气模拟？

引言：从数值预报到AI大模型的范式变革 传统的天气预报依赖于数值天气预报（NWP, Numerical Weather Prediction），通过求解大气动力学方程（如Navier-Stokes方程）进行物理模拟。然而，NWP计算成本极高，依赖超级计算机，且难以处理小尺度天气现象（如短时强降水）。 近年来…...

编程日记 2025/6/2 11:47:35