使用openlayers实现在瓦片图层上做图像编辑

此需求来源于项目，显示地图时加载的不管是百度地图还是天地图都是显示了相当大的范围。而对于客户主要关注的还是自己所在区域，需要对客户所在的区域重点显示，或对区域外的地图添加上蒙版。本文实现简单的对区域边界添加边界线来重点显示区域。

要实现此功能，需要用到openlayers中Layer类的 preCompose 和 postCompose，这样我们可以获取到context用来操作画布。

// 获取客户的边界线，LineString
const clipgeom = this.getMapBoundariesGeom()
//画边界线
function drawBoundaryLine(coords, canvas) {
  for (var i = 0, cout = coords.length; i < cout; i++) {
    //获取屏幕坐标
    var screenCoord = this.map.getPixelFromCoordinate(coords[i]);
    var x = screenCoord[0],y = screenCoord[1];
    if (i === 0) {
      canvas.moveTo(x, y);
    } else {
      canvas.lineTo(x, y);
    }
  }
  canvas.closePath();
  let oldColor = canvas.strokeStyle
  //设置边框
  canvas.strokeStyle = "#36CFC9";
  canvas.lineWidth = 3;
  canvas.stroke();
  // 需要恢复画笔颜色 ，否则可能会修改到其它内容
  canvas.strokeStyle = oldColor
}
layer.on('precompose',(evt)=>{
  var canvas=evt.context;
  canvas.save();
  var coords = clipgeom.getCoordinates();
  canvas.beginPath();
  drawBoundaryLine(coords[0], canvas);
  canvas.clip();
});
layer.on('postcompose',(evt)=>{
  evt.context.restore()
});

即可在底图上用户的区域边界上画线

tips:当然拿到画布的context可以做的操作还有很多，可以对像素做修改做到一些风格化的效果。