Openlayers 3.19.0似乎需要笔触样式才能正确渲染多面

Question

When creating the ol.style.Style parameter of a ol.layer.Vector, is the stroke required for proper rendering of the MultiPolygon?

This is a modified version of the example code taken from here . When the stroke parameter is commented out, the polygon renders as a 3 sided polygon. When uncommenting the stroke parameter, the polygon renders correctly as a 4 sided polygon. This is a jsfiddle example. The code below assumes there is an html <div> element with the id "map".

var styleFunction = (function() {
  var styles = {};
  styles['MultiPolygon'] = new ol.style.Style({
    /*stroke: new ol.style.Stroke({
      color: 'rgba(255, 255, 0, 1)',
      width: 1
    }),*/
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 0, 0.3)'
    })
  });
  return function(feature) {
    return styles[feature.getGeometry().getType()] || styles['default'];
  };
})();

var geojsonObject = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:3857'
    }
  },
  'features': [{
    'type': 'Feature',
    'geometry': {
      'type': 'MultiPolygon',
      'coordinates': [[[[841605, 6482619], [841599, 6482618], [841598, 6482623], [841600, 6482624]]]]
    }
  }]
};

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

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

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

Answer 1

This is not a bug. The coordinates in the code snippet above are invalid. According to the GeoJSON specification , "The first and last positions are equivalent, and they MUST contain identical values;" . For the above snippet, the correct coordinates array would be

'coordinates': [[[[841605, 6482619], [841599, 6482618], [841598, 6482623], [841600, 6482624], [841605, 6482619]]]]