Openlayers 3.19.0 似乎需要笔划样式才能正确渲染多边形

Question

创建 ol.layer.Vector 的 ol.style.Style 参数时，正确渲染多边形是否需要描边？

这是取自 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 的示例代码的修改版本，是一个 jsfiddle 示例。下面的代码假设有一个 html <div> 元素，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

这不是错误。上面代码片段中的坐标无效。根据GeoJSON specification、"The first and last positions are equivalent, and they MUST contain identical values;"。对于上面的代码片段，正确的坐标数组应该是

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

Openlayers 3.19.0 似乎需要笔划样式才能正确渲染多边形

Openlayers 3.19.0 seems to require stroke style for proper rendering of multipolygons

javascript

openlayers-3