Question

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

简单来说，所需的多边形轮廓不仅仅是一条线 - 它是一条线＆＃34;装饰＆＃34;在有顶点的所有地方都有小圆圈。

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

Answer 1

作为参考，现在有一个示例显示如何使用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);
    }
  })
];

Answer 2

OL3开发者have provided the answer on the GitHub issue list。您基本上使用样式的几何函数，在投影之前变换几何体 - 在该函数中，您将顶点添加到MultiPoint几何体。 @tsauerwein甚至创造了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)'
        })
      })
  ];
};

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

2 个答案: