如何使用OpenLayers创建圆形图标图像?

时间:2017-10-24 19:52:44

标签: javascript angular typescript ionic-framework openlayers

我在离子应用程序中使用openlayers。现在我将用户放在地图上。我被卡住了,我不知道如何为用户元素添加一些自定义css样式,因为它在html中不可见。正如你在下面的截图中看到的,我在背景中绘制圆圈,然后在上面添加图像。现在我想要那个图像也是圆的。最简单的事情是使用css,但我无法将其添加到元素中。

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

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

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

1 个答案:

答案 0 :(得分:0)

我找到了this的解决方法。 而是使用ol.Feature作为标记,我用ol.Overlay做了。现在我可以在地图上放置任何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);

}}