From db583be0f9691dfd59e4e8db6e6e393a15880a0d Mon Sep 17 00:00:00 2001 From: Petr Sloup Date: Thu, 3 Oct 2019 12:34:42 +0200 Subject: [PATCH 1/2] Add example showing vector tiles in EPSG:4326 --- examples/vector-tiles-4326.html | 13 ++++++++ examples/vector-tiles-4326.js | 58 +++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 examples/vector-tiles-4326.html create mode 100644 examples/vector-tiles-4326.js diff --git a/examples/vector-tiles-4326.html b/examples/vector-tiles-4326.html new file mode 100644 index 0000000000..fb93133566 --- /dev/null +++ b/examples/vector-tiles-4326.html @@ -0,0 +1,13 @@ +--- +layout: example.html +title: Vector tiles in EPSG:4326 +shortdesc: Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style) +docs: > + Example showing vector tiles in EPSG:4326 (styled using `ol-mapbox-style`) loaded from maptiler.com. + **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired. +tags: "vector tiles, epsg4326, mapbox style, ol-mapbox-style, maptiler" +cloak: + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ +--- +
diff --git a/examples/vector-tiles-4326.js b/examples/vector-tiles-4326.js new file mode 100644 index 0000000000..25ed1a7146 --- /dev/null +++ b/examples/vector-tiles-4326.js @@ -0,0 +1,58 @@ +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); + }); From fb9673465a84849574cee87ed85815d062675fa0 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Fri, 4 Oct 2019 14:07:13 +0200 Subject: [PATCH 2/2] Simpler way to use EPSG:4326 as projection --- examples/vector-tiles-4326.js | 86 ++++++++++++++++------------------- 1 file changed, 39 insertions(+), 47 deletions(-) diff --git a/examples/vector-tiles-4326.js b/examples/vector-tiles-4326.js index 25ed1a7146..f24cda8d31 100644 --- a/examples/vector-tiles-4326.js +++ b/examples/vector-tiles-4326.js @@ -1,58 +1,50 @@ -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'; +import olms from 'ol-mapbox-style'; +import {defaultResolutions} from 'ol-mapbox-style/util.js'; 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] -}; +// Match the server resolutions +const maxResolution = 360 / 512; +defaultResolutions.length = 14; +for (let i = 0; i < 14; ++i) { + defaultResolutions[i] = maxResolution / Math.pow(2, i + 1); +} -const map = new Map({ - target: 'map', - view: new View({ - projection: 'EPSG:4326', - center: [0, 35], - zoom: 1 - }) -}); +olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) { -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); + // Custom tile grid for the EPSG:4326 projection + const tileGrid = new TileGrid({ + extent: [-180, -90, 180, 90], + tileSize: 512, + resolutions: defaultResolutions }); + + const mapboxStyle = map.get('mapbox-style'); + + // Replace the source with a EPSG:4326 projection source for each vector tile layer + map.getLayers().forEach(function(layer) { + const mapboxSource = layer.get('mapbox-source'); + if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') { + const source = layer.getSource(); + layer.setSource(new VectorTileSource({ + format: new MVT(), + projection: 'EPSG:4326', + urls: source.getUrls(), + tileGrid: tileGrid + })); + } + }); + + // Configure the map with a view with EPSG:4326 projection + map.setView(new View({ + projection: 'EPSG:4326', + zoom: mapboxStyle.zoom, + center: mapboxStyle.center + })); + +});