如何使用OpenLayers指示带有小圆圈的多边形顶点? [英] How to indicate polygon vertices with small circles using OpenLayers?

问题描述

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

I am using OpenLayers 3 and have more or less implemented everything in my requirements list, except one thing: I am asked to somehow make the polygon rendering indicate the polygon vertices with small circles.

用通俗易懂的话来说，所需的多边形轮廓不仅仅是一条线，而是一条在所有有顶点的地方装饰"有小圆圈的线.

In plain words, the desired polygon outline is not just a line - it is a line "adorned" with small circles in all the places where there is a vertex.

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

How can I do that in OL3? I searched in the ol.style.Style docs (that is, the style I pass via setStyle to the ol.layer.Vector containing my polygons), but didn't find anything relevant.

推荐答案

作为参考，现在有一个示例，显示了如何使用 http://openlayers.org/en/master/examples/polygon-styles.html

For reference, there is now an example showing how to display the vertices of a polygon with a 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指示带有小圆圈的多边形顶点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！