如何使用Leaflet和Turf创建不随地图缩放的固定像素大小缓冲区

实现原理 #

你之前的方案都是用固定地理长度（米/千米）作为缓冲区半径，地图缩放时相同地理长度对应的屏幕像素会发生变化，因此视觉尺寸会随缩放改变。要实现固定像素尺寸的缓冲区，核心逻辑是每次地图缩放完成后，将你需要的固定像素值换算为当前缩放级别下对应的地理半径，动态更新缓冲区的半径参数。

场景1：仅需前端展示固定大小的圆形缓冲区 #

如果不需要获取缓冲区的地理范围数据做后续空间计算，直接用Leaflet原生的L.circleMarker即可，它的radius参数默认单位就是像素，不会随地图缩放改变尺寸：

const lCircleMarker = L.circleMarker([event.latlng.lat, event.latlng.lng], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 50 // 单位是像素，固定50px大小
}).addTo(mapInstance)

如果你之前使用circleMarker时出现尺寸变化，检查是否有额外的缩放监听逻辑修改了它的半径参数。

场景2：需要获取缓冲区的地理范围（搭配Turf做空间计算） #

如果需要缓冲区的GeoJSON数据做空间查询、相交计算等操作，可通过动态换算地理半径的方式实现：

步骤1：定义通用像素转地理半径方法 #

// 固定缓冲区的像素大小，可自定义修改
const FIXED_BUFFER_PX = 50;
// 输入中心点经纬度、目标像素值，返回当前缩放级别下对应的地理半径（单位：米）
function pxToGeoRadius(centerLatLng, targetPx) {
  // 中心点转容器像素坐标
  const centerPoint = mapInstance.latLngToContainerPoint(centerLatLng);
  // 生成偏移targetPx像素的坐标点
  const offsetPoint = L.point(centerPoint.x + targetPx, centerPoint.y);
  // 偏移点转经纬度
  const offsetLatLng = mapInstance.containerPointToLatLng(offsetPoint);
  // 计算两点地理距离，即为目标像素对应的地理半径
  return centerLatLng.distanceTo(offsetLatLng);
}

步骤2：点击地图生成缓冲区 #

// 存储当前缓冲区中心点，缩放更新时需要用到
let currentBufferCenter;
let bufferGeoLayer;
mapInstance.on('click', (event) => {
  // 清空之前的缓冲区
  if (bufferGeoLayer) {
    bufferGeoLayer.remove();
  }
  currentBufferCenter = event.latlng;
  // 计算初始地理半径，转成千米供Turf使用
  const initRadiusKm = pxToGeoRadius(currentBufferCenter, FIXED_BUFFER_PX) / 1000;
  // 用Turf生成缓冲区
  const point = turf.point([currentBufferCenter.lng, currentBufferCenter.lat]);
  const buffered = turf.buffer(point, initRadiusKm, {units: 'kilometers'});
  // 添加到地图
  bufferGeoLayer = L.geoJSON(buffered, {
    style: {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }
  }).addTo(mapInstance);
})

步骤3：监听缩放事件动态更新缓冲区 #

mapInstance.on('zoomend', () => {
  // 没有缓冲区时跳过
  if (!bufferGeoLayer || !currentBufferCenter) return;
  // 计算当前缩放级别下的地理半径
  const newRadiusKm = pxToGeoRadius(currentBufferCenter, FIXED_BUFFER_PX) / 1000;
  // 重新生成Turf缓冲区，更新图层数据
  const point = turf.point([currentBufferCenter.lng, currentBufferCenter.lat]);
  const newBuffered = turf.buffer(point, newRadiusKm, {units: 'kilometers'});
  bufferGeoLayer.clearLayers();
  bufferGeoLayer.addData(newBuffered);
})

用Leaflet原生Circle实现的版本 #

如果不需要Turf的GeoJSON数据，仅用原生Circle也可以实现相同效果，只需在zoomend事件中调用setRadius方法更新半径即可：

let circleInstance;
mapInstance.on('click', (event) => {
  if (circleInstance) circleInstance.remove();
  const center = event.latlng;
  const initRadius = pxToGeoRadius(center, FIXED_BUFFER_PX);
  circleInstance = L.circle(center, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: initRadius
  }).addTo(mapInstance);
})
mapInstance.on('zoomend', () => {
  if (!circleInstance || !currentBufferCenter) return;
  const newRadius = pxToGeoRadius(currentBufferCenter, FIXED_BUFFER_PX);
  circleInstance.setRadius(newRadius);
})

内容的提问来源于stack exchange，提问作者Hugo