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

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 显示等级设置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37017.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

已有公司将ChatGPT集成到客服中心以增强用户体验

Ozonetel正在利用ChatGPT来改善客户体验。该公司表示&#xff0c;他们通过使用ChatGPT收集与客户互动过程收集的“语料”能够更有针对性地提高服务效率&#xff0c;提供个性化的用户体验&#xff0c;并实现更高的客户满意度。[1] 通过这套解决方案&#xff0c;客服中心将拥有一…

Struts2一次请求参数问题的记录

最近&#xff0c;一次前端正常请求&#xff0c;但后台出现请求参数值的变化&#xff0c;导致报错&#xff0c;问题如下&#xff1a; 从入参request中查看请求参数&#xff0c;是一个Json字符串&#xff0c;其中有个description的键值对&#xff1b; 但是&#xff0c;接下来调用…

【需求输出】用户故事方法

文章目录 1、初识用户故事2、用户故事是描述需求的最好方式3、创建用户故事4、用户故事的分层管理5、编写用户故事的工具 1、初识用户故事 2、用户故事是描述需求的最好方式 3、创建用户故事 4、用户故事的分层管理 5、编写用户故事的工具

软件测试基础之软件缺陷处理

一、什么是缺陷 不满足用户确定需求、影响软件功能实现的问题、故障 缺陷就是人们通常所说的bug。 ex.一下哪一种选项不属于软件缺陷___。 A.软件没有实现产品规格说明所要求的功能 B.软件中出现了产品规格说明不应该出现的功能 C.软件实现了产品规格说明没有提到的功能 D.软…

Python实现透明隧道爬虫ip:不影响现有网络结构

作为一名专业爬虫程序员&#xff0c;我们常常需要使用隧道代理来保护个人隐私和访问互联网资源。本文将分享如何使用Python实现透明隧道代理&#xff0c;以便在保护隐私的同时不影响现有网络结构。通过实际操作示例和专业的解析&#xff0c;我们将带您深入了解透明隧道代理的工…

Base64编码-算法特别的理解

Base64 在DES加密和AES加密的过程中&#xff0c;加密的编码会出现负数&#xff0c;在ascii码表中找不到对应的字符&#xff0c;就会出现乱码。为了解决乱码的问题&#xff0c;一般结合base64使用 所谓Base64&#xff0c;即是说在编码过程中使用了64种字符&#xff1a;大写A到Z、…

Azure资源命名和标记决策指南

参考 azure创建虚拟机在虚拟机中选择编辑标签&#xff0c;并添加标记&#xff0c;点击应用 3.到主页中转到所有资源 4. 添加筛选器并应用 5.查看结果&#xff0c;筛选根据给服务器定义的标签筛选出结果。 参考链接: https://learn.microsoft.com/zh-cn/azure/cloud-adoption…

在Java中操作Redis(详细-->从环境配置到代码实现)

在Java中操作Redis 文章目录 在Java中操作Redis1、介绍2、Jedis3、Spring Data Redis3.1、对String的操作3.2、对哈希类型数据的操作3.3、对list的操作3.4、对set类型的操作3.5、对 ZSet类型的数据&#xff08;有序集合&#xff09;3.6、通用类型的操作 1、介绍 Redis 的Java客…

基于Echarts的数据可视化大屏

本项目学习于b站up主&#xff08;视频链接&#xff09; up主分享的资料&#xff0c;gitee仓库&#xff1a; 其中有笔记&#xff0c;笔记链接 项目总结 项目主要分为前端页面的布局和Echarts图表的嵌入&#xff0c;页面主要就是css较为繁琐&#xff0c;图表毕竟官网有模板&…

数组slice、splice字符串substr、split

一、定义 这篇文章主要对数组操作的两种方法进行介绍和使用&#xff0c;包括&#xff1a;slice、splice。对字符串操作的两种方法进行介绍和使用&#xff0c;包括&#xff1a;substr、split (一)、数组 slice:可以操作的数据类型有&#xff1a;数组字符串 splice:数组 操作数组…

计算机网络-物理层(一)物理层的概念与传输媒体

计算机网络-物理层&#xff08;一&#xff09;物理层的概念与传输媒体 物理层相关概念 物理层的作用用来解决在各种传输媒体上传输比特0和1的问题&#xff0c;进而为数据链路层提供透明(看不见)传输比特流的服务物理层为数据链路层屏蔽了各种传输媒体的差异&#xff0c;使数据…

最新Kali Linux安装教程:从零开始打造网络安全之旅

Kali Linux&#xff0c;全称为Kali Linux Distribution&#xff0c;是一个操作系统(2013-03-13诞生)&#xff0c;是一款基于Debian的Linux发行版&#xff0c;基于包含了约600个安全工具&#xff0c;省去了繁琐的安装、编译、配置、更新步骤&#xff0c;为所有工具运行提供了一个…

[低端局][cx32L003] 移植U8G2

文章目录 一、简介&#xff08;1&#xff09;U8g2&#xff08;2&#xff09;U8x8 二、配置要求三、移植步骤&#xff08;1&#xff09;文件准备和添加&#xff08;2&#xff09;实现回调接口(I2C的读写函数)①软件I2C②硬件I2C &#xff08;3&#xff09;功能裁剪① u8g2_d_set…

Python Selenium 设置带账号密码的socks5代理,启动浏览器

selenium添加带有账密的socks5代理 我们都知道在使用selenium开发爬虫的时候不可避免的会使用socks5高匿名代理。一般情况下我们使用方法如下(开发语言为python)&#xff1a; from selenium import webdriver chrome_options webdriver.ChromeOptions() chrome_options.add_…

Java并发之ReentrantLock

AQS AQS&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff1a;抽象队列同步器&#xff0c;是一种用来构建锁和同步器的框架。在是JUC下一个重要的并发类&#xff0c;例如&#xff1a;ReentrantLock、Semaphore、CountDownLatch、LimitLatch等并发都是由AQS衍生出来…

React Native Expo项目,复制文本到剪切板

装包&#xff1a; npx expo install expo-clipboard import * as Clipboard from expo-clipboardconst handleCopy async (text) > {await Clipboard.setStringAsync(text)Toast.show(复制成功, {duration: 3000,position: Toast.positions.CENTER,})} 参考链接&#xff1a…

3.文件目录

第四章 文件管理 3.文件目录 ​   对于D盘这个根目录来说它对应的目录文件就是图中的样子&#xff0c;其实就是用一个所谓的目录表来表示这个目录下面存放了哪些东西。在D盘中的每一个文件&#xff0c;每一个文件夹都会对应这个目录表中的一个表项&#xff0c;所以其实这些一…

Autoware感知02—欧氏聚类(lidar_euclidean_cluster_detect)源码解析

文章目录 引言一、点云回调函数&#xff1a;二、预处理&#xff08;1&#xff09;裁剪距离雷达过于近的点云&#xff0c;消除车身的影响&#xff08;2&#xff09;点云降采样&#xff08;体素滤波&#xff0c;默认也是不需要的&#xff09;&#xff08;3&#xff09;裁剪雷达高…

【概念篇】文件概述

✅作者简介&#xff1a;大家好&#xff0c;我是小杨 &#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文件概述 1&#xff0c;文件的概念 狭义上的文件是计算机系统中用于存储和组织数据的一种数据存…

React源码解析18(5)------ 实现函数组件【修改beginWork和completeWork】

摘要 经过之前的几篇文章&#xff0c;我们实现了基本的jsx&#xff0c;在页面渲染的过程。但是如果是通过函数组件写出来的组件&#xff0c;还是不能渲染到页面上的。 所以这一篇&#xff0c;主要是对之前写得方法进行修改&#xff0c;从而能够显示函数组件&#xff0c;所以现…