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>