OpenLayers перемещают и масштабируют изображение 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);

Но я хотел бы нарисовать изображение (например, с источником media / image / landscape.png) вместо одного круга, но с теми же функциями (перетаскивание, вращение, пропорциональное изменение масштаба). Как я мог это сделать?

Answer 1

Возможно, вы захотите нарисовать круги, но стилизуйте их, используя ваш png как иконку.Масштабирование будет основано на радиусе круга.Геометрия окружности не включает вращение, но с помощью функции geometryFunction во взаимодействии вы можете установить вращение и использовать его для поворота значка (угол необходимо регулировать в зависимости от того, какой край или угол значка используется для поворота).

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>