如何绘制带50px内偏移的BBox/线条？是否仅能使用map.unproject？

当然有靠谱的实现方法，而且完全不需要只依赖map.unproject！下面针对你的需求，分场景给你两种最实用的方案：

一、实现内偏移50px的线条 #

OpenLayers的ol.style.Stroke本身就提供了offset属性，直接设置像素值就能实现线条的内外偏移，这是最直接的方式：

// 创建内偏移50px的红色线条样式
const innerOffsetStroke = new ol.style.Stroke({
  color: '#ff0000',
  width: 2,
  offset: -50 // 负数表示向内偏移，正数为向外，单位直接是像素
});

// 将样式应用到你的线要素上
const lineFeature = new ol.Feature({
  geometry: new ol.geom.LineString([/* 替换成你的线坐标数组 */])
});
lineFeature.setStyle(new ol.style.Style({ stroke: innerOffsetStroke }));

这个属性就是专门为线条偏移设计的，完全不用手动做坐标转换，简单高效。

二、实现带内偏移的BBox #

这里分两种场景，你可以根据需求选择：

场景1：需要获取内偏移后的BBox几何对象 #

如果你需要把内偏移后的BBox作为独立的几何要素处理，可以结合地图分辨率，将像素偏移转换为地图单位偏移，再计算内缩范围：

const originalExtent = [/* 你的原始BBox范围，格式为 [minX, minY, maxX, maxY] */];
const pixelOffset = 50;
// 获取当前视图的分辨率（1像素对应的地图单位长度）
const resolution = map.getView().getResolution();
// 将50px转换为地图单位的偏移量
const mapUnitOffset = pixelOffset * resolution;
// 计算内缩后的BBox范围（buffer传负数表示向内收缩）
const innerExtent = ol.extent.buffer(originalExtent, -mapUnitOffset);

// 创建内偏移BBox的要素
const innerBBoxFeature = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(innerExtent)
});

场景2：仅需要视觉上的内偏移（无需修改原始几何） #

如果只是想让BBox的边框向内偏移显示，不需要改变原始几何数据，直接给BBox的Stroke设置offset即可，和线条的用法一致：

const bboxStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#00ff00',
    width: 2,
    offset: -50 // 向内偏移50px
  }),
  fill: new ol.style.Fill({ color: 'rgba(0,255,0,0.1)' })
});

// 应用到原始BBox要素上
const originalBBoxFeature = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(originalExtent)
});
originalBBoxFeature.setStyle(bboxStyle);

总结 #

map.unproject确实可以用于坐标转换，但对于你的需求来说完全不是必需的。上面的方法要么利用样式原生属性直接实现，要么结合分辨率做简单计算，都比手动处理投影转换要高效得多。

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