Openlayer 3 레이어에 맞춤 HTML DOM 요소를 추가하는 방법

Question

Google API 오버레이 뷰를 사용했습니다. 픽셀 값을 사용하여 latl 위치에 html div 요소가있는 사용자 정의 오버레이를 추가 할 수있었습니다. 지금은 OpenLayer 3을 사용하고

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'; 
     }; 

픽셀 값을 사용하여 특정 위치에 마커와 같은 사용자 정의 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' 
    })) 
    });