59 lines
2.0 KiB
JavaScript
59 lines
2.0 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import MVT from '../src/ol/format/MVT.js';
|
|
import VectorTileLayer from '../src/ol/layer/VectorTile.js';
|
|
import VectorTileSource from '../src/ol/source/VectorTile.js';
|
|
import TileGrid from '../src/ol/tilegrid/TileGrid.js';
|
|
|
|
import {applyStyle, applyBackground} from 'ol-mapbox-style';
|
|
|
|
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
|
|
|
|
const tileGridOptions = {
|
|
extent: [-180, -90, 180, 90],
|
|
sizes: [[2, 1], [4, 2], [8, 4], [16, 8], [32, 16], [64, 32], [128, 64], [256, 128], [512, 256], [1024, 512], [2048, 1024], [4096, 2048], [8192, 4096], [16384, 8192]],
|
|
tileSize: 512,
|
|
resolutions: [0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 8.58306884765625e-05, 4.291534423828125e-05]
|
|
};
|
|
|
|
const map = new Map({
|
|
target: 'map',
|
|
view: new View({
|
|
projection: 'EPSG:4326',
|
|
center: [0, 35],
|
|
zoom: 1
|
|
})
|
|
});
|
|
|
|
fetch('https://api.maptiler.com/maps/basic-4326/style.json?key=' + key)
|
|
.then(function(res) {
|
|
return res.json();
|
|
})
|
|
.then(function(style) {
|
|
Object.keys(style.sources).forEach(function(sourceId) {
|
|
const source = style.sources[sourceId];
|
|
if (source && source.url && source.type == 'vector') {
|
|
fetch(source.url)
|
|
.then(function(res) {
|
|
return res.json();
|
|
})
|
|
.then(function(tilejson) {
|
|
const layer = new VectorTileLayer({
|
|
declutter: true,
|
|
source: new VectorTileSource({
|
|
attribution: tilejson.attribution,
|
|
format: new MVT(),
|
|
projection: 'EPSG:4326',
|
|
tileGrid: new TileGrid(tileGridOptions),
|
|
urls: tilejson.tiles
|
|
})
|
|
});
|
|
map.addLayer(layer);
|
|
|
|
applyStyle(layer, style, sourceId, undefined, tileGridOptions.resolutions);
|
|
});
|
|
}
|
|
});
|
|
applyBackground(map, style);
|
|
});
|