小叨叨：咱们聊聊 OpenLayers 的 Canvas 小秘密

先说一句，老铁，今天咱们要掰开揉碎讲的，是怎么把 OpenLayers 那堆图层按需渲染到不同的 canvas 上。

别怕，别怕，我这话痨又爱啰嗦的风格会让你在kan代码时不至于睡着。

哈哈，先给你抛砖引玉——OpenLayers 默认把所有图层塞进同一个 Canvas 里你要是想玩点儿花活儿，比如给某层加点 CSS 动画、或者让它单独导出成图片，那就得“分家”。

OpenLayers 在 6 以前，只Neng选 Canvas 2D 或者 WebGL 两条路。

从 6 起，你Ke以给每个图层指定渲染策略——有的走 Canvas，有的走 WebGL，这就像是把厨房里的锅子分配好，各自负责不同菜式。

这背后是 layer.setRenderer和 map.getRenderer 的配合。

懂了吧？不对不对，我说错了——应该是 layer.set/'vector' 才是关键。

#1 创建多个容器 Canvas

const canvasA = document.createElement;
canvasA.id = 'canvas-a';
document.body.appendChild;
const canvasB = document.createElement;
canvasB.id = 'canvas-b';
document.body.appendChild;

这样我们就有了两块画布，接下来让 OpenLayers 分别往上画。

#2 给图层打上标签，用 className 区分

const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector,
  className: 'layer-vector',
});
const rasterLayer = new ol.layer.Tile({
  source: new ol.source.XYZ,
  className: 'layer-raster',
});

#3 用 postrender / prerender 把渲染目标换成自定义 Canvas

vectorLayer.on {
  const ctx = canvasA.getContext;
  ctx.clearRect;
  // 把原始渲染结果拷贝过去
  ctx.drawImage;
});
rasterLayer.on {
  const ctx = canvasB.getContext;
  ctx.clearRect;
  ctx.drawImage;
});

注意，这里我们用了事件对象的 .context.canvas，它就是 OL 为当前帧创建的内部 Canvas。把它拷贝过去，就实现了“搬家”。

Z‑index 与顺序： 渲染顺序跟图层在 Map 初始化时的数组顺序有关，也跟每个图层的 Z‑index 决定。搞错了你会发现两个 Canvas 上的内容上下颠倒。

DPI 与尺寸： 浏览器缩放或 Retina 屏幕会导致 Canvas 实际像素和 CSS 大小不一致。记得在创建 Canvas 时乘以 devicePixelRatio.

性Neng陷阱： 每帧dou copyImage 会消耗显存。若只是想在特定交互时才搬家，Zui好用 .once.

不对不对，这里还有个隐藏属性叫'renderMode': 对矢量图层设为 'image', 那么它本身就会先渲染成离屏 Canvas，再合成到主画布，这时候再拷贝geng省事。

A：百度爬虫在抓取页面时对 JavaScript 动态生成的内容支持度有限。我们的示例代码全靠 JS 在浏览器里跑，生成的 Canvas 是二进制位图，没有文字可索引，自然就“不被收录”。 B：Ru果真想让搜索引擎kan到地图信息，Zui好提供对应的 GeoJSON 或 WMS 服务链接，让爬虫抓到结构化数据。

#canvas-a {
    position: absolute;
    top: 10px; left:10px;
    border:2px solid #ff6600;
    animation: pulse 4s infinite;
}
@keyframes pulse{
    from{opacity:.7;}
    to{opacity:1;}
}
#canvas-b {filter: grayscale;}

// 初始化地图
const map = new ol.Map({
    target: document.getElementById, // 主容器 div
    view: new ol.View({
        center: ol.proj.fromLonLat,
        zoom:10
    })
});
// 创建两块离屏 canvas
function createOffscreen{
    const c=document.createElement;
    c.id=id;
    c.width=window.innerWidth;
    c.height=window.innerHeight;
    document.body.appendChild;
    return c;
}
const offCanvasVector=createOffscreen;
const offCanvasRaster=createOffscreen;
// 矢量图层
const vectorLayer=new ol.layer.Vector({
    source:new ol.source.Vector,
    renderMode:'image',
    className:'vec-layer'
});
vectorLayer.getSource.addFeature(new ol.Feature({
    geometry:new ol.geom.Point)
}));
map.addLayer;
// 栅格瓦片图层
const rasterLayer=new ol.layer.Tile({
    source:new ol.source.OSM,
    className:'raster-layer'
});
map.addLayer;
// 把矢量渲染搬到 offCanvasVector
vectorLayer.on{
   const ctx=offCanvasVector.getContext;
   ctx.clearRect;
   ctx.drawImage;
});
// 把栅格渲染搬到 offCanvasRaster
rasterLayer.on{
   const ctx=offCanvasRaster.getContext;
   ctx.clearRect;
   ctx.drawImage;
});