openlayers：实现显示瓦片网格信息（附完整源码）

### 实现地图遮罩效果 在 OpenLayers 中实现地图遮罩效果通常涉及创建一个新的图层并将其叠加到现有地图上。此过程可以通过定义一个 `ol/layer/Layer` 类的新实例来完成，并设置其样式以覆盖底层的地图内容[^1]。 下面是一个简单的例子，展示如何使用 OpenLayers 创建带有半透明灰色遮罩的效果： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source.OSM'; // 初始化底图 const baseMap = new TileLayer({ source: new OSM(), }); // 定义遮罩图层 const maskLayer = new ol.layer.Image({ extent: [-Infinity, -Infinity, Infinity, Infinity], opacity: 0.7, source: new ol.source.CanvasImageSource({ canvasFunction(extent, resolution, pixelRatio) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小匹配视口尺寸 canvas.width = Math.ceil((extent[2] - extent[0]) * pixelRatio); canvas.height = Math.ceil((extent[3] - extent[1]) * pixelRatio); // 填充整个区域为浅灰颜色 ctx.fillStyle = '#cccccc'; ctx.fillRect(0, 0, canvas.width, canvas.height); return canvas; }, }), }); // 构建地图对象并将两个图层添加进去 new Map({ target: 'map', layers: [baseMap, maskLayer], view: new View({ center: [0, 0], zoom: 2, }), }); ``` 上述代码片段展示了如何通过自定义图像源 (`CanvasImageSource`) 来绘制一个完全填充屏幕的矩形作为遮罩。该遮罩具有一定的不透明度以便可以看到下方的基础地图[^2]。 为了使遮罩更加灵活可控，可以根据实际需求调整 `maskLayer` 的属性，比如改变颜色、透明度或是仅应用于特定地理范围内的显示等特性。