OpenLayers tips

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

## ロゴを消す
```css

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

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

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

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

<p data-height="265" data-theme-id="0" data-slug-hash="BVYMOx" data-default-tab="html,result" data-user="ukiuki-satoshi" data-embed-version="2" data-pen-title="openlayer custom controll style" class="codepen">See the Pen <a href="https://codepen.io/ukiuki-satoshi/pen/BVYMOx/">openlayer custom controll style</a> by ukiuki-satoshi (<a href="https://codepen.io/ukiuki-satoshi">@ukiuki-satoshi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 画像レイヤを表示する

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

```js

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;
```

<p data-height="265" data-theme-id="0" data-slug-hash="eKVXJp" data-default-tab="js,result" data-user="ukiuki-satoshi" data-embed-version="2" data-pen-title="openlayer image layer" class="codepen">See the Pen <a href="https://codepen.io/ukiuki-satoshi/pen/eKVXJp/">openlayer image layer</a> by ukiuki-satoshi (<a href="https://codepen.io/ukiuki-satoshi">@ukiuki-satoshi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

```js

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

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

```js

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)
```

<p data-height="265" data-theme-id="0" data-slug-hash="qKoWPO" data-default-tab="js,result" data-user="ukiuki-satoshi" data-embed-version="2" data-pen-title="openlayer ShiftDragDraw" class="codepen">See the Pen <a href="https://codepen.io/ukiuki-satoshi/pen/qKoWPO/">openlayer ShiftDragDraw</a> by ukiuki-satoshi (<a href="https://codepen.io/ukiuki-satoshi">@ukiuki-satoshi</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

[デフォルトインタラクション](https://openlayers.org/en/latest/apidoc/ol.interaction.html)