在openlayers 3中，如何用url中的图片填充多边形? [英] In openlayers 3, how to fill the polygon with a picture from a url?

问题描述

我想在多边形中添加图片，但是在openlayers 3中找不到这种功能.有什么方法可以实现?

I would like to add a picture in the polygon, however, I do not find such function in openlayers 3. Is there any way to achieve this?

提前谢谢！

推荐答案

由于请求#4632 您可以使用 CanvasRenderingContext2D.fillStyle 作为 ol.style.Fill#color 属性和类似这样的东西:

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

实时演示.

这篇关于在openlayers 3中，如何用url中的图片填充多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！