在 OpenLayers 中的线后绘制点

Question

我正在尝试使用 OpenLayers 4 创建地图。

我有一些包含线和点的矢量图块。线代表道路，点代表环岛。我想做的是用外壳绘制道路，也用外壳绘制环形交叉路口，但环形交叉路口的外壳出现在道路后面。这有任何意义吗？ :)

这是我目前得到的：

请注意环岛周围的笔画如何与道路相交？这就是我要避免的。

道路的样式与此类似：

const road = [
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#505050',
      width: 2
    }),
    zIndex: 2
  }),
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#ffffff',
      width: 20
    }),
    zIndex: 3
  })
];

为了不使我的示例复杂化，我对其进行了一些简化，以删除基于道路类型等的道路颜色。

环岛的样式与此类似：

const roundabout = [
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 20,
      fill: new ol.style.Fill({
        color: '#ffffff'
      }),
    }),
    zIndex: 1
  }),
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 18,
      fill: new ol.style.Fill({
        color: '#ffffff'
      }),
    }),
    zIndex: 4
  })
];

再次简化，不包括环岛中间的额外圆圈，这只是再次绘制的相同点，但更小。

应该先绘制环形交叉口套管，然后是道路套管，然后是道路填充，最后是环形交叉口填充。这应该给出道路填充和环岛填充看起来是一条连续线的效果，并且外壳在环岛周围流动而不与道路车道相交。

我遇到的问题是我为环岛设置的 zIndex 值似乎根本没有效果。无论我将它们更改为什么，我都无法将点的任何部分（套管或填充物）绘制在道路线的后面。例如，我可以更改道路的 zIndex 以在填充物前面绘制套管，但无论我选择多大的数字，我都无法在环岛前面绘制道路！

有什么想法可以解决这个问题并按照我的意愿绘制点吗？

谢谢，

迪伦

Answer 1

默认情况下，OpenLayers 将点（即您的环岛）渲染为矢量，但将线（即您的道路）预渲染为图像。这可以使用 ol.layer.VectorTile 的 renderMode 选项来控制，默认为 'hybrid'.

要在同一通道中渲染点和线（为了尊重 zIndex），请将 ol.layer.VectorTile 配置为 renderMode: 'image' 或 renderMode: 'vector'。

在 OpenLayers 中的线后绘制点

Drawing points behind lines in OpenLayers

openlayers