SuperMap iClient for MapboxGL实现矢栅底图的动态切换

吃辣我第一

于 2024-12-30 16:55:52 发布

阅读量389

点赞数 3

分类专栏： GIS # WebGIS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_46005336/article/details/144829569

版权

GIS 同时被 2 个专栏收录

6 篇文章

订阅专栏

WebGIS

3 篇文章

订阅专栏

在现代 web 地图应用中，动态渲染和灵活变换地图底图类型是提高用户体验的一个重要方面。特别是在某些场景下，底图的矢量和栅格版本各有其独特的优势。在本篇博文中，我们将探讨如何利用 SuperMap iClient for MapboxGL 实现底图间的动态切换，从而提升地图性能和用户体验。

背景与需求

在地图应用中，底图通常分为矢量地图和栅格地图。矢量地图具有更高的可缩放性和灵活的样式控制，但在数据较大的情况下，加载速度可能会受到影响，尤其是在较小比例尺（zoom level）下，用户不需要过于精细的内容展示。因此，在某些情况下，使用栅格地图可以显著改善加载速度和渲染效果。

例如，当您在进行广域展示时，用户可能更关注的是地面覆盖情况，而不是具体街道的详细信息。在这类场景中，切换到同一底图的栅格版本可以有效提升用户体验。

解决方案：动态切换底图类型

工具与技术

我们使用 SuperMap iClient for MapboxGL 作为基础，结合其强大的地图渲染能力。具体实现中，我们将根据缩放级别动态切换底图的类型，当缩放比例大于一定值时使用矢量底图，小于该值时则使用栅格底图。

代码实现

下面是一个基本的实现代码（可复制到iClient官网直接运行：https://iclient.supermap.io/examples/mapboxgl/examples.html#iServer）：

<!DOCTYPE html>  
<html>  

<head>  
    <meta charset='utf-8' />  
    <title data-i18n="resources.title_mvtVectorLayer_overlay"></title>  
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />  
    <style>  
        body {  
            margin: 0;  
            padding: 0;  
        }  

        #map {  
            position: absolute;  
            top: 0;  
            bottom: 0;  
            width: 100%;  
        }  
    </style>  
</head>  

<body>  
    <div id='map'></div>  
    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>  
    <script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>  
    <script type="text/javascript">  
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";  
        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +  
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +  
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";  
        
        // Base URL for raster tiles  
        var baseUrl = host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}';  
        // Data URL (currently unused in the example)  
        var dataUrl = host + "/iserver/services/data-world/rest/data";  

        var map = new mapboxgl.Map({  
            container: 'map',  
            style: {  
                "version": 8,  
                "sources": {  
                    "raster-tiles": {  
                        "attribution": attribution,  
                        "type": "raster",  
                        "tiles": [baseUrl],  
                        "tileSize": 256  
                    }  
                },  
                "layers": [{  
                    "id": "simple-tiles",  
                    "type": "raster",  
                    "source": "raster-tiles",  
                    "minzoom": 0,  
                    "maxzoom": 5  
                }]  
            },  
            center: [120.143, 30.236],  
            zoom: 3  
        });  

        map.on('load', function () {  
            var currentZoom = map.getZoom();  

            // 用于判断是否已经加载了矢量图  
            var vectorLayerLoaded = false;  

            map.on('move', function () {  
                currentZoom = map.getZoom();  

                if (currentZoom > 5 && !vectorLayerLoaded) {  
                    // 加载矢量图层  
                    map.addStyle(host +  
                        '/iserver/services/map-Population/rest/maps/PopulationDistribution/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true'  
                    );  
                    vectorLayerLoaded = true; // 设置标志，防止重复加载  
                } else if (currentZoom <= 5 && vectorLayerLoaded) {  
                    // 移除矢量图层，回到栅格地图  
                    map.setStyle({  
                        "version": 8,  
                        "sources": {  
                            "raster-tiles": {  
                                "attribution": attribution,  
                                "type": "raster",  
                                "tiles": [baseUrl],  
                                "tileSize": 256  
                            }  
                        },  
                        "layers": [{  
                            "id": "simple-tiles",  
                            "type": "raster",  
                            "source": "raster-tiles",  
                            "minzoom": 0,  
                            "maxzoom": 5  
                        }]  
                    });  
                    vectorLayerLoaded = false; // 清除标志  
                }  
            });  
        });  
    </script>  

</body>  

</html>

代码解析

地图初始化：创建 mapboxgl.Map 实例时，定义了栅格底图的样式和数据源。
动态样式切换：在 move 事件中，监控当前的缩放级别（zoom level）。当缩放级别大于 5 时，加载矢量底图；小于等于 5 时，切换回栅格底图。
状态管理：通过 vectorLayerLoaded 变量，避免重复加载图层，确保性能的优化。