在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以获得在填充前绘制的套管，但无论我选择多大的数量，我都无法在环形交叉口前面绘制道路！< / p>

我有什么想法可以解决这个问题并按照我的意愿获得点数？

谢谢，

迪伦

Answer 1

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

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