You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
proj4.defs("EPSG:3575", "+proj=laea +lat_0=90 +lon_0=10 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");
|
|
|
|
var halfWidth = Math.sqrt(2) * 6371007.2;
|
|
var extent = [-halfWidth, -halfWidth, halfWidth, halfWidth];
|
|
ol.proj.get("EPSG:3575").setExtent(extent);
|
|
|
|
var tile_size = 512;
|
|
var max_zoom = 16;
|
|
var resolutions = Array.from(new Array(max_zoom), (x,i) => (halfWidth/(tile_size*Math.pow(2,i-1))));
|
|
|
|
var layers = [];
|
|
|
|
densityColours = ["#FFFF00", "#FFCC00", "#FF9900", "#FF6600", "#FF3300", "#FF0000"];
|
|
|
|
function createDensityStyle2() {
|
|
var point = new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({color: '#FF0000'}),
|
|
radius: 1
|
|
}),
|
|
fill: new ol.style.Fill({color: '#FF0000'})
|
|
});
|
|
|
|
var styles = [];
|
|
return function(feature, resolution) {
|
|
var length = 0;
|
|
//console.log(feature);
|
|
var magnitude = Math.trunc(Math.min(5, Math.floor(Math.log(feature.get('total'))))) - 1;
|
|
//console.log("Colour ", magnitude, densityColours[magnitude]);
|
|
//styles[length++] = point;
|
|
styles[length++] = new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({color: densityColours[magnitude]}),
|
|
radius: 1
|
|
}),
|
|
fill: new ol.style.Fill({color: densityColours[magnitude]})
|
|
});
|
|
styles.length = length;
|
|
return styles;
|
|
};
|
|
}
|
|
|
|
var tile_grid = new ol.tilegrid.TileGrid({
|
|
extent: ol.proj.get('EPSG:3575').getExtent(),
|
|
origin: [-halfWidth,halfWidth],
|
|
minZoom: 0,
|
|
maxZoom: max_zoom,
|
|
resolutions: resolutions,
|
|
tileSize: tile_size,
|
|
});
|
|
|
|
layers['EPSG:3575'] = new ol.layer.VectorTile({
|
|
title: 'EPSG:3575 (Default size)',
|
|
type: 'base',
|
|
source: new ol.source.VectorTile({
|
|
projection: 'EPSG:3575',
|
|
format: new ol.format.MVT(),
|
|
tileGrid: tile_grid,
|
|
tilePixelRatio: 8,
|
|
url: '/tiles/{z}_{x}_{y}.pbf',
|
|
wrapX: false
|
|
}),
|
|
style: createStyle(),
|
|
});
|
|
|
|
layers['Grid'] = new ol.layer.Tile({
|
|
title: 'Tile grid',
|
|
type: 'Grid',
|
|
extent: ol.proj.get('EPSG:3575').getExtent(),
|
|
source: new ol.source.TileDebug({
|
|
projection: 'EPSG:3575',
|
|
tileGrid: tile_grid,
|
|
wrapX: false
|
|
}),
|
|
});
|
|
|
|
// Show the tiles are 1:1 scale; cover 4096 screen pixels with the 4096px vector tiles.
|
|
var overzoom_tile_size = 4096;
|
|
var overzoom_resolutions = Array.from(new Array(max_zoom-3), (x,i) => (halfWidth/(overzoom_tile_size*Math.pow(2,i-1))));
|
|
var overzoom_tile_grid = new ol.tilegrid.TileGrid({
|
|
extent: ol.proj.get('EPSG:3575').getExtent(),
|
|
origin: [-halfWidth,halfWidth],
|
|
minZoom: 0,
|
|
maxZoom: max_zoom,
|
|
resolutions: overzoom_resolutions,
|
|
tileSize: overzoom_tile_size,
|
|
});
|
|
layers['OZ_EPSG:3575'] = new ol.layer.VectorTile({
|
|
title: 'Real size',
|
|
type: 'base',
|
|
source: new ol.source.VectorTile({
|
|
projection: 'EPSG:3575',
|
|
format: new ol.format.MVT(),
|
|
tileGrid: overzoom_tile_grid,
|
|
tilePixelRatio: 1,
|
|
url: '/tiles/{z}_{x}_{y}.pbf',
|
|
wrapX: false
|
|
}),
|
|
style: createStyle(),
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [
|
|
layers['Grid'],
|
|
new ol.layer.Group({
|
|
title: 'Tiles',
|
|
layers: [
|
|
layers['OZ_EPSG:3575'],
|
|
layers['EPSG:3575'],
|
|
]
|
|
})
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [0, 0],
|
|
projection: 'EPSG:3575',
|
|
zoom: 2
|
|
}),
|
|
});
|
|
|
|
var layerSwitcher = new ol.control.LayerSwitcher();
|
|
map.addControl(layerSwitcher);
|