本文共 907 字，大约阅读时间需要 3 分钟。

在实际的地图项目中，无论是百度地图还是高德地图等，都会有地图切换的功能。Openlayers实战中，我们通常会使用三种地图作为演示：谷歌地图、Openstreetmap和Stamen地图。地图切换的实现原则是创建三个地图层，并通过visible属性控制其显示状态。

效果图

（此处图片已移除）

源代码

   
   
  
    
切换地图功能演示
  
    
在Openlayers中，通过创建三个地图层并设置其可见状态，可以实现地图切换功能。以下是实现方法：
  
    
  // 创建三个地图层  const layerGoogle = new ol.layer.Tile({    source: new ol.source.GeoTIFF({      url: 'https://{s}.tile.google.com/TileSet/tile{z}.png?e=kn%3D0x3D0x26%26c%3D0x3D0x4B%26l%3D0x3D0x4F%26t%3D0x3D0x57%26z%3D{z}',      wrap: true    })  });  const layerOSM = new ol.layer.Tile({    source: new ol.source.OSM()  });  const layerStamen = new ol.layer.Tile({    source: new ol.source.Stamen({      layer: 'terrain'    })  });    // 添加地图层到地图  map.addLayer(layerGoogle);  map.addLayer(layerOSM);  map.addLayer(layerStamen);    // 设置初始可见地图层  map.setLayerVisibility(layerGoogle, false);  map.setLayerVisibility(layerOSM, true);  map.setLayerVisibility(layerStamen, false);