openlayers-5 - 每个顶点的 OpenLayers v5.3 自定义样式

Question

根据我在文档和示例中看到的内容，我可以通过填充样式编辑所有具有相同的顶点。
我想确定多边形创建的顺序。
有没有办法给每个顶点一个不同的颜色/唯一的数字？

Answer 1

是的，不同的颜色、半径、zIndex 或任何其他样式设置：

function styles(feature) {

  var multipoint = new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);

  var styles = [

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

  ];

  multipoint.getCoordinates().forEach(function(coordinates, index, arr) {

var shade = (index+1)*50;
var radius = (index+5)*3;
var zIndex = 10-index;
var text = index < arr.length-1 ? String.fromCharCode('A'.charCodeAt(0) + index) : '';
styles.push(new ol.style.Style({
  zIndex: zIndex,
  image: new ol.style.Circle({
    radius: radius,
    fill: new ol.style.Fill({
      color: 'rgba(' + shade + ',' + shade + ', 0, 1)'
    })
  }),
  text: new ol.style.Text({
      text: text,
      font: 'bold 24px sans-serif',
      fill: new ol.style.Fill({
          color: 'red'
      }),
      stroke: new ol.style.Stroke({
          color: 'white',
          width: 4
      }),                            
  }),
  geometry: new ol.geom.Point(coordinates)

}));

  });

  return styles;
}

  var geojsonObject = {
    'type': 'FeatureCollection',
    'crs': {
      'type': 'name',
      'properties': {
        'name': 'EPSG:3857'
      }
    },
    'features': [{
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
          [-3e6, 6e6], [-5e6, 6e6]]]
      }
    }, {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
          [0, 6e6], [-2e6, 6e6]]]
      }
    }, {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
          [3e6, 6e6], [1e6, 6e6]]]
      }
    }, {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
          [0, -1e6], [-2e6, -1e6]]]
      }
    }]
  };

  var source = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
  });

  var layer = new ol.layer.Vector({
    source: source,
    style: styles
  });

  var map = new ol.Map({
    layers: [layer],
    target: 'map',
    view: new ol.View({
      center: [0, 3000000],
      zoom: 2
    })
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<div id="map" class="map"></div>

在您的代码中，我认为如果将选定和未选定的处理分开处理会更容易理解。此外，如果您打算处理线串，则获取坐标会略有不同。

let multiPoint;
const style = [new Style({  // stroke and fill for linestring/polygon
    fill: this.getFill(colorObject, 0.2),
    stroke:  this.getStroke(colorObject),
})];
// return the coordinates of the linestring or first ring of the polygon
const coordinates = type != 'Polygon' ? feature1.getGeometry().getCoordinates() : feature1.getGeometry().getCoordinates()[0];
multiPoint =  new MultiPoint(coordinates);
if (geometryIndex === IS_SELECTED) { // if this shape selected - new color for each vertex
          multiPoint.getCoordinates().forEach((coordinatesV, index) => {
            style.push(new Style({
              image: new CircleStyle({
                radius: 5,
                fill: this.getFill(this.getColorObject(index), 1)
              }),
              geometry: new Point(coordinatesV)
            }));
          });
} else {  // shape not selected - all vertices to have same color ?
    style.push(new Style({
      image: new CircleStyle({
        radius: 5,
        fill: this.getFill(colorObject, 1)
      }),
      geometry: multiPoint
    }));
}
return style;