在 openlayers 3 中，如何用 url 中的图片填充多边形？

Question

我想在多边形中添加图片，但是我在openlayers 3中没有找到这样的功能。有什么办法可以实现吗？

提前致谢！

Answer 1

我不确定您的要求的视觉输出是什么，但我可以为您提供解决问题的方向。

OL3 可以使用预定义的样式或样式数组，甚至可以使用 returns 为每个提供的功能提供样式的函数。所以你应该适当地使用样式功能来实现你的目标。假设您想在每个矢量多边形中放置一个图像。考虑以下代码 snip

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'http://openlayers.org/en/v3.14.0/examples/data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature, resolution) {
   var styles = [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      }),
      fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.5)'
      })
    })
  ];
  var mygeomType = feature.getGeometry().getType();
  //handle the case of polygons/multipolygons
  var retGeom = null;
  if (mygeomType === 'MultiPolygon'){
 //get the interior points for every polygon of the multipolygon
  retGeom = feature.getGeometry().getInteriorPoints();
  }
  if (mygeomType === 'Polygon'){
 //just get the interiot point of the simple polygon
  retGeom = feature.getGeometry().getInteriorPoint();
  }
  styles.push(new ol.style.Style({
      geometry: retGeom,
      image: new ol.style.Icon({
        src: 'http://openlayers.org/en/master/examples/data/icon.png',
        anchor: [0.75, 0.5],
        rotateWithView: true
      })
    }));
 return styles;  
}});

检查此 fiddle 以查看它的实际效果。

Answer 2

因为 Pull Request #4632 you can use a CanvasRenderingContext2D.fillStyle as ol.style.Fill#color property and create a pattern.

像这样：

var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'https://i.imgsafe.org/73d1273.png';

img.onload = function(){
  var pattern = ctx.createPattern(img, 'repeat');

  // featurePoly is ol.Feature(new ol.geom.Polygon(...))
  featurePoly.setStyle(new ol.style.Style({
    fill: new ol.style.Fill({
      color: pattern
    })
  }));
};

Live demo.

在 openlayers 3 中，如何用 url 中的图片填充多边形？

In openlayers 3, how to fill the polygon with a picture from a url?

javascript

openlayers-3