Javascript OpenLayers移动并重新缩放图像ol.interaction.Draw

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

map.addInteraction（新建ol.interaction.Modify({
特色：这个。特色，
deleteCondition:函数（事件）{
返回ol.events.condition.shiftKeyOnly（事件）和ol.events.condition.singleClick（事件）；
}
}));
this.draw=新建ol.interaction.draw({
特色：这个。特色，
键入：“圆”，
可拖动：正确；
});
this.draw.on（'drawstart'，函数（）{
this.features.clear（）；
}，这个）；
this.map.addInteraction（this.draw）您可能希望绘制圆，但使用png作为图标来设置圆的样式。缩放将基于圆半径。圆几何不包括旋转，但通过在交互中使用geometryFunction，可以设置旋转并使用该旋转来旋转图标（角度需要根据用于旋转的图标的边或角进行调整）


var-white=[255,255,255,1]；
VarBlue=[0153255,1]；
var宽度=3；
样式=[
新ol风格({
填充：新的ol.style.fill({
颜色：[255，255，255，0.5]
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度+2
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：蓝色，
宽度：宽度
})
}),
新ol风格({
图片：新ol.style.Circle({
半径：宽度*2，
填充：新的ol.style.fill({
颜色：蓝色
}),
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度/2
})
}),
zIndex:无限
})
];
var treeStyle=新的ol.style.style({
图片：新ol.style.Icon({
src:'https://www.freeiconspng.com/uploads/oak-tree-icon-png-17.png'
})
});
styleFunction=函数（特征、分辨率）{
if（feature.getGeometry（）.getCenter）{
setGeometry（新的ol.geom.Point（feature.getGeometry（）.getCenter（））；
treeStyle.getImage（）.setRotation（feature.getGeometry（）.get（'rotation'）；
treeStyle.getImage（）.setScale（feature.getGeometry（）.getRadius（）/（150*分辨率））；
返回树样式；
}否则{
返回样式；
} 
}
var raster=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（{wrapX:false}）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
style:styleFunction
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
var draw=新ol.interaction.draw({
资料来源：资料来源，
键入：“圆”，
geometryFunction：函数（坐标、几何）{
变量中心=坐标[0]；
var last=坐标[1]；
var dx=中心[0]-最后[0]；
var dy=中心[1]-最后[1]；
变量半径=数学sqrt（dx*dx+dy*dy）；
变量旋转=Math.PI-Math.atan2（dy，dx）；
几何=几何| |新几何圆（中心、半径）；
几何。设置中心（中心）；
几何。设置半径（半径）；
几何设置（“旋转”，旋转）；
返回新的几何圆（中心、半径）；
},
style:styleFunction
});
地图。添加交互作用（绘制）
您可能希望绘制圆形，但使用png作为图标来设置它们的样式。缩放将基于圆半径。圆几何不包括旋转，但通过在交互中使用geometryFunction，可以设置旋转并使用该旋转来旋转图标（角度需要根据用于旋转的图标的边或角进行调整）


var-white=[255,255,255,1]；
VarBlue=[0153255,1]；
var宽度=3；
样式=[
新ol风格({
填充：新的ol.style.fill({
颜色：[255，255，255，0.5]
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度+2
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：蓝色，
宽度：宽度
})
}),
新ol风格({
图片：新ol.style.Circle({
半径：宽度*2，
填充：新的ol.style.fill({
颜色：蓝色
}),
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度/2
})
}),
zIndex:无限
})
];
var treeStyle=新的ol.style.style({
图片：新ol.style.Icon({
src:'https://www.freeiconspng.com/uploads/oak-tree-icon-png-17.png'
})
});
styleFunction=函数（特征、分辨率）{
if（feature.getGeometry（）.getCenter）{
setGeometry（新的ol.geom.Point（feature.getGeometry（）.getCenter（））；
treeStyle.getImage（）.setRotation（feature.getGeometry（）.get（'rotation'）；
treeStyle.getImage（）.setScale（feature.getGeometry（）.getRadius（）/（150*分辨率））；
返回树样式；
}否则{
返回样式；
} 
}
var raster=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（{wrapX:false}）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
style:styleFunction
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
var draw=新ol.interaction.draw({
资料来源：资料来源，
键入：“圆”，
geometryFunction：函数（坐标、几何）{
变量中心=坐标[0]；
var last=坐标[1]；
var dx=中心[0]-最后[0]；
var dy=中心[1]-最后[1]；
变量半径=数学sqrt（dx*dx+dy*dy）；
弗吉尼亚州