如何使用 OpenLayers 创建圆形图标图像？答案

【问题标题】：How can I create a round icon image with OpenLayers?如何使用 OpenLayers 创建圆形图标图像？
【发布时间】：2018-04-05 17:58:44
【问题描述】：

我在我的 ionic 应用程序中使用 openlayers。现在我将用户放在地图上。我被卡住了，我不知道如何向用户元素添加一些自定义 css 样式，因为它在 html 中不可见。正如您在下面的屏幕截图中看到的那样，我在背景中画了一个圆圈，并在上面添加了图像。现在我希望那个图像也是圆形的。最简单的事情是使用 css，但我无法将它添加到元素中。

示例地图： https://gyazo.com/3fb6b2e3565572b0c0a64044c645e364

我定义圆圈和图标的部分代码：https://gyazo.com/cc80d368dfa8874739be14ce09eadffd

检查地图： https://gyazo.com/7fadd75cfd4f9e517b76300b4c1b3c9c

【问题讨论】：

样式中的border-radius可以设置为10000
但是如何，请查看最后的屏幕截图。地图实际上是所有东西都被绘制出来的画布，没有像 img 或某些 div 这样的暴露元素。

标签： javascript angular typescript ionic-framework openlayers

【解决方案1】：

我找到了this 的解决方法。我使用 ol.Overlay 代替了使用 ol.Feature 作为标记。现在我可以将任何 html element 放在地图上，并随心所欲地控制它，因为它可以在 html 中访问。 (screen #2)

updateMarkers(featuresArr) {

for(var i = 0; i < featuresArr.length; i++)
{
  var overlayelement = new ol.Overlay({
    stopEvent: false,
    positioning: 'center-center',
    element: document.getElementById('slika')
  });
  overlayelement.setPosition(featuresArr[i].getGeometry().getCoordinates());

  this.olMap.addOverlay(overlayelement);

}}

【讨论】：