OpenLayers教程14_仅使用叠加层的地图实现

最新推荐文章于 2025-03-19 06:05:45 发布

踏实探索

最新推荐文章于 2025-03-19 06:05:45 发布

阅读量1k

点赞数 26

分类专栏： openlayers 文章标签： arcgis web 大屏端

本文链接：https://blog.csdn.net/w131552/article/details/143926244

版权

openlayers 专栏收录该内容

14 篇文章

订阅专栏

避免基础层：仅使用叠加层的地图实现

一、引言

在传统的 Web 地图中，基础层（Base Layer）通常用作地图的背景层，例如卫星图像或街道地图。然而，在某些应用场景中，我们只需要显示特定的叠加层（Overlay Layer），而无需基础层。例如，显示行政边界或专题数据时，避免基础层可以更突出核心信息。

二、为什么避免基础层

避免基础层的优势：

简化视觉：无背景图像可以避免干扰核心数据的显示。
减少请求：不加载基础层可以减少网络请求，提高地图加载速度。
专注主题：叠加层信息更容易被用户注意到，适合数据驱动的可视化场景。

三、功能演示：仅使用叠加层的地图

本示例展示了一个无基础层的地图，仅加载了两个叠加层：

WMS 图层 1：美国州级行政边界。
WMS 图层 2：塔斯马尼亚州的行政边界（半透明显示）。

用户可以通过代码动态调整叠加层的显示效果，完全避免基础层。

在这里插入图片描述

四、代码实现

以下是完整的代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avoiding the Need of a Base Layer</title>

    <!-- 引入 OpenLayers 库 -->
    <link rel="stylesheet" href="./ol.css">
    <script src="./ol.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript">
        const zoomControl = new ol.control.Zoom();
        const attributionControl = new ol.control.Attribution();

        // 创建 OpenLayers 地图实例
        const map = new ol.Map({
            target: 'map', // 渲染地图的目标 DOM 元素
            view: new ol.View({
                center: ol.proj.fromLonLat([-100, 40]), // 设置地图中心坐标
                zoom: 5 // 设置初始缩放级别
            })
        });
        map.addControl(zoomControl, attributionControl);

        // 添加第一个 WMS 图层
        const wmsLayer = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'https://ahocevar.com/geoserver/wms',
                params: {
                    'LAYERS': 'topp:states',
                    'TILED': true,
                    'FORMAT': 'image/png',
                    'TRANSPARENT': true
                }
            }),
            title: 'WMS 图层 1'
        });
        map.addLayer(wmsLayer);

        // 添加第二个 WMS 图层
        const topoLayer = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'https://ahocevar.com/geoserver/wms',
                params: {
                    'LAYERS': 'topp:tasmania_state_boundaries',
                    'TILED': true,
                    'FORMAT': 'image/png',
                    'TRANSPARENT': true
                }
            }),
            title: 'WMS 图层 2',
            opacity: 0.5 // 设置透明度
        });
        map.addLayer(topoLayer);

        // 设置所有图层为叠加层（无基础层）
        map.getLayers().forEach(layer => {
            layer.set('isBaseLayer', false);
        });
    </script>
</body>
</html>

五、代码解析

1. 地图初始化

通过 ol.Map 实例创建地图，设置了中心点和缩放级别：

const map = new ol.Map({
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([-100, 40]),
        zoom: 5
    })
});

2. 添加叠加层

添加了两个 WMS 图层：

第一个图层显示美国州级行政边界。
第二个图层显示塔斯马尼亚州边界，并设置透明度为 0.5：

const topoLayer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {
            'LAYERS': 'topp:tasmania_state_boundaries',
            'TILED': true,
            'FORMAT': 'image/png',
            'TRANSPARENT': true
        }
    }),
    title: 'WMS 图层 2',
    opacity: 0.5
});

3. 控制叠加层的属性

通过循环设置所有图层的属性，将它们标记为叠加层：

map.getLayers().forEach(layer => {
    layer.set('isBaseLayer', false);
});

六、总结

本示例展示了如何在 OpenLayers 中避免基础层，仅使用叠加层构建地图。这种方式在数据驱动可视化中具有重要意义，可以突出主题数据，简化用户界面。通过灵活使用叠加层的透明度和样式设置，我们可以创建更具针对性的地图应用。