基于Openlayers 6实现地图局部（高亮）优雅显示

修改于2021/1/17

公共地图资源基本都是全国范围或者全球范围数据，但具体业务需求往往只是需要显示局部范围或者局部高亮显示。本案例基于Openlayers实现世界地图中内蒙古区域的局部显示以及呼伦贝尔、阿荣旗的高亮显示。

1、地图局部显示

1. 加载天地图影像图层、道路中文注记图层。
2. 道路中文注记图层渲染后根据内蒙古边界范围进行局部裁剪。此处使用canvas的复合操作（globalCompositeOperation），在源图像中显示目标图像（destination-in）。
   
3. 示例代码

layer.on("postrender", function (e) {
 let vectorContext = getVectorContext(e);
 e.context.globalCompositeOperation = 'destination-in';
 // feature 为内蒙古面要素
 vectorContext.drawFeature(feature, new Style({  
   fill: new Fill({
     color: 'black',// 必需设置颜色
   })
 }));
 e.context.globalCompositeOperation = 'source-over'; 
});

2、地图局部高亮

1. 创建新的画布，大小与当前视图窗口大小一致。
2. 新的画布填充阴影图形。
3. 根据呼伦贝尔或阿荣旗边界坐标，在新画布上绘制区域图形。
4. 新画布中显示区域图形外的阴影图形，即区域图形透明显示。
5. 将新画布图形填充到地图图层画布上。
   
6. 示例代码

//points: 呼伦贝尔或阿荣旗边界坐标
//ctx:地图图层画布
heightLight(points, ctx) {
let canvas = ctx.canvas;
let onePageCanvas = document.createElement('canvas');
onePageCanvas.setAttribute('width', String(canvas.width));
onePageCanvas.setAttribute('height', String(canvas.height));
let ctx_ = onePageCanvas.getContext('2d');

ctx_.rect(0, 0, canvas.width, canvas.height);
ctx_.fillStyle = "rgba(3,24,51,0.60)";
ctx_.fill();
ctx_.globalCompositeOperation = 'destination-out';
ctx_.beginPath();
for (let i = 0, cout = coords.length; i < cout; i++) {
  // 获取屏幕坐标
  let screenCoord = this.map.getPixelFromCoordinate(coords[i]);
  let x = screenCoord[0];
  let y = screenCoord[1];
  if (i === 0) {
    ctx_.moveTo(x, y);
  } else {
    ctx_.lineTo(x, y);
    ctx_.lineTo(x, y);
  }
}
ctx_.closePath();
ctx_.fill();
let patten = ctx.createPattern(onePageCanvas, "no-repeat");
ctx.fillStyle = patten;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}