Skip to content

dayjournal/ol-opacity

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
2 branches 1 tag
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
dist
 
 
docs
 
 
img
 
 
src
 
 
.gitignore
 
 
.prettierrc
 
 
LICENSE
 
 
README.md
 
 
package.json
 
 
ol-opacity Usage Demo Option Example - npm License Japanese ol-opacity 使用方法 デモ オプション 例 - npm ライセンス

README.md

ol-opacity

ol-opacity is a OpenLayers plugin that makes multiple tile layers transparent.
OpenLayers Plugins
npm


Browser Support

  • Chrome
  • Firefox
  • Safari

Usage

ol-opacity


Demo

demo


Option

// OpacityControl Option

// Baselayers settings
baseLayers: new LayerGroup({
    title: 'BaseLayer',
    id: 'baseLayer',
    layers: [
        m_streets,
        m_gray
    ]
})

// Overlayers settings
overLayers: new LayerGroup({
    title: 'OverLayer',
    id: 'overLayer',
    layers: [
        o_std,
        t_pale,
        t_ort
    ]
})

// Transparent slide bar settings (true or false)
opacityControl: true

Example - npm

Start OpenLayers easily. [OpenLayers, webpack]
openlayers-starter

Install package

npm install ol-opacity

main.js

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

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

script.js

// 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);

License

MIT

Copyright (c) 2020-2021 Yasunori Kirimoto



Japanese


ol-opacity

ol-opacityは、複数のタイルレイヤーを透過するOpenLayersのプラグインです。
OpenLayers Plugins
npm


対応ブラウザ

  • Chrome
  • Firefox
  • Safari

使用方法

ol-opacity


デモ

デモ


オプション

// OpacityControlのオプション

// 背景レイヤ設定
baseLayers: new LayerGroup({
    title: 'BaseLayer',
    id: 'baseLayer',
    layers: [
        m_streets,
        m_gray
    ]
})

// オーバーレイヤ設定
overLayers: new LayerGroup({
    title: 'OverLayer',
    id: 'overLayer',
    layers: [
        o_std,
        t_pale,
        t_ort
    ]
})

// 透過度スライドバー表示/非表示設定 (trueまたはfalse)
opacityControl: true

例 - npm

OpenLayersを手軽に始める [OpenLayers, webpack]
openlayers-starter

パッケージインストール

npm install ol-opacity

main.js

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

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

script.js

// 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);

ライセンス

MIT

Copyright (c) 2020-2021 Yasunori Kirimoto

About

Make multiple tile layers transparent.

dayjournal.github.io/ol-opacity

Resources

Readme

License

MIT license
Activity

Stars

3 stars

Watchers

3 watching

Forks

0 forks
Report repository

Releases 1

v1.0.0 Latest
Jan 7, 2021

Packages

No packages published

Languages