如何指示使用的OpenLayers小圆圈多边形顶点？(How to indicate polygon

我使用的OpenLayers 3，并或多或少实现我的需求清单一切，除了一两件事：我被要求以某种方式使多边形绘制指示与小圆圈的多边形顶点。

在平淡的话，所需多边形轮廓不只是一条线 - 这是一条线在那里有一个顶点的所有地方“装饰”与小圆圈。

我怎样才能做到这一点在OL3？ 我搜索在ol.style.Style文档（也就是我通过传递样式setStyle到ol.layer.Vector包含我的多边形），但没有找到任何有关。

Answer 1:

作为参考，现在有示出如何与显示一个多边形的顶点的示例的自定义样式的几何形状 ： 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);
    }
  })
];

Answer 2:

那种OL3开发者提供了GitHub的问题列表中的答案 。 你基本上使用样式的几何形状的功能，即投影变换之前的几何形状 - 在该函数，你把你的顶点多点的几何形状。 @tsauerwein尽可能创造一个去工作小提琴非常感谢他所做的工作- 。

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)'
        })
      })
  ];
};

文章来源: How to indicate polygon vertices with small circles using OpenLayers?