4

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.

4

1 に答える 1

5

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

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

複数の locationに対してこれを行う必要がある場合、たとえば 10 以上の場所で、何らかのマーカーを表示するだけでよい場合はol.layer.Vector、適切なスタイル オブジェクトで代わりに a を使用することをお勧めします。ol3 アイコンの例を参照してください。マーカーには任意の画像を使用できます。その位置を制御することもできます。

  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'
    }))
  });
于 2017-01-02T14:14:30.573 に答える