自定义矢量图层的样式 ol3

Question

我使用 geojson 文件构建添加到地图的图层。我想要的是自定义图层多边形的样式，以便拥有阴影多边形，例如我们可以使用 mapserver 符号来做到这一点。用 ol3 可以做到这一点吗？我试图创建一个图像并使用它，但它只适用于点几何。谢谢您的帮助。问候。

Answer 1

OpenLayers 3（尚）不支持多边形的填充图案，另请参阅 https://github.com/openlayers/ol3/issues/2208

Answer 2

现在可以了。 ol.style.Style 对象接受一个 CanvasRenderingContext2D 实例，您可以在其中将图像图案应用于多边形。

示例代码片段

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

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

var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  layer.setStyle(new ol.style.Style({
    fill: new ol.style.Fill({
      color: pattern
   })
 }));
};

完整的例子可以在这里看到：jsfiddle

自定义矢量图层的样式 ol3

Customize style of a vector layer ol3

openlayers-3