0
点赞
收藏
分享

微信扫一扫

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

技术只适用于干活 2021-09-21 阅读 76

修改于2021/1/17

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

1、地图局部显示

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

  1. 示例代码
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. 将新画布图形填充到地图图层画布上。

  1. 示例代码
//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);
}
举报

相关推荐

0 条评论