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>

OpenLayers移动和缩放图像ol.interaction.Draw

1 个答案: