ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9512 from fredj/mapbox-layer-example

Browse Source 
Mapbox layer example improvement
This commit is contained in:
Frédéric Junod
2019-05-10 14:18:00 +02:00
committed by GitHub
parent e4941f60db d1fe22a872
commit d49a41def0
2 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/mapbox-layer.html
+1 -1
View File
@@ -6,7 +6,7 @@ docs: >
Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired. Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
tags: "simple, mapbox, vector, tiles" tags: "simple, mapbox, vector, tiles"
resources: resources:
- https://unpkg.com/mapbox-gl@0.51.0/dist/mapbox-gl.js - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
cloak: cloak:
- key: ER67WIiPdCQvhgsUjoWK - key: ER67WIiPdCQvhgsUjoWK
value: Your Mapbox access token from http://mapbox.com/ here value: Your Mapbox access token from http://mapbox.com/ here
examples/mapbox-layer.js
+12 -17
View File
@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js'; import View from '../src/ol/View.js';
import Layer from '../src/ol/layer/Layer'; import Layer from '../src/ol/layer/Layer';
import {assign} from '../src/ol/obj'; import {assign} from '../src/ol/obj';
import {getTransform} from '../src/ol/proj'; import {toLonLat} from '../src/ol/proj';
import SourceState from '../src/ol/source/State'; import SourceState from '../src/ol/source/State';
import {Stroke, Style} from '../src/ol/style.js'; import {Stroke, Style} from '../src/ol/style.js';
import VectorLayer from '../src/ol/layer/Vector.js'; import VectorLayer from '../src/ol/layer/Vector.js';
@@ -12,7 +12,7 @@ import GeoJSON from '../src/ol/format/GeoJSON.js';
class Mapbox extends Layer { class Mapbox extends Layer {
/** /**
* @param {import('./Base.js').Options} options Layer options. * @param {import('../src/ol/layer/Layer').Options} options Layer options.
*/ */
constructor(options) { constructor(options) {
const baseOptions = assign({}, options); const baseOptions = assign({}, options);
@@ -32,8 +32,7 @@ class Mapbox extends Layer {
initMap() { initMap() {
const map = this.map_; const map = this.map_;
const view = map.getView(); const view = map.getView();
const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326'); const center = toLonLat(view.getCenter(), view.getProjection());
const center = transformToLatLng(view.getCenter());
this.centerLastRender = view.getCenter(); this.centerLastRender = view.getCenter();
this.zoomLastRender = view.getZoom(); this.zoomLastRender = view.getZoom();
@@ -61,9 +60,7 @@ class Mapbox extends Layer {
this.mbmap.getCanvas().remove(); this.mbmap.getCanvas().remove();
this.loaded = true; this.loaded = true;
this.map_.render(); this.map_.render();
[ this.mbmap.getContainer().querySelector('.mapboxgl-control-container').remove();
'mapboxgl-control-container'
].forEach(className => document.getElementsByClassName(className)[0].remove());
}.bind(this)); }.bind(this));
this.mbmap.on('render', function() { this.mbmap.on('render', function() {
@@ -74,7 +71,7 @@ class Mapbox extends Layer {
if (this.zoomNextRender) { if (this.zoomNextRender) {
this.zoomLastRender = this.zoomNextRender; this.zoomLastRender = this.zoomNextRender;
} }
this.updateRenderedPosition([0, 0], 1); this.updateRenderedPosition(0, 0, 1);
}.bind(this)); }.bind(this));
} }
@@ -86,15 +83,13 @@ class Mapbox extends Layer {
render(frameState) { render(frameState) {
const map = this.map_; const map = this.map_;
const view = map.getView(); const view = map.getView();
const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326');
this.centerNextRender = view.getCenter(); this.centerNextRender = view.getCenter();
const lastRender = map.getPixelFromCoordinate(this.centerLastRender); const lastRender = map.getPixelFromCoordinate(this.centerLastRender);
const nextRender = map.getPixelFromCoordinate(this.centerNextRender); const nextRender = map.getPixelFromCoordinate(this.centerNextRender);
const centerOffset = [lastRender[0] - nextRender[0], lastRender[1] - nextRender[1]];
this.zoomNextRender = view.getZoom(); this.zoomNextRender = view.getZoom();
const zoomOffset = Math.pow(2, this.zoomNextRender - this.zoomLastRender); const scale = Math.pow(2, this.zoomNextRender - this.zoomLastRender);
this.updateRenderedPosition(centerOffset, zoomOffset); this.updateRenderedPosition(lastRender[0] - nextRender[0], lastRender[1] - nextRender[1], scale);
const rotation = frameState.viewState.rotation; const rotation = frameState.viewState.rotation;
if (rotation) { if (rotation) {
@@ -104,7 +99,7 @@ class Mapbox extends Layer {
} }
// Re-render mbmap // Re-render mbmap
const center = transformToLatLng(this.centerNextRender); const center = toLonLat(this.centerNextRender, view.getProjection());
const zoom = view.getZoom() - 1; const zoom = view.getZoom() - 1;
this.mbmap.jumpTo({ this.mbmap.jumpTo({
center: center, center: center,
@@ -113,11 +108,11 @@ class Mapbox extends Layer {
return this.mbmap.getCanvas(); return this.mbmap.getCanvas();
} }
updateRenderedPosition(centerOffset, zoomOffset) { updateRenderedPosition(left, top, scale) {
const style = this.mbmap.getCanvas().style; const style = this.mbmap.getCanvas().style;
style.left = Math.round(centerOffset[0]) + 'px'; style.left = Math.round(left) + 'px';
style.top = Math.round(centerOffset[1]) + 'px'; style.top = Math.round(top) + 'px';
style.transform = 'scale(' + zoomOffset + ')'; style.transform = 'scale(' + scale + ')';
} }
setVisible(visible) { setVisible(visible) {