javascript - OpenLayers 移动和重新缩放图像 ol.interaction.Draw

Question

在我的应用程序中，我编写了一个 ol.interaction.Draw 代码，该代码允许我每次单击一个 map 面板时绘制一个圆圈，并且这个圆圈对我很有用，因为我可以按比例移动、旋转和重新缩放它。这是我的代码:

 map.addInteraction(new ol.interaction.Modify({
                features: this.features,
                deleteCondition: function (event) {
                    return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
                }
            }));
            this.draw = new ol.interaction.Draw({
                features: this.features,
                type: 'Circle',
                draggable:true;
                   });
            this.draw.on('drawstart', function () {
                this.features.clear();
            }, this);
            this.map.addInteraction(this.draw);

但我想绘制一张图像(例如使用源 media/image/landscape.png)，而不是一个圆圈，但具有相同的功能(拖放、旋转、按比例重新缩放)。我怎样才能做到呢？

Answer 1

您可能想要绘制圆圈，但使用您的 png 作为图标来设置它们的样式。缩放比例将基于圆半径。圆形几何体不包括旋转，但通过在交互中使用 GeometryFunction，您可以设置旋转并使用它来旋转图标(需要根据图标的边缘或 Angular 进行旋转来调整 Angular )。

var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;
styles = [
  new ol.style.Style({
    fill: new ol.style.Fill({
      color: [255, 255, 255, 0.5]
    })
  }),
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: white,
      width: width + 2
    })
  }),
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: blue,
      width: width
    })
  }),
  new ol.style.Style({
    image: new ol.style.Circle({
      radius: width * 2,
      fill: new ol.style.Fill({
        color: blue
      }),
      stroke: new ol.style.Stroke({
        color: white,
        width: width / 2
      })
    }),
    zIndex: Infinity
  })
];

var treeStyle = new ol.style.Style({
    image: new ol.style.Icon({
       src: 'https://www.freeiconspng.com/uploads/oak-tree-icon-png-17.png'
    })
});

styleFunction = function(feature, resolution) {
    if (feature.getGeometry().getCenter) {
        treeStyle.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
        treeStyle.getImage().setRotation(feature.getGeometry().get('rotation'));
        treeStyle.getImage().setScale(feature.getGeometry().getRadius()/(150*resolution));
        return treeStyle;
    } else {
       return styles;
    } 
}

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

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

var vector = new ol.layer.Vector({
    source: source,
    style: styleFunction
});

var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

var draw = new ol.interaction.Draw({
    source: source,
    type: 'Circle',
    geometryFunction: function(coordinates, geometry) {
        var center = coordinates[0];
        var last = coordinates[1];
        var dx = center[0] - last[0];
        var dy = center[1] - last[1];
        var radius = Math.sqrt(dx * dx + dy * dy);
        var rotation = Math.PI - Math.atan2(dy, dx);
        geometry = geometry || new ol.geom.Circle(center, radius);
        geometry.setCenter(center);
        geometry.setRadius(radius);
        geometry.set('rotation', rotation);
        return new ol.geom.Circle(center, radius);
    },
    style: styleFunction
});
map.addInteraction(draw);

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>