openlayer系列：openlayer中切换卫星图和普通地图，默认普通地图，点击切换卫星图，并且地图掩模显示部分区域

openlayer中切换卫星图和普通地图，默认普通地图，点击切换卫星图，并且地图掩模显示部分区域

我们可以按照以下步骤实现 OpenLayers 中切换卫星图和普通地图，并在地图中添加掩模显示部分区域的功能：

创建普通地图和卫星图层
可以使用OpenLayers的TileLayer类创建普通地图和卫星图层。例如：

var mapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var satelliteLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token='
  })
});

其中，mapLayer 是普通地图图层，satelliteLayer 是卫星地图图层。

创建掩模图层
可以使用OpenLayers的VectorLayer类创建一个掩模图层，并将其添加到地图中。

例如，创建一个矩形掩模：

var maskLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Polygon([[
          [-180, -90],
          [-180, 90],
          [180, 90],
          [180, -90],
          [-180, -90]
        ]])
      })
    ]
  }),
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: [0, 0, 0, 0.5]
    })
  })
});

创建地图并添加图层

var map = new ol.Map({
  target: 'map',
  layers: [
    mapLayer,
    maskLayer
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

切换地图图层
可以为切换按钮添加一个点击事件监听器，以切换地图图层。例如：

var switchBtn = document.getElementById('switch-btn');

switchBtn.addEventListener('click', function() {
  var currentLayer = map.getLayers().getArray()[0];
  var newLayer;
  
  if (currentLayer === mapLayer) {
    newLayer = satelliteLayer;
  } else {
    newLayer = mapLayer;
  }
  
  map.getLayers().setAt(0, newLayer);
});

此代码将为 switchBtn 按钮添加一个点击事件监听器，以切换地图图层。初始情况下，普通地图图层是默认图层。单击按钮时，代码将检查当前图层是普通地图图层还是卫星图层，并将其替换为另一个图层。

使用掩模图层掩盖需要隐藏的区域
可以通过修改掩模图层的几何形状来掩盖需要隐藏的区域。例如，如果需要隐藏纽约市的区域：

var nyMask = new ol.Feature({
  geometry: new ol.geom.Polygon([[
    [-74.259, 40.477],
    [-74.259, 40.917],
    [-73.700, 40.917],
    [-73.700, 40.477],
    [-74.259, 40.477]
  ]])
});

maskLayer.getSource().addFeature(nyMask);
这将在地图上添加一个黑色的矩形，覆盖住纽约市的区域，从而实现了掩盖的效果。

希望这可以帮助到您！