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

Add rendering test for vector tile layer rotation w/ layer on top

Browse Source
This commit is contained in:
Florent gravin
2018-11-15 16:41:06 +01:00
parent 7630fafcf2
commit f9c64e52af
9 changed files with 78 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
rendering/cases/layer-tile-2layers-extentclip/main.js
View File

@@ -1,19 +1,12 @@
import Map from '../../../src/ol/CompositeMap.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import {fromLonLat} from "../../../src/ol/proj";
import XYZ from "../../../src/ol/source/XYZ";
import {getSize} from "../../../src/ol/extent";
import {fromLonLat} from '../../../src/ol/proj';
import XYZ from '../../../src/ol/source/XYZ';
import {getSize} from '../../../src/ol/extent';
const center = fromLonLat([8.6, 50.1]);
function centerExtent() {
const c = map.getView().calculateExtent([256, 256]);
const qw = getSize(c)[0] / 4;
const qh = getSize(c)[1] / 4;
return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh];
}
const map = new Map({
target: 'map',
view: new View({
@@ -43,3 +36,12 @@ map.addLayer(
);
render();
function centerExtent() {
const c = map.getView().calculateExtent([256, 256]);
const qw = getSize(c)[0] / 4;
const qh = getSize(c)[1] / 4;
return [c[0] + qw, c[1] + qh, c[2] - qw, c[3] - qh];
}

4
rendering/cases/layer-tile-simple/main.js
View File

@@ -1,8 +1,8 @@
import Map from '../../../src/ol/CompositeMap.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import {fromLonLat} from "../../../src/ol/proj";
import XYZ from "../../../src/ol/source/XYZ";
import {fromLonLat} from '../../../src/ol/proj';
import XYZ from '../../../src/ol/source/XYZ';
const center = fromLonLat([8.6, 50.1]);

4
rendering/cases/layer-tile-transition/main.js
View File

@@ -1,8 +1,8 @@
import Map from '../../../src/ol/CompositeMap.js';
import View from '../../../src/ol/View.js';
import TileLayer from '../../../src/ol/layer/Tile.js';
import {fromLonLat} from "../../../src/ol/proj";
import XYZ from "../../../src/ol/source/XYZ";
import {fromLonLat} from '../../../src/ol/proj';
import XYZ from '../../../src/ol/source/XYZ';
const center = fromLonLat([8.6, 50.1]);

BIN
rendering/cases/layer-vectortile-rotate-vector/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

53
rendering/cases/layer-vectortile-rotate-vector/main.js Normal file
View File

@@ -0,0 +1,53 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorTileSource from '../../../src/ol/source/VectorTile';
import MVT from '../../../src/ol/format/MVT';
import {createXYZ} from '../../../src/ol/tilegrid';
import VectorTileLayer from '../../../src/ol/layer/VectorTile';
import VectorSource from '../../../src/ol/source/Vector';
import Feature from '../../../src/ol/Feature';
import Point from '../../../src/ol/geom/Point';
import VectorLayer from '../../../src/ol/layer/Vector';
import Style from '../../../src/ol/style/Style';
import CircleStyle from '../../../src/ol/style/Circle';
import Fill from '../../../src/ol/style/Fill';
const vectorSource = new VectorSource({
features: [
new Feature(new Point([1825727.7316762917, 6143091.089223046]))
]
});
const layer = new VectorLayer({
zIndex: 1,
source: vectorSource,
style: new Style({
image: new CircleStyle({
radius: 10,
fill: new Fill({
color: 'red'
})
})
})
});
new Map({
layers: [
layer,
new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
tileGrid: createXYZ(),
url: '/data/tiles/mvt/{z}-{x}-{y}.vector.pbf',
transition: 0
})
})
],
target: 'map',
view: new View({
center: [1825927.7316762917, 6143091.089223046],
zoom: 14,
rotation: Math.PI / 4
})
});
render({message: 'Vector tile layer rotates with vector layer on top'});

BIN
rendering/cases/layer-vectortile-rotate/expected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

10
rendering/cases/layer-vectortile-rotate/main.js
View File

@@ -1,9 +1,9 @@
import Map from '../../../src/ol/Map.js';
import View from '../../../src/ol/View.js';
import VectorTileSource from "../../../src/ol/source/VectorTile";
import MVT from "../../../src/ol/format/MVT";
import {createXYZ} from "../../../src/ol/tilegrid";
import VectorTileLayer from "../../../src/ol/layer/VectorTile";
import VectorTileSource from '../../../src/ol/source/VectorTile';
import MVT from '../../../src/ol/format/MVT';
import {createXYZ} from '../../../src/ol/tilegrid';
import VectorTileLayer from '../../../src/ol/layer/VectorTile';
const map = new Map({
layers: [
@@ -23,5 +23,5 @@ const map = new Map({
})
});
map.getView().setRotation( Math.PI / 4);
map.getView().setRotation(Math.PI / 4);
render({message: 'Vector tile layer rotates'});

8
rendering/cases/layer-vectortile-simple/main.js
View File

@@ -1,9 +1,9 @@
import Map from '../../../src/ol/CompositeMap.js';
import View from '../../../src/ol/View.js';
import VectorTileSource from "../../../src/ol/source/VectorTile";
import MVT from "../../../src/ol/format/MVT";
import {createXYZ} from "../../../src/ol/tilegrid";
import VectorTileLayer from "../../../src/ol/layer/VectorTile";
import VectorTileSource from '../../../src/ol/source/VectorTile';
import MVT from '../../../src/ol/format/MVT';
import {createXYZ} from '../../../src/ol/tilegrid';
import VectorTileLayer from '../../../src/ol/layer/VectorTile';
new Map({
layers: [