如何使用 OpenLayers 指示带有小圆圈的多边形顶点？

Question

我正在使用 OpenLayers 3 并且或多或少地实现了我的需求列表中的所有内容，除了一件事：我被要求以某种方式使多边形渲染以小圆圈指示多边形顶点。

简而言之，所需的多边形轮廓不仅仅是一条线 - 它是一条 "adorned" 在所有有顶点的地方都有小圆圈的线。

我如何在 OL3 中做到这一点？我在 ol.style.Style 文档中搜索（即我通过 setStyle 传递给包含我的多边形的 ol.layer.Vector 的样式），但没有找到任何相关内容。

Answer 1

善良的 OL3 开发者 have provided the answer on the GitHub issue list. You basically use a style's geometry function, that transforms the geometry before projecting it - and in that function, you add your vertices to a MultiPoint geometry. @tsauerwein went as far as creating a working fiddle - 非常感谢他的工作。

var styleFunction = function() {
  var image = new ol.style.Circle({
    radius: 5,
    fill: null,
    stroke: new ol.style.Stroke({color: 'orange', width: 2})
  });
  return [
      new ol.style.Style({
          image: image,
          geometry: function(feature) {
              var coordinates = feature.getGeometry().getCoordinates()[0];
              return new ol.geom.MultiPoint(coordinates);
          }
      }),
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      })
  ];
};

Answer 2

作为参考，现在有一个示例显示如何使用 custom style geometry 显示多边形的顶点： http://openlayers.org/en/master/examples/polygon-styles.html

var styles = [
  // style for the polygon
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  }),
  // style for the vertices
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
      fill: new ol.style.Fill({
        color: 'orange'
      })
    }),
    geometry: function(feature) {
      // return the coordinates of the first ring of the polygon
      var coordinates = feature.getGeometry().getCoordinates()[0];
      return new ol.geom.MultiPoint(coordinates);
    }
  })
];

如何使用 OpenLayers 指示带有小圆圈的多边形顶点？

How to indicate polygon vertices with small circles using OpenLayers?

openlayers-3