OpenLayersのプラグインを公開してみた

![openlayers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/9e155ed2-c221-63b6-dca7-90160144740a.png)

<br>

![スクリーンショット 2020-04-29 22.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/ce2bfed0-db29-7072-f2b5-dbf048e53b11.png)

### OpenLayersのプラグインを構築して公開してみました :tada:  

[ol-opacity](https://github.com/dayjournal/ol-opacity)という、透過機能を持ったLeafletライクなUIのOpenLayersプラグインを構築して公開してみました。 
[OpenLayers](https://openlayers.org/)の[プラグイン一覧](https://openlayers.org/3rd-party)にも登録されました :tada:   

# サンプル
[example](https://dayjournal.github.io/ol-opacity)

# リポジトリ
[ol-opacity](https://github.com/dayjournal/ol-opacity)  

# サンプル作成方法
[openlayers-starter](https://github.com/dayjournal/openlayers-starter)を利用することで手軽にOpenLayersのビルド環境を構築可能です。
プラグインは、[npm](https://www.npmjs.com/package/ol-opacity)に公開しているのでパッケージインストール可能です。

<br>

## パッケージインストール

```bash

npm install ol-opacity
```

<br>

## JSファイル修正
[openlayers-starter](https://github.com/dayjournal/openlayers-starter)のmain.jsとscript.jsを修正します。

### main.js

```javascript

// CSS import
import "ol/ol.css";
import "ol-opacity/dist/ol-opacity.css";
import "./css/style.css";

// JS import
import './js/script.js';
```

<br>

ol-opacity.cssをインポートします。

```javascript

import "ol-opacity/dist/ol-opacity.css";
```

<br>

### script.js

```javascript

// ol module import
import Map from 'ol/Map';
import View from 'ol/View';
import LayerGroup from 'ol/layer/Group';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

// plugin module import
import OpacityControl from "ol-opacity";

// MIERUNE Streets
const m_streets = new TileLayer({
    title: 'MIERUNE Streets',
    id: 'm_streets',
    source: new XYZ({
        url: 'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se',
        attributions: '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
        attributionsCollapsible: false,
        tileSize: [256, 256],
        minZoom: 0,
        maxZoom: 18,
        visible: true
    })
});

// MIERUNE Gray
const m_gray = new TileLayer({
    title: 'MIERUNE Gray',
    id: 'm_gray',
    source: new XYZ({
        url: 'https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=giAeaRZBFWKqrzIDD5Se',
        attributions: '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
        attributionsCollapsible: false,
        tileSize: [256, 256],
        minZoom: 0,
        maxZoom: 18
    })
});

// OpenStreetMap
const o_std = new TileLayer({
    title: 'OpenStreetMap',
    id: 'o_std',
    source: new XYZ({
        url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
        attributions: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        attributionsCollapsible: false,
        tileSize: [256, 256],
        minZoom: 0,
        maxZoom: 18
    })
});

// GSI Pale
const t_pale = new TileLayer({
    title: 'GSI Pale',
    id: 't_pale',
    source: new XYZ({
        url: 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
        attributions: '<a href=\'http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\' target=\'_blank\'>国土地理院</a>',
        attributionsCollapsible: false,
        tileSize: [256, 256],
        minZoom: 0,
        maxZoom: 18
    })
});

// GSI Ort
const t_ort = new TileLayer({
    title: 'GSI Ort',
    id: 't_ort',
    source: new XYZ({
        url: 'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
        attributions: '<a href=\'http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html\' target=\'_blank\'>国土地理院</a>',
        attributionsCollapsible: false,
        tileSize: [256, 256],
        minZoom: 0,
        maxZoom: 18
    })
});

// BaseLayer
const mapBaseLayer = new LayerGroup({
    title: 'BaseLayer',
    id: 'baseLayer',
    layers: [
        m_streets,
        m_gray
    ]
});

// OverLayer
const mapOverLayer = new LayerGroup({
    title: 'OverLayer',
    id: 'overLayer',
    layers: [
        o_std,
        t_pale,
        t_ort
    ]
});


// MapCreate
const map = new Map ({
    target: 'map',
    layers: [
        mapBaseLayer,
        mapOverLayer
    ],
    view: new View ({
        center: fromLonLat([139.767, 35.681]),
        zoom: 11
    })
});

// OpacityControl
const opacityControl = new OpacityControl({
    baseLayers: mapBaseLayer,
    overLayers: mapOverLayer,
    opacityControl: true
});
map.addControl(opacityControl);
m_streets.setVisible(true);
```

<br>

ol-opacity.jsをインポートします。

```javascript
// plugin module import
import OpacityControl from "ol-opacity";
```

<br>

背景用レイヤとオーバーレイレイヤを設定します。

```javascript
// BaseLayer
const mapBaseLayer = new LayerGroup({
    title: 'BaseLayer',
    id: 'baseLayer',
    layers: [
        m_streets,
        m_gray
    ]
});

// OverLayer
const mapOverLayer = new LayerGroup({
    title: 'OverLayer',
    id: 'overLayer',
    layers: [
        o_std,
        t_pale,
        t_ort
    ]
});
```

<br>

OpacityControlを設定します。オプションで背景用レイヤとオーバーレイレイヤを指定し、「opacityControl:」で透過スライドバーのON/OFFが可能です。

```javascript
// OpacityControl
const opacityControl = new OpacityControl({
    baseLayers: mapBaseLayer,
    overLayers: mapOverLayer,
    opacityControl: true
});
map.addControl(opacityControl);
m_streets.setVisible(true);
```

<br>

OpenLayersは、既存ではレイヤコントロールがありません。基本的には自作するかプラグインを利用するのですが、透過機能とLeafletライクなUIのものが無かったので構築してみました :grinning:



他のマップライブラリのプラグインも公開していますので、Mapbox GL JSやLeafletに興味があるかたこちらへ！
[mapbox-gl-opacity](https://github.com/dayjournal/mapbox-gl-opacity)
[Leaflet.Control.Opacity](https://github.com/dayjournal/Leaflet.Control.Opacity)

<br>

OpenLayersについて、他にも記事を書いています。よろしければぜひ。
[tags - OpenLayers](https://memo.dayjournal.dev/tags/openlayers)

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://memo.dayjournal.dev/images/etc/book.png" alt="book"></a>