作者&＃xff1a;yx
前言
客户在iServer发布rest地图服务之后&＃xff0c;预览能够正常放大&＃xff0c;但当leaflet前端对接的时候&＃xff0c;发现最大只能放大到某一层级&＃xff08;如下图&＃xff09;&＃xff0c;达不到预期效果。
在leaflet中&＃xff0c;默认的maxZoom为18。当你设置的值大于18后&＃xff0c;然后缩放地图&＃xff0c;虽然地图做出了缩放效果&＃xff0c;但是你会发现地图变成空白&＃xff0c;且http请求并未触发19的请求。接下来就介绍两种方法解决该问题。
一、修改参数
在初始化tileLayer是&＃xff0c;追加一个参数layer.options.maxZoom。这个参数允许你设置超过18的zoom值&＃xff0c;参考博客https://blog.csdn.net/qq_45149720/article/details/117199585&＃xff0c;具体实现代码如下&＃xff1a;
<!DOCTYPE html>
<html>
<head><meta charset&＃61;"UTF-8"><title data-i18n&＃61;"resources.title_tiledMapLayer4326"></title><script type&＃61;"text/Javascript" src&＃61;"../js/include-web.js"></script>
</head>
<body style&＃61;" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id&＃61;"map" style&＃61;"margin:0 auto;width: 100%;height: 100%"></div>
<script type&＃61;"text/Javascript" src&＃61;"../../dist/leaflet/include-leaflet.js"></script>
<script type&＃61;"text/Javascript">
var host &＃61; window.isLocal ? window.server : "https://iserver.supermap.io";var map, url &＃61; "http://localhost:8090/iserver/services/map-LL/rest/maps/zoom";var layer&＃61;L.supermap.tiledMapLayer(url);map &＃61; L.map(&＃39;map&＃39;, {crs: L.CRS.EPSG4326,center: [ 39.86283085415676,116.37512261782454 ],zoom: 20});layer.options.maxZoom &＃61; 22;layer.addTo(map);
</script>
</body>
</html>
注&＃xff1a;layer.options.maxZoom设置一定要在 layer.addTo(map)之前
效果展示
二、自定义resolution
该种方法是一个绕行方法&＃xff0c;可以将服务发为wmts&＃xff0c;自定义resolution&＃xff0c;实现预期效果
<!DOCTYPE html>
<html><head><meta charset&＃61;"UTF-8"><title data-i18n&＃61;"resources.title_tiledMapLayer4326"></title><script type&＃61;"text/Javascript" src&＃61;"../js/include-web.js"></script>
</head><body style&＃61;" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"><div id&＃61;"map" style&＃61;"margin:0 auto;width: 100%;height: 100%"></div><script type&＃61;"text/Javascript" src&＃61;"../../dist/leaflet/include-leaflet.js"></script><script type&＃61;"text/Javascript">var host &＃61; window.isLocal ? window.server : "https://iserver.supermap.io";var map, url &＃61; "http://localhost:8090/iserver/services/map-LL/rest/maps/zoom";map &＃61; L.map(&＃39;map&＃39;, {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>
京公网安备 11010802041100号