Openlayers tips

Openlayerの個人的備忘録です
v4.6.5

ロゴを消す

new ol.Map({
    ...
    logo: false,
})

コントロールボタンのスタイルをカスタマイズする

.ol-control , .ol-control buttonあたりのCSSをいじる

//ボタンの色を変えるサンプル

.ol-control button {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}

.ol-control {
  background-color: rgba(0, 0, 0, 0) !important;
}

See the Pen openlayer custom controll style by ukiuki-satoshi (@ukiuki-satoshi) on CodePen.

画像レイヤを表示する

ol.layer.Image と ol.source.ImageStatic を使います。
この例では、適切なズーム係数を設定するため、Image.onload() にフックして画像サイズを取得してから画像レイヤの追加を行なっています。

var map = new ol.Map({
  target: 'map'
});

// 表示する画像のURL
var imgUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/ThirdageMiddle-earth.jpg";

// 画像サイズを取得するため onloadにフックする
var img = new Image();
img.onload = function() {
  // イメージレイヤーの追加
  map.addLayer(new ol.layer.Image({
    source: new ol.source.ImageStatic({
      url: imgUrl,
      imageExtent: [0, 0, img.width, img.height],
    })
  }));

  // ビュー（位置とズーム倍率）の設定
  var C = 40075016;
  var PIXELS_PER_TILE = 256;

  // 画像・キャンバス比の縦横比が大きい方に合わせてズームを設定する
  var zoom_ratio = Math.max(img.width/map.getSize()[0], img.height/map.getSize()[1]);
  var zoom = Math.log2((1/zoom_ratio) * C / PIXELS_PER_TILE);
 
  map.setView(new ol.View({
    center: [img.width/2, img.height/2],
    zoom: zoom,
  }));
  
};
img.src = imgUrl;

See the Pen openlayer image layer by ukiuki-satoshi (@ukiuki-satoshi) on CodePen.

インタラクションのカスタマイズ

インタラクションはopenlayerに対するユーザの操作を表すオブジェクトで、 ol.Map に登録することで利用可能になります。
デフォルトのインタラクションは、ol.interaction.defaults に登録されており、何も指定しなければ、このデフォルトインタラクションが使われます。一部を削除、および、独自定義のインタラクションを追加することもできます。

デフォルトインタラクションの、ol.interaction.DragZoom を削除する例。

map = new ol.Map({
  ...
  interactions: ol.interaction.defaults({
    shiftDragZoom: false,
  })
})

カスタマイズしたインタラクションを追加する例。
ol.source.Vector レイヤにベクタ描画を行う ol.interaction.Draw をカスタマイズしたインタラクションを追加します。Shiftを押す操作が被るため、shiftDragZoom は削除します。
追加する方法は、ol.Map 作成時に extend を使うか、 ol.Map.addInteraction()があるようです。

var source = new ol.source.Vector();

var dragDraw = new ol.interaction.Draw({
  source: source,
  type: "Circle",
  geometryFunction: ol.interaction.Draw.createBox(),
  condition: ol.events.condition.never,
  stopClick: true,
  freehandCondition: ol.events.condition.shiftKeyOnly,
});

var map = new ol.Map({
  ...
  layers: [
    source,
  ],
  interactions: ol.interaction.defaults({
    shiftDragZoom: false,
  }).extend([dragDraw]),
});

// こっちでもOK
//map.addInteraction(dragDraw)

See the Pen openlayer ShiftDragDraw by ukiuki-satoshi (@ukiuki-satoshi) on CodePen.

デフォルトインタラクション