mapboxGL中区域掩膜的实现

最新推荐文章于 2025-08-25 06:48:03 发布

原创最新推荐文章于 2025-08-25 06:48:03 发布 · 898 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#mapboxGL #地图掩膜

GIS加油站同时被 3 个专栏收录

342 篇文章

订阅专栏

mapboxGL

39 篇文章

订阅专栏

跟牛老师一起学WEBGIS

33 篇文章

订阅专栏

本文介绍了如何在mapboxGL中结合HTML5canvas技术，通过地图的move事件实时创建和更新区域掩膜，利用坐标转换和全局复合操作实现动态裁剪效果。

概述

区域掩膜的功能也是比较常见的功能呢，本文分享在mapboxGL中结合canvas如何实现。

效果

动画.gif

实现

1. 创建画布

先创建一个map大小的canvas，设置其大小与样式，并添加到地图画布容器中。

const {width, height} = map.getCanvas()
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style.zIndex = '1';
ctx = canvas.getContext('2d');
map.getCanvasContainer().appendChild(canvas);

2.注册move事件

注册地图的move事件，在地图变化的时候更新掩膜。

map.on('move', addMapModal)

3.核心实现

通过map.project实现地理坐标到屏幕坐标的转换；
通过globalCompositeOperation = 'source-out'设置反向裁剪；

function addMapModal() {
  ctx.fillStyle = '#ededed';
  ctx.strokeStyle = '#f00';
  ctx.lineWidth = 3;
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const coords = modalData.map(coord => {
    const {x, y} = map.project(coord)
    return [x, y]
  })
  
  ctx.beginPath();
  coords.forEach((coord, index) => {
    index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
  })
  ctx.closePath();
  ctx.fill();
  
  ctx.globalCompositeOperation = 'source-out';
  ctx.rect(0, 0, canvas.width, canvas.height)
  ctx.fill();
  ctx.globalCompositeOperation = 'source-over';
  ctx.beginPath();
  coords.forEach((coord, index) => {
    index === 0 ? ctx.moveTo(coord[0], coord[1]) : ctx.lineTo(coord[0], coord[1])
  })
  ctx.closePath();
  ctx.stroke()
}