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

Openlayers 实战 - 地图视野（View）- 图层 -（layer）- 资源（source）显示等级设置。

news 2026/2/10 22:22:47

Openlayers 实战 - 地图视野（View）- 图层 -（layer）- 资源（source）显示等级设置。

    • 问题原因
    • 核心代码
    • 完整代码：
    • 在线示例

在以往的项目维护中，出现一个问题，使用最新高清底图发现，设置地图最大等级（21级）之后，地图虽然可以渲染 21 级图层，但是并没有请求 21 级图层瓦片数据。

思考之后，认为是地图等级参数限制，经过调试发现问题所在不仅于此，后来解决问题，这里记录一下。

本文包括问题原因、问题解决核心代码以及在线示例。

问题原因

地图图层想要设置缩放等级，需要三个条件：

1. 地图视野 View 对象设置 minzoom maxzoom 参数。

2. 图层 layer 对象设置 minzoom maxzoom 参数。

3. 资源 source 设置分辨率 tileGrid-resolutions 参数。

三个条件缺一不可，以下分别设置部分对象属性出现的问题：

1.只设置地图，不设置图层，地图可以放大，但是不会请求资源；由于图层没有资源，会显示空白。

PS: 下图额外加载了一个显示 zoom 的图层。

在这里插入图片描述

2. 只设置图层，不设置地图，地图不能继续放大，因此也不会加载高等级图层瓦片。

在这里插入图片描述

3. 设置地图以及图层，不设置资源，地图和图层可以放大，但是不会请求资源，只是图片放大了，看起来会模糊。

在这里插入图片描述

4. 地图视野、图层、资源同时设置，会正常请求相应的数据。

在这里插入图片描述

核心代码

这里放上控制地图视野（View）、图层（Layer）、资源（Source）对象缩放等级的代码：

其中加载了一个显示瓦片索引的图层，用来查看图层瓦片请求情况：瓦片索引的图层


// 地图视野等级设置
function viewZoom() {view.setMaxZoom(maxZoom);view.setZoom(defaultMaxZoom + 1);
}// 图层等级设置
function layerZoom() {layer.setMaxZoom(maxZoom);
}// 图层资源等级设置
function sourceZoom() {layer.setSource(getOptional(getUrl(),maxZoom))
}// 还原所有缩放等级
function restoreZoom() {view.setMaxZoom(defaultMaxZoom);layer.setMaxZoom(defaultMaxZoom);layer.setSource(getOptional(getUrl(),defaultMaxZoom))view.setZoom(defaultMaxZoom);
}

完整代码：


<html lang="en">
<head><meta charset="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><title>OpenLayers example</title>
</head>
<body>
<h2>View Layer Zoom</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<script type="text/javascript">// 自己的tklet TK = '2b7cbf61123cbe4e9ec6267a87e7442f';// 默认地图等级const defaultMaxZoom = 14;// 设置新的最大等级const maxZoom = 18;// 定位测试等级const moveToZoom = 16;// 获取天地图资源地址let getUrl = function (type = 'IMG_C') {let url = 'http://t{randomNumber}.tianditu.gov.cn/DataServer?T={type}&x={x}&y={y}&l={z}';url = url.replace('{randomNumber}', Math.round(Math.random() * 7).toString());url = url.replace('{type}', type);url = url + "&tk=" + TK;return url;}// 获取分辨率数组let getResolutionsExpert = function (size, maxZoom = defaultMaxZoom) {let resolutions = new Array(maxZoom);let matrixIds = new Array(maxZoom);for (let z = 0; z < maxZoom + 1; ++z) {//分辨率resolutions[z] = size / Math.pow(2, z);//放大等级matrixIds[z] = z;}return resolutions;}// 获取图层资源对象let getOptional = function (url, maxZoom) {let projection = ol.proj.get('EPSG:4326');let projectionExtent = projection.getExtent();let size = ol.extent.getWidth(projectionExtent) / 256;return new ol.source.XYZ({crossOrigin: 'anonymous',wrapX: true,//切片xyz获取方法tileUrlFunction: function (tileCoord) {const z = tileCoord[0];const x = tileCoord[1];let y = tileCoord[2];let completeUrl = url.replace('{z}', z.toString()).replace('{y}', y.toString()).replace('{x}', x.toString());return completeUrl;},//坐标系projection: projection,tileGrid: new ol.tilegrid.TileGrid({origin: ol.extent.getTopLeft(projectionExtent),tileSize: [256, 256],//分辨率数组 天地图为 1.40625resolutions: getResolutionsExpert(size, maxZoom)}),})}// 初始图层资源对象const source = getOptional(getUrl());//影像图function getIMG_CLayer() {let layer = new ol.layer.Tile({name: "天地图影像图层",source: source,maxZoom: defaultMaxZoom,minZoom: 1,});return layer;}// 地图视野对象const view = new ol.View({projection: "EPSG:4326",// 定位center: [116, 39],// 缩放zoom: defaultMaxZoom,maxZoom: defaultMaxZoom,minZoom: 1,});// 图层对象const layer = getIMG_CLayer();// 网格图层参数const size = 256;const canvas = document.createElement('canvas');canvas.width = size;canvas.height = size;const context = canvas.getContext('2d');context.strokeStyle = 'white';context.textAlign = 'center';context.font = '40px sans-serif';const lineHeight = 15;// 地图对象const map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [layer,// 添加网格图层，显示等级：Znew ol.layer.WebGLTile({source: new ol.source.DataTile({loader: function (z, x, y) {const half = size / 2;context.clearRect(0, 0, size, size);context.fillStyle = 'rgba(100, 100, 100, 0.1)';context.fillRect(0, 0, size, size);context.fillStyle = 'white';context.fillText(`z: ${z}`, half, half + lineHeight);// context.fillText(`x: ${x}`, half, half);// context.fillText(`y: ${y}`, half, half + lineHeight);context.strokeRect(0, 0, size, size);const data = context.getImageData(0, 0, size, size).data;// converting to Uint8Array for increased browser compatibilityreturn new Uint8Array(data.buffer);},// disable opacity transition to avoid overlapping labels during tile loadingtransition: 0,}),}),],// 地图视野view: view});// 地图视野等级设置function viewZoom() {view.setMaxZoom(maxZoom);view.setZoom(defaultMaxZoom + 1);}// 图层等级设置function layerZoom() {layer.setMaxZoom(maxZoom);}// 图层资源等级设置function sourceZoom() {layer.setSource(getOptional(getUrl(),maxZoom))}// 还原所有缩放等级function restoreZoom() {view.setMaxZoom(defaultMaxZoom);layer.setMaxZoom(defaultMaxZoom);layer.setSource(getOptional(getUrl(),defaultMaxZoom))view.setZoom(defaultMaxZoom);}
</script><button id="viewZoom" onClick="viewZoom()">设置地图缩放等级（不改变 layer 和 source）</button>
<button id="layerZoom" onClick="layerZoom()">设置图层缩放等级（不改变 map 和 source）</button>
<button id="sourceZoom" onClick="sourceZoom()">设置资源缩放等级（不改变 map 和 layer）</button>
<button id="restoreZoom" onClick="restoreZoom()">还原所有缩放等级</button>
</body>
</html>

在线示例

在线示例：Openlayers 显示等级设置

相关文章：

Openlayers 实战 - 地图视野（View）- 图层 -（layer）- 资源（source）显示等级设置。

Openlayers 实战 - 地图视野&#xff08;View&#xff09;- 图层 -&#xff08;layer&#xff09;- 资源&#xff08;source&#xff09;显示等级设置。 问题原因核心代码完整代码&#xff1a;在线示例 在以往的项目维护中&#xff0c;出现一个问题&#xff0c;使用最新高清底图…...

编程日记 2023/8/16 13:44:43

Linux:shell脚本 正则表达式与AWK

一、正则表达式 由一类特殊字符及文本字符所编写的模式&#xff0c;其中有些字符&#xff08;元字符&#xff09;不表示字符字面意义&#xff0c;而表示控制或通配的功能&#xff0c;类似于增强版的通配符功能&#xff0c;但与通配符不同&#xff0c;通配符功能是用来处理文件…...

编程日记 2023/8/16 13:43:42

Android UI自动化测试框架—SoloPi简介

1、UI自动化测试简介 软件测试简介 ​软件测试是伴随着软件开发一同诞生的&#xff0c;随着软件规模大型化&#xff0c;结构复杂化&#xff0c;软件测试也从最初的简单“调试”&#xff0c;发展到当今的自动化测试。 ​ 自动化测试是什么呢&#xff1f;自动化测试是把以人为…...

编程日记 2023/8/16 13:42:41

Android Studio Giraffe 正式版下载地址

Android Studio 是 Android 的官方 IDE。它专为 Android 而打造&#xff0c;可以加快您的开发速度&#xff0c;帮助您为每款 Android 设备构建最高品质的应用。 比以往更快地编码和迭代 Android Studio 基于 IntelliJ IDEA 而构建&#xff0c;可以提供较短的编码和运行工作流…...

编程日记 2023/8/16 13:41:40

【C语言】调试技巧

目录 一、什么是bug? 二、调试 1.一般调试的步骤 2.Debug 和 Release 三、调试环境准备 四、调试时要查看的信息 1.查看临时变量的值 2.查看内存信息 3.查看调用堆栈 4.查看反汇编信息 5.查看寄存器 五、练习 六、常见的coding技巧 七、const的作用 八、编程常见…...

编程日记 2023/8/16 13:40:38

MySQL SUBSTRING_INDEX() 函数的详细介绍

MySQL SUBSTRING_INDEX() 从给定字符串中返回指定数量的分隔符出现之前的子字符串。 当指定数字为正数时从最终分隔符的左侧返回子字符串&#xff0c;当指定数字为负数时从最终分隔符的右侧返回子字符串。 如果指定的次数大于分隔符的出现次数&#xff0c;则返回的子字符串将…...

编程日记 2023/8/16 13:39:37

开源数据库Mysql_DBA运维实战 （DML/DQL语句）

DML/DQL DML INSERT 实现数据的 插入 实例&#xff1a; DELETE 实现数据的 删除 实例&#xff1a; UPDATE 实现数据的 更新 实例1&#xff1a; 实例2&#xff1a; 实例3&#xff1a; DQL DML/DQL DML语句 数据库操纵语言&#xff1a; 插入数据INSERT、删除数据DELE…...

编程日记 2023/8/16 13:38:34

【LangChain】Memory

概要 大多数LLM应用都有对话界面。对话的一个重要组成部分是能够引用对话中先前介绍的信息。至少&#xff0c;对话系统应该能够直接访问过去消息的某些窗口。更复杂的系统需要有一个不断更新的世界模型&#xff0c;这使得它能够执行诸如维护有关实体及其关系的信息之类的事情。…...

编程日记 2023/8/16 13:37:33

Java并发编程（六）线程池[Executor体系]

概述 在处理大量任务时,重复利用线程可以提高程序执行效率,因此线程池应运而生。 它是一种重用线程的机制,可以有效降低内存资源消耗提高响应速度。当任务到达时&#xff0c;任务可以不需要的等到线程创建就能立即执行线程池可以帮助我们更好地管理线程的生命周期和资源使用,…...

编程日记 2023/8/16 13:36:31

macOS CLion 使用 bits/stdc++.h

macOS 下 CLion 使用 bits/stdc.h 头文件 terminal运行 brew install gccCLion里配置 -D CMAKE_CXX_COMPILER/usr/local/bin/g-11...

编程日记 2023/8/16 13:35:30

PS出现的问题——为什么PS另存的格式少了很多

在WIN11系统里面新安装的22和23版本PS会出现另存格式少的情况 解决方式&#xff1a;编辑——首选项——文件处理——开启旧版储存为 解决...

编程日记 2023/8/16 13:34:29

【Linux】进程通信篇Ⅱ：共享内存、消息队列、信号量

文章目录 一、共享内存1.1 一些接口1. shmget 函数&#xff1a;申请一个 system v 的共享内存块2. ftok 函数&#xff1a;设置唯一标识码3. shmctl 函数&#xff1a;控制 system v 的共享内存块&#xff08;可以删除、查看...&#xff09;4. shmat 函数&#xff1a;将进程与共享…...

编程日记 2023/8/16 13:33:27

8.14 校招 内推 面经

绿泡泡&#xff1a; neituijunsir 交流裙&#xff0c;内推/实习/校招汇总表格 1、半导体芯片一周资讯 - 小米OPPO之后&#xff0c;星纪魅族调整芯片业务&#xff0c;今年应届生或被全部优化&#xff0c;英伟达2024推出比H100更快的芯片 半导体芯片一周资讯 - 小米OPPO之后&…...

编程日记 2023/8/16 13:32:21

阿里云服务器安装部署Docker使用教程

本文阿里云百科分享如何在云服务ECS实例上&#xff0c;部署并使用Docker。Docker是一款开源的应用容器引擎&#xff0c;具有可移植性、可扩展性、高安全性和可管理性等优势。开发者可将应用程序和依赖项打包到一个可移植的容器中&#xff0c;快速发布到Linux机器上并实现虚拟化…...

编程日记 2023/8/16 13:31:19

WebRTC | ICE详解

目录 一、Candidate种类与优先级 二、ICE策略 1. iceServers 2. iceTransportPolicy 三、P2P连接 1.Nat类型 &#xff08;1&#xff09;完全锥型NAT &#xff08;2&#xff09;IP限制锥型NAT &#xff08;3&#xff09;端口限制锥型NAT &#xff08;4&#xff09;对称…...

编程日记 2023/8/16 13:30:16

网络设备（防火墙、路由器、交换机）日志分析监控

外围网络设备&#xff08;如防火墙、路由器、交换机等&#xff09;是关键组件&#xff0c;因为它们控制进出公司网络的流量。因此&#xff0c;监视这些设备的活动有助于 IT 管理员解决操作问题&#xff0c;并保护网络免受攻击者的攻击。通过收集和分析这些设备的日志来监控这些…...

编程日记 2023/8/16 13:29:15

2023年国赛数学建模思路 - 复盘：人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 描述 …...

编程日记 2023/8/16 13:28:13

Compute shader SV 理解图

本图转子&#xff1a;【Computeshader】个人总结_蒋伟博的博客-CSDN博客...

编程日记 2023/8/16 13:27:11

生信豆芽菜-多种算法计算免疫浸润

网址&#xff1a;http://www.sxdyc.com/immuneInfiltration 一、使用方法 1、数据准备 一个全编码蛋白的表达谱基因&#xff0c;其中行为基因&#xff0c;列为样本 第一列为基因为行名&#xff0c;不能重复 2、选择计算的方法&#xff08;这里提供了5种免疫计算的方法&#x…...

编程日记 2023/8/16 13:26:10

逆向破解学习-单机斗地主

试玩 破解思路 9000 是成功的代码 Hook代码 import de.robv.android.xposed.XC_MethodHook; import de.robv.android.xposed.XposedHelpers; import de.robv.android.xposed.callbacks.XC_LoadPackage; public class HookComJuneGameDouDiZhu extends HookImpl{ Override p…...

编程日记 2023/8/16 13:25:09

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2026/2/10 4:35:17

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/2/4 16:13:50

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2026/2/6 13:10:51

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54