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.
81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
proj4.defs('EPSG:4326', "+proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");
|
|
|
|
var resolutions = [];
|
|
var extent = 180.0;
|
|
var tile_size = 512;
|
|
var resolutions = Array(17).fill().map((_, i) => ( extent / tile_size / Math.pow(2, i) ));
|
|
|
|
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 tileGrid = new ol.tilegrid.TileGrid({
|
|
extent: ol.proj.get('EPSG:4326').getExtent(),
|
|
minZoom: 0,
|
|
maxZoom: 16,
|
|
resolutions: resolutions,
|
|
tileSize: 512,
|
|
});
|
|
|
|
layers['EPSG:4326'] = new ol.layer.VectorTile({
|
|
source: new ol.source.VectorTile({
|
|
projection: 'EPSG:4326',
|
|
format: new ol.format.MVT(),
|
|
tileGrid: tileGrid,
|
|
tilePixelRatio: 8,
|
|
url: '/tiles/{z}_{x}_{y}.pbf',
|
|
wrapX: false
|
|
}),
|
|
style: createStyle(),
|
|
});
|
|
|
|
layers['Grid'] = new ol.layer.Tile({
|
|
extent: ol.proj.get('EPSG:4326').getExtent(),
|
|
source: new ol.source.TileDebug({
|
|
projection: 'EPSG:4326',
|
|
tileGrid: tileGrid,
|
|
wrapX: false
|
|
}),
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [
|
|
layers['EPSG:4326'],
|
|
layers['Grid']
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [10.7522, 59.9139],
|
|
projection: 'EPSG:4326',
|
|
zoom: 10
|
|
}),
|
|
});
|