在 openlayers 中，如何在多边形中拟合（拉伸）来自 url 的图片？

Question

我尝试在多边形中添加图片我找到了这个答案

但是，我想在多边形中调整（拉伸）图片（因为我的目标是添加可以稍后调整多边形大小的功能）我试过了

var pattern = ctx.createPattern(img, 'no-repeat');

但是没用。有什么办法可以实现吗？

Answer 1

在 OpenLayers 3 和 4 中，您可以创建一个图案以适应特征将占据的大小（类似于 https://openlayers.org/en/v4.6.5/examples/canvas-gradient-pattern.html 中的渐变适应宽度）。这随分辨率而变化，需要一个样式函数，它必须是同步的，所以图像应该被预加载。在更高版本中，它会更加复杂，因为您必须确定 OpenLayers 将使用的 512 像素原点而不是要素的范围，并相应地填充或裁剪图案。

<!DOCTYPE html>
<html>
  <head>
    <title>Styling feature with CanvasGradient or CanvasPattern</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
      #map {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

      var flagStyle = function(feature, resolution) {
        var pattern;
        var img = feature.get('flag');
        if (img) {
          var cnv1 = document.createElement('canvas');
          var ctx1 = cnv1.getContext('2d');

          // Patterns are in canvas pixel space, so we adjust for the
          // renderer's pixel ratio
          var pixelRatio = ol.has.DEVICE_PIXEL_RATIO;

          var extent = feature.getGeometry().getExtent();
          var width = ol.extent.getWidth(extent) / resolution * pixelRatio;
          var height = ol.extent.getHeight(extent) / resolution * pixelRatio;
          if (width >= 1 && height >= 1) {
            cnv1.width = width;
            cnv1.height = height;
            ctx1.drawImage(img, 2, 12, 60, 40, 0, 0, width, height);

            var cnv2 = document.createElement('canvas');
            var ctx2 = cnv2.getContext('2d');
            pattern = ctx2.createPattern(cnv1, 'no-repeat');
          }
        }
        return new ol.style.Style({
          fill: new ol.style.Fill({
            color: pattern
          })
        });
      };

      // Create a vector layer that makes use of the style function above…
      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'https://openlayersbook.github.io/openlayers_book_samples/assets/data/countries.geojson',
          format: new ol.format.GeoJSON()
        }),
        style: flagStyle
      });

      vectorLayer.getSource().on('addfeature', function(event) {
        var feature = event.feature;
        var img = new Image();
        img.onload = function() {
          feature.set('flag', img);
        }
        img.src = 'https://www.countryflags.io/' +
          feature.get('iso_a2').toLowerCase() + '/flat/64.png';
      });

      var map = new ol.Map({
        layers: [
          vectorLayer
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([7, 52]),
          zoom: 3
        })
      });
    </script>
  </body>
</html>

在 openlayers 中，如何在多边形中拟合（拉伸）来自 url 的图片？

In openlayers, how to fit (stretch) a picture from a url in the polygon?

javascript

openlayers