开放层移动和恢复图像ol.interaction.draw

Question

在我的应用中，我写了一个ol.interaction.draw代码，每当我单击一个地图面板时，我可以绘制一个圆圈，并且这个圆圈对我有用，因为我可以移动，按比例旋转并重新分组。这是我的代码：

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

，但我想绘制一个图像（例如，使用源媒体/图像/landscape.png），而不是一个圆，而是具有相同的特征（拖动，旋转，旋转，按比例进行恢复）。我该怎么做？

Answer 1

您可能想绘制圆圈，但使用您的png作为图标进行样式。缩放将基于圆半径。圆的几何形状不包括旋转，而是通过在交互中使用几何功能，您可以设置旋转并使用它来旋转图标（需要根据图标的哪个边缘或角落进行调整角度）。

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>