【问题标题】:Openlayers 3.19.0 seems to require stroke style for proper rendering of multipolygonsOpenlayers 3.19.0 似乎需要笔触样式才能正确渲染多面体
【发布时间】:2016-10-28 13:14:43
【问题描述】:

在创建 ol.layer.Vector 的 ol.style.Style 参数时,是否需要描边才能正确渲染 MultiPolygon?

这是取自here 的示例代码的修改版本。当 stroke 参数被注释掉时,多边形呈现​​为 3 边多边形。取消注释 stroke 参数时,多边形正确呈现为 4 边多边形。 This 是一个 jsfiddle 示例。下面的代码假设有一个 id 为“map”的 html <div> 元素。

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

【问题讨论】:

  • 你能用 3.19.1 试试吗?
  • @bartvde Here 是使用 3.19.1 的更新示例...问题仍然存在。
  • 好的,对我来说似乎是一个错误,请提交 GitHub 问题

标签: javascript openlayers-3


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-19
    • 1970-01-01
    相关资源
    最近更新 更多