OpenLayers教程15_图层堆栈管理

国内地图图层堆栈管理：基于 OpenLayers 的实现

一、引言

在 Web 地图开发中，图层的顺序直接影响地图的显示效果。尤其在国内地图应用中，天地图（TianDiTu）是常用的数据源，其路网、卫星图和地形图常需按需求调整图层顺序以满足不同场景的展示需求。

二、为什么需要图层堆栈管理

图层堆栈管理可以实现以下功能：

动态调整图层顺序：根据需求显示优先级最高的图层。
灵活配置叠加效果：通过调整图层顺序，控制图层的叠加关系。
适应多场景需求：在不同场景下，快速切换不同的图层显示优先级。

三、功能演示：图层顺序调整

本文通过一个基于 OpenLayers 的示例，展示如何动态调整天地图的三个图层顺序：

天地图路网。
天地图卫星图。
天地图地形图。

用户可以通过侧边的控制面板，选择图层并进行以下操作：

移到顶部。
移到底部。
向上移动。
向下移动。

四、代码实现

以下是完整的代码实现：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>国内地图图层堆栈管理</title><!-- 引入 OpenLayers 10.2.1 的 CSS 和 JS --><link rel="stylesheet" href="./ol.css"><script src="./ol.js"></script><style>body {margin: 0;display: flex;height: 100vh;}#map {flex: 2;border-right: 1px solid #ddd;}#controls {flex: 1;padding: 20px;box-sizing: border-box;background-color: #f9f9f9;}h2 {margin-top: 0;}button {display: block;margin: 10px 0;padding: 10px;width: 100%;font-size: 16px;cursor: pointer;}select {width: 100%;padding: 8px;margin-bottom: 20px;}</style>
</head>
<body><div id="map"></div><div id="controls"><h2>图层管理面板</h2><label for="layerSelection">选择图层：</label><select id="layerSelection"><option value="TianDiTuRoad">天地图路网</option><option value="TianDiTuSatellite">天地图卫星图</option><option value="TianDiTuTerrain">天地图地形图</option></select><button onclick="moveToTop()">移到顶部</button><button onclick="moveUp()">向上移动</button><button onclick="moveDown()">向下移动</button><button onclick="moveToBottom()">移到底部</button></div><script>const map = new ol.Map({target: 'map',view: new ol.View({projection: 'EPSG:3857',center: ol.proj.fromLonLat([104.0, 35.0]),zoom: 4})});const tianDiTuUrls = {road: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=YOUR_API_KEY',satellite: 'https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=YOUR_API_KEY',terrain: 'https://t{s}.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=YOUR_API_KEY'};const tianDiTuRoadLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: tianDiTuUrls.road.replace('{s}', 1),attributions: '© 天地图'}),title: 'TianDiTuRoad'});const tianDiTuSatelliteLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: tianDiTuUrls.satellite.replace('{s}', 1),attributions: '© 天地图'}),title: 'TianDiTuSatellite'});const tianDiTuTerrainLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: tianDiTuUrls.terrain.replace('{s}', 1),attributions: '© 天地图'}),title: 'TianDiTuTerrain'});map.addLayer(tianDiTuRoadLayer);map.addLayer(tianDiTuSatelliteLayer);map.addLayer(tianDiTuTerrainLayer);const layers = [tianDiTuRoadLayer, tianDiTuSatelliteLayer, tianDiTuTerrainLayer];function getLayerByTitle(title) {return layers.find(layer => layer.get('title') === title);}function moveToTop() {const selectedTitle = document.getElementById('layerSelection').value;const layer = getLayerByTitle(selectedTitle);if (layer) {map.removeLayer(layer);map.addLayer(layer);}}function moveToBottom() {const selectedTitle = document.getElementById('layerSelection').value;const layer = getLayerByTitle(selectedTitle);if (layer) {map.removeLayer(layer);map.getLayers().insertAt(0, layer);}}function moveUp() {const selectedTitle = document.getElementById('layerSelection').value;const layer = getLayerByTitle(selectedTitle);if (layer) {const currentIndex = map.getLayers().getArray().indexOf(layer);if (currentIndex < map.getLayers().getLength() - 1) {map.getLayers().removeAt(currentIndex);map.getLayers().insertAt(currentIndex + 1, layer);}}}function moveDown() {const selectedTitle = document.getElementById('layerSelection').value;const layer = getLayerByTitle(selectedTitle);if (layer) {const currentIndex = map.getLayers().getArray().indexOf(layer);if (currentIndex > 0) {map.getLayers().removeAt(currentIndex);map.getLayers().insertAt(currentIndex - 1, layer);}}}</script>
</body>
</html>