Openlayer 3のレイヤーにカスタムHtml DOM要素を追加する方法

Question

Google api Overlayviewsを使用しました。私は、ピクセル値を使用して、latlng位置にhtml div要素を持つカスタムオーバーレイを追加することができました。

USGSOverlay.prototype.draw = function() { 
var overlayProjection = this.getProjection(); 
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
var div = this.div_; 
div.style.left = sw.x + 'px'; 
div.style.top = ne.y + 'px'; 
div.style.width = (ne.x - sw.x) + 'px'; 
div.style.height = (sw.y - ne.y) + 'px'; 
     }; 

私はOpenLayer 3を使用しています。ピクセル値を使って特定の位置にマーカーのようなカスタムdiv要素を追加するオプションはありますか？マップがズームインまたはズームアウトされるたびに、正しい位置に表示されるように、ピクセル位置を見つけてdiv要素の左上と左を更新できます。OpenLayer3ではこれが可能ですか？

Answer 1

ol3の特定の場所にプレーンHTMLを表示する場合は、ol.Overlayを使用します。 ol3 overlay exampleを参照してください。 CSSではプレーンHTMLとスタイルでコンテンツを制御できます。

// Vienna marker 
    var marker = new ol.Overlay({ 
    position: pos, 
    positioning: 'center-center', 
    element: document.getElementById('marker'), 
    stopEvent: false 
    }); 
    map.addOverlay(marker); 

あなたは、複数の場所のためにこれを行うのは、10以上を言わせる必要があり、そしてあなただけのマーカーのいくつかの並べ替えを表示する必要がある場合は、その後、私は適切なスタイルオブジェクトを代わりにol.layer.Vectorを使用してお勧めします。 ol3 icon exampleを参照してください。あなたのマーカーにはどんなイメージでも使用できます。また、その位置を制御することもできます。

var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ 
     anchor: [0.5, 46], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'pixels', 
     src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' 
    })) 
    });