前言

客户在iServer发布rest地图服务之后，预览能够正常放大，但当leaflet前端对接的时候，发现最大只能放大到某一层级（如下图），达不到预期效果。
在leaflet中，默认的maxZoom为18。当你设置的值大于18后，然后缩放地图，虽然地图做出了缩放效果，但是你会发现地图变成空白，且http请求并未触发19的请求。接下来就介绍两种方法解决该问题。

一、修改参数

在初始化tileLayer是，追加一个参数layer.options.maxZoom。这个参数允许你设置超过18的zoom值，参考博客https://blog.csdn.net/qq_45149720/article/details/117199585，具体实现代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title data-i18n="resources.title_tiledMapLayer4326"></title><script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var host = window.isLocal ? window.server : "https://iserver.supermap.io";var map, url = "http://localhost:8090/iserver/services/map-LL/rest/maps/zoom";var layer=L.supermap.tiledMapLayer(url);map = L.map('map', {crs: L.CRS.EPSG4326,center: [ 39.86283085415676,116.37512261782454 ],zoom: 20});layer.options.maxZoom = 22;layer.addTo(map);
</script>
</body>
</html>

注：layer.options.maxZoom设置一定要在 layer.addTo(map)之前
效果展示

二、自定义resolution

该种方法是一个绕行方法，可以将服务发为wmts，自定义resolution，实现预期效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title data-i18n="resources.title_tiledMapLayer4326"></title><script type="text/javascript" src="../js/include-web.js"></script>
</head><body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"><div id="map" style="margin:0 auto;width: 100%;height: 100%"></div><script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script><script type="text/javascript">var host = window.isLocal ? window.server : "https://iserver.supermap.io";var map, url = "http://localhost:8090/iserver/services/map-LL/rest/maps/zoom";map = L.map('map', {crs: new L.Proj.CRS("EPSG:4326",{resolutions: [1.38236552221875E-5, 6.91182761109375E-6, 3.455913805546875E-6, 1.7279569027734376E-6, 8.639784513867188E-7, 4.319892256933594E-7, 2.159946128466797E-7, 1.0799730642333985E-7, 5.3998653211669925E-8, 2.6999326605834962E-8, 1.3499663302917481E-8, 6.749831651458741E-9, 3.3749158257293703E-9, 1.6874579128646852E-9, 8.437289564323426E-10, 4.218644782161713E-10, 2.1093223910808564E-10],bounds: L.bounds([-180, -90], [180, 90]),origin: [-180, 90],}),center: [39.86283085415676, 116.37512261782454],zoom: 5})L.supermap.tiledMapLayer(url).addTo(map);</script>
</body></html>

iClient for Leaflet解决地图放大问题相关推荐

Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
作者:gaogy 文章目录背景一.使用Vite构建Vue3+JavaScript项目二.搭建iClient for Leaflet开发环境三.第三方可视化库Echarts的使用四.第三方可视 ...
SuperMap iClient for Leaflet入门学习
Leaflet是一个开源的地图Javascript库: SuperMap iClient for Leaflet 在线示例: https://iclient.supermap.io/examples/ ...
SuperMap iClient for Leaflet实现拖动半径进行距离查询
作者:lly 我们今天来聊一聊怎样通过iClient for Leaflet实现鼠标拖动进行距离查询.先来看一看是什么效果: 说明本文使用的数据为iserver自带的范例数据长春市区图:查询的圆点是 ...
SuperMap iClient for Leaflet对EPSG:4509图加载滑动查询
作者:John SuperMap iClient for Leaflet对EPSG:4509地图加载&滑动查询在WebGIS开发使用中,我们会遇到地图显示不了,以及查询到数据显示不出的问题, ...
SuperMap iClient for Leaflet实现WFS查询功能
SuperMap iClient for classic已经实现对接WFS服务,可以对WFS进行查询并展示出查询的结果,但是官网范例中,目前没有关于Leaflet客户端的示例,在此文章中将简单介绍iC ...
LeafletJS 简单使用1 - 地图标点 L.marker()、清除标点 layerGroup.clearLayers() 【SuperMap iClient for Leaflet】超图的使用
目录一.业务需求二.参考文档三.实现思路四.参考代码 4.1 安装依赖 4.2 生成一张地图 4.3 标点_自定义标点图标 4.4 清除标点五.用到的 API 六.整体代码 + 页面展示七 ...
iClient for Leaflet加载MVT矢量瓦片并注册鼠标事件
作者:刘大使用背景需要在前端动态更改地图样式,并高效进行鼠标交互获取要素的业务场景时,我们会采取MVT矢量瓦片来解决此类问题,但是web应用开发已经选用Leaflet地图框架的情况下怎么办呢,这时 ...
聊聊iClient for Leaflet坐标转换问题
作者:张永利背景 SuperMap iClient for JavaScript 9D产品想必大伙都用了一段时间了,针对新推出的三款客户端产品,Leaflet,OpenLayaers,MapboxG ...
iClient for Leaflet通过点击实现切换地图中心点定位
作者:Carlo 前景:在操纵地图时除了鼠标.触摸交互移动地图,通过map.panBy和map.panTo也可以移动地图. map.panTo(平移至中心点):将地图平移到给定的中心.如果新的中心点在 ...

iClient for Leaflet解决地图放大问题

文章目录

前言

一、修改参数

二、自定义resolution

iClient for Leaflet解决地图放大问题相关推荐

最新文章

热门文章