在openlayers中，如何从多边形的url中拟合拉伸图片？

问题描述

我尝试在多边形中添加图片我找到了这个答案In openlayers 3,how to fill the polygon with a picture from a url?

但是，我想使图片适合（拉伸）到多边形中（因为我打算添加以后可以调整多边形大小的特征）我已经尝试

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

但是没有用。有什么办法可以做到这一点？

解决方法

在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,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>

javascript openlayers

在openlayers中，如何从多边形的url中拟合拉伸图片？

问题描述

解决方法

相关问答