如何使用 Open Layers 3 在地图上添加可缩放图形？答案

【问题标题】：How to add scalable graphics on map using Open Layers 3?如何使用 Open Layers 3 在地图上添加可缩放图形？
【发布时间】：2014-07-21 22:39:12
【问题描述】：

我正在使用 OpenLayers (OL3) 在地图上显示形状和对象。

这些形状代表建筑物，并将具有 SVG 或 PNG 格式的图像资源。我需要将这些图像以适当的比例和旋转放置在地图上，并且仍然能够缩放/平移。

我在这里找到了一个使用 OpenLayers 2 的非常好的示例： http://gis.ibbeck.de/ginfo/apps/OLExamples/OL27/examples/ExternalGraphicOverlay/ExternalGraphicOverlay.asp

我在将其转换为 OL3（地图旋转需要它）时遇到问题。我被卡住的是这个（OL2中的示例代码）：

var context = {
   getW : function(){
     return theWidth * theResolution / map.getResolution();
   },
   getH : function(){
     return theHeight * theResolution / map.getResolution();
   },
   getR : function(){
     return theRotation;
   }
};
var template = {
   graphicWidth   : "${getW}",
   graphicHeight  : "${getH}",
   rotation       : "${getR}"
};
var styleMap = OpenLayers.Style(template, {context: context});
vectorLayer.styleMap = styleMap;

我不知道如何将其转换为 ol.style.Style 以在缩放时缩放的图层上设置图像。

如何使用 OL3 来实现？

【问题讨论】：

标签： image svg openlayers openlayers-3

【解决方案1】：

也许ol.source.ImageStatic (API documentation) 就是您要找的东西？

【讨论】：

我已经看过了，但我没有找到如何将它与平铺层一起使用的示例。我想要背景中的真实地图和放置在顶部的建筑物。现在我正在使用 ol.style.Icon 并且可以正常旋转，因为我可以设置 rotateWithView:true 并且缩放更改后缩放会刷新，但我也希望它在缩放/旋转期间缩放。