OpenLayers 3本地瓦片图层绘制多边形消失问题求助

我之前在做类似的建筑平面图瓦片叠加项目时，也碰到过这个图层层级覆盖的问题，给你几个亲测有效的解决方向：

• 优先调整图层添加顺序
  OpenLayers 3的图层渲染逻辑是后添加到地图的图层，会默认渲染在更上层，这比单独设置zIndex优先级更高。你可以试试把绘制多边形用的矢量图层，放在本地瓦片图层之后添加到地图里。如果已经添加过图层，也可以先移除矢量图层，再重新添加，让它排到图层列表的最后：

  // 先移除再重新添加，确保矢量图层在最上层
  map.getLayers().remove(drawVectorLayer);
  map.addLayer(drawVectorLayer);
  

• 正确设置图层的zIndex（注意层级上下文）
  单独设置zIndex没效果，大概率是因为你的本地瓦片图层属于某个ol.layer.Group，组的层级会覆盖内部图层的zIndex。这种情况下，要么把矢量图层也添加到同一个组的末尾，要么给矢量图层设置比组更高的zIndex值：

  // 给矢量图层设置更高的zIndex
  drawVectorLayer.setZIndex(100);
  // 如果本地瓦片在组里，给组设置更低的zIndex
  tileGroupLayer.setZIndex(10);
  

• 检查本地瓦片图层的extent属性
  有时候本地瓦片图层设置了extent范围，如果你绘制的多边形刚好在这个范围边缘，可能会因为瓦片的裁剪逻辑导致显示异常。可以临时移除extent属性测试一下，或者确保矢量图层的source没有设置限制范围的参数。

• 尝试禁用瓦片图层的preload属性
  部分情况下，瓦片图层的preload预加载机制可能会导致图层渲染顺序混乱，你可以把本地瓦片图层的preload设为0试试：

  const localTileLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: '你的本地瓦片地址/{z}/{x}/{y}.png',
      preload: 0
    })
  });
  

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