我来帮你搞定这个问题！官方示例里用的是Canvas的像素坐标，而你需要处理的EPSG:4326（经纬度）和EPSG:3857（Web墨卡托）是地理/投影坐标系，核心就是要把地理坐标转换成Canvas能识别的像素坐标，同时确定好视图范围（相当于把地图的某一块区域“放”到Canvas里）。

下面是具体的实现步骤和代码示例：

核心思路：坐标映射与视图转换 #

OpenLayers提供了ol.View来帮我们处理地理坐标到像素坐标的转换，它会根据你设置的投影、中心位置、缩放级别，自动计算出转换矩阵，直接应用到Canvas的渲染上下文即可。

示例1：渲染EPSG:4326（经纬度）的几何图形 #

// 获取Canvas元素并设置尺寸
const canvas = document.getElementById('canvas');
const canvasSize = [400, 300]; // 宽400px，高300px
canvas.width = canvasSize[0];
canvas.height = canvasSize[1];
const ctx = canvas.getContext('2d');

// 创建OpenLayers的Vector渲染上下文
const vectorContext = ol.render.toContext(ctx, {
  size: canvasSize
});

// 定义渲染样式（和官方示例一致）
const fill = new ol.style.Fill({ color: 'blue' });
const stroke = new ol.style.Stroke({ color: 'black', width: 2 });
const style = new ol.style.Style({
  fill: fill,
  stroke: stroke,
  image: new ol.style.Circle({
    radius: 10,
    fill: fill,
    stroke: stroke
  })
});
vectorContext.setStyle(style);

// 定义视图：指定投影为EPSG:4326，中心设为北京经纬度，缩放级别5
const view = new ol.View({
  projection: 'EPSG:4326',
  center: [116.4, 39.9], // 北京经纬度
  zoom: 5
});

// 获取地理坐标到Canvas像素的转换矩阵
const transform = view.getCoordinateToPixelTransform();
// 把转换矩阵应用到Vector上下文
vectorContext.setTransform(transform);

// 现在直接传入EPSG:4326的几何图形即可渲染
// 北京到上海的路线（经纬度）
const line = new ol.geom.LineString([[116.4, 39.9], [121.5, 31.2]]);
// 华北区域的多边形（经纬度范围）
const polygon = new ol.geom.Polygon([[
  [110, 35], [120, 35], [120, 40], [110, 40], [110, 35]
]]);
// 广州的点（经纬度）
const point = new ol.geom.Point([113.2, 23.1]);

// 渲染所有几何图形
vectorContext.drawGeometry(line);
vectorContext.drawGeometry(polygon);
vectorContext.drawGeometry(point);

示例2：切换到EPSG:3857（Web墨卡托）投影 #

只需要修改ol.View的投影参数，同时传入对应的3857坐标即可：

// 定义EPSG:3857的视图，中心设为北京的Web墨卡托坐标
const view = new ol.View({
  projection: 'EPSG:3857',
  center: [12967429, 4851434], // 北京的3857坐标
  zoom: 5
});

// 后续代码和示例1一致，几何图形传入3857坐标即可
const line = new ol.geom.LineString([[12967429, 4851434], [13517760, 3454872]]); // 北京到上海的3857坐标
// ... 其他渲染代码不变

关于你提到的Stack Overflow问题 #

那个问题里的代码核心思路也是坐标转换，如果代码里没有显式指定投影，默认是OpenLayers的默认投影EPSG:3857。如果代码中用到了ol.proj.fromLonLat()，那就是把EPSG:4326的经纬度转成3857坐标后再渲染，你可以根据自己的需求调整投影参数。

额外提示 #

• 如果你要渲染的是ol.Feature对象，直接用vectorContext.drawFeature(feature)即可，不用单独提取几何图形，样式也可以复用Feature的样式。
• 确保你的OpenLayers版本支持getCoordinateToPixelTransform()（OpenLayers 3及以上版本都支持）。

内容的提问来源于stack exchange，提问作者Евгений Гуреев