Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 72ad25cd authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

fix report

parent 492f3714
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 200 deletions
reports/static/reports/js/minimap.js
View file @ 72ad25cd
......@@ -5,51 +5,51 @@ FIRST_IMAGE_LAYER_INDEX = 2;
// create wkt polygon
const wktFormat = new ol.format.WKT();
const polygonFeature = wktFormat.readFeature(polygon, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
// Create layers
const light = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
})
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
})
});
const streets = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
name: 'mapbox',
source: new ol.source.XYZ({
url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
const night = new ol.layer.Tile({
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-night-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
})
name: 'mapbox',
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-night-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
})
});
const polygonLayer = new ol.layer.Vector({
name: 'polygon',
source: new ol.source.Vector({
features: [polygonFeature]
})
name: 'polygon',
source: new ol.source.Vector({
features: [polygonFeature]
})
});
const layers = new Map();
// create map
const map = new ol.Map({
target: 'minimap',
layers: [light, polygonLayer],
view: new ol.View({
center: ol.proj.fromLonLat([-99.19, 19.61]),
zoom: 4,
minZoom:4
})
target: 'minimap',
layers: [light, polygonLayer],
view: new ol.View({
center: ol.proj.fromLonLat([-99.19, 19.61]),
zoom: 4,
minZoom: 4
})
});
// fit (zoom) to polygon
......@@ -58,76 +58,78 @@ map.getView().fit(polygonFeature.getGeometry());
// show first layer date
let currentDate = labels[0];
addImageLayer({
layerDate: currentDate
layerDate: currentDate
});
// main function to change layers
// data = { layerDate: to change all layers by date }
// data = { layerName: to add single layer }
function addImageLayer(data) {
if (data.layerDate) {
currentDate = data.layerDate;
}
$.ajax({
type: 'POST',
dataType: "json",
data: {'purchase_id': purchase_id, 'report': zone, 'date': currentDate},
url: '/reports/tiles/tileinfo',
success: response => {
changeLayers(data.layerName);
setOpacity($('#opacitySlide').val());
map.getView().setMinZoom(response.zoom.min);
map.getView().setMaxZoom(response.zoom.max);
if (data.layerDate) {
currentDate = data.layerDate;
}
});
$.ajax({
type: 'POST',
dataType: "json",
data: {'purchase_id': purchase_id, 'report': zone, 'date': currentDate},
url: '/reports/tiles/tileinfo',
success: response => {
changeLayers(data.layerName);
setOpacity($('#opacitySlide').val());
map.getView().setMinZoom(response.zoom.min);
map.getView().setMaxZoom(response.zoom.max);
}
});
}
// remove old layers and add layers with new date
function changeLayers(especific_layerName) {
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
removeLayer(especific_layerName);
layersToChance.forEach(layerName => {
const xyz = new ol.layer.Tile({
name: layerName,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layerName+'/'+currentDate+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2
})
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
removeLayer(especific_layerName);
layersToChance.forEach(layerName => {
const xyz = new ol.layer.Tile({
name: layerName,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/' + purchase_id + '/' + zone + '/' + layerName + '/' + currentDate + '/{z}/{x}/{-y}.png',
tilePixelRatio: 2
})
});
if (layerName === 'TCI') {
map.getLayers().insertAt(FIRST_IMAGE_LAYER_INDEX, xyz);
} else {
map.addLayer(xyz);
}
layers.set(layerName, xyz);
});
if (layerName === 'TCI') {
map.getLayers().insertAt(FIRST_IMAGE_LAYER_INDEX, xyz);
} else {
map.addLayer(xyz);
}
layers.set(layerName, xyz);
});
}
// remove all if there isn't layername
function removeLayer(layerName) {
if (!layerName) {
layers.forEach(layer => { map.removeLayer(layer); });
layers.clear();
return;
}
map.removeLayer(layers.get(layerName));
layers.delete(layerName);
if (!layerName) {
layers.forEach(layer => {
map.removeLayer(layer);
});
layers.clear();
return;
}
map.removeLayer(layers.get(layerName));
layers.delete(layerName);
}
// set opacity to layers
function setOpacity(value) {
layers.forEach(layer => {
if(layer.get('name') != 'TCI') {
layer.setOpacity(value)
}
})
layers.forEach(layer => {
if (layer.get('name') != 'TCI') {
layer.setOpacity(value)
}
})
}
......@@ -136,16 +138,16 @@ function setOpacity(value) {
//vigila cuando se cierra el menu de comparar y cuando se cierra desactiva la comparacion (si la clase de compare incluye menu-open está abierto)
var compareMenu = document.getElementById('compare');
var observer = new MutationObserver( function(mutations) {
mutations.forEach( function(mutation) {
if (mutation.attributeName == 'class') {
if(compareMenu.className.indexOf("open")===-1) { //se cerró el menu de comparacion
exitCompare();
}
}
});
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName == 'class') {
if (compareMenu.className.indexOf("open") === -1) { //se cerró el menu de comparacion
exitCompare();
}
}
});
});
observer.observe(compareMenu, { attributes : true, attributeOldValue: true, attributeFilter : ['class'], subtree: true});
observer.observe(compareMenu, {attributes: true, attributeOldValue: true, attributeFilter: ['class'], subtree: true});
//crea el control swipe, que sirve para comparar
var ctrl = new ol.control.Swipe();
......@@ -153,119 +155,124 @@ var ctrl = new ol.control.Swipe();
//funcion que inicia la comparacion
//recibe la lista de fechas y por default compara la primera y la ultima
function compare(labels) {
var swipeControl = false;
var swipeControl = false;
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega
if (control instanceof ol.control.Swipe) { //si ya tiene el control agregado
swipeControl = true;
}
});
if (swipeControl == true) { //si ya tiene el comparador no hace nada, ya esta en modo comparacion
//map.removeControl(swipeControlObj);
} else { //si no tiene el comparador lo agrega
//removeImageLayers();
map.addControl(ctrl);
ctrl.set('position', 0.5);
//console.log(map.controls)
var labelDateLeft = labels[0] //por default compara la primera y ultima fecha
var labelDateRight = labels[labels.length - 1]
//pone las fechas por default en los selectores de fechas
//document.getElementById("selectLeftCompare").value = labelDateLeft;
//document.getElementById("selectRightCompare").value = labelDateRight;
//agrega las capas izquierda/derecha
selectLeft(labelDateLeft);
selectRight(labelDateRight);
//muestra los selectores de fechas y oculta la linea de tiempo
document.getElementById("selectLeft").style.display = "block";
document.getElementById("selectRight").style.display = "block";
document.getElementById("timeLine").style.display = "none";
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega
if(control instanceof ol.control.Swipe){ //si ya tiene el control agregado
swipeControl =true;
}
});
if(swipeControl==true) { //si ya tiene el comparador no hace nada, ya esta en modo comparacion
//map.removeControl(swipeControlObj);
} else { //si no tiene el comparador lo agrega
//removeImageLayers();
map.addControl(ctrl);
ctrl.set('position', 0.5);
//console.log(map.controls)
var labelDateLeft = labels[0] //por default compara la primera y ultima fecha
var labelDateRight = labels[labels.length-1]
//pone las fechas por default en los selectores de fechas
document.getElementById("selectLeftCompare").value = labelDateLeft;
document.getElementById("selectRightCompare").value = labelDateRight;
//agrega las capas izquierda/derecha
selectLeft(labelDateLeft);
selectRight(labelDateRight);
//muestra los selectores de fechas y oculta la linea de tiempo
document.getElementById("selectLeft").style.display = "block";
document.getElementById("selectRight").style.display = "block";
document.getElementById("timeLine").style.display = "none";
}
}
//sale del modo comparacion
function exitCompare() {
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe)
if(control instanceof ol.control.Swipe){ //ya tiene el control agregado lo quita
map.removeControl(control);
}
});
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe)
if (control instanceof ol.control.Swipe) { //ya tiene el control agregado lo quita
map.removeControl(control);
}
});
//quita las capas de comparacion izquierda/derecha
var imageLayers = map.getLayers().getArray().slice();
imageLayers.forEach(layer => {
if(layer.get('name') === 'left' || layer.get('name') === 'right') {
map.removeLayer(layer)
}
})
//quita las capas de comparacion izquierda/derecha
var imageLayers = map.getLayers().getArray().slice();
imageLayers.forEach(layer => {
if (layer.get('name') === 'left' || layer.get('name') === 'right') {
map.removeLayer(layer)
}
})
//oculta los selectores de fechas y muestra la linea de tiempo
document.getElementById("selectLeft").style.display = "none";
document.getElementById("selectRight").style.display = "none";
document.getElementById("timeLine").style.display = "block";
//oculta los selectores de fechas y muestra la linea de tiempo
document.getElementById("selectLeft").style.display = "none";
document.getElementById("selectRight").style.display = "none";
document.getElementById("timeLine").style.display = "block";
}
//selecciona el lado izquierdo para comparar
function selectLeft(date) {
var labelDateLeft = date;
var layer_type = 'TCI';
const left = new ol.layer.Tile({
name: 'left',
opacity: 1,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateLeft+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 10,
maxZoom: 15
})
});
map.addLayer(left);
ctrl.addLayer(left);
var labelDateLeft = date;
var layer_type = 'TCI';
const left = new ol.layer.Tile({
name: 'left',
opacity: 1,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/' + purchase_id + '/' + zone + '/' + layer_type + '/' + labelDateLeft + '/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 10,
maxZoom: 15
})
});
map.addLayer(left);
ctrl.addLayer(left);
}
//selecciona el lado derecho para comparar
function selectRight(date){
console.log("---------");
console.log(date)
console.log("---------");
function selectRight(date) {
console.log("---------");
console.log(date)
console.log("---------");
var labelDateRight = date;
var layer_type = 'TCI';
const right = new ol.layer.Tile({
name: 'right',
opacity: 1,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateRight+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 10,
maxZoom: 15
})
name: 'right',
opacity: 1,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/' + purchase_id + '/' + zone + '/' + layer_type + '/' + labelDateRight + '/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 10,
maxZoom: 15
})
});
map.addLayer(right);
ctrl.addLayer(right, true);
}
//selecciona comparacion vertical u horizontal
function setCompareDirection(direction){
ctrl.set('orientation',direction)
//mueve los selectores de fechas
if(direction === 'horizontal'){
document.getElementById("selectLeft").style.bottom = "70%";
document.getElementById("selectLeft").style.left = "15%";
document.getElementById("selectRight").style.left = "15%";
}
else{
document.getElementById("selectLeft").style.bottom = "50px";
document.getElementById("selectLeft").style.left = "30%";
document.getElementById("selectRight").style.left = "75%";
}
function setCompareDirection(direction) {
ctrl.set('orientation', direction)
//mueve los selectores de fechas
if (direction === 'horizontal') {
document.getElementById("selectLeft").style.bottom = "70%";
document.getElementById("selectLeft").style.left = "15%";
document.getElementById("selectRight").style.left = "15%";
}
else {
document.getElementById("selectLeft").style.bottom = "50px";
document.getElementById("selectLeft").style.left = "30%";
document.getElementById("selectRight").style.left = "75%";
}
}
// Fin funciones de comparacion
//******************************
......@@ -273,36 +280,36 @@ function setCompareDirection(direction){
let currentMap = light;
function changeMap(selectedMap) {
map.getLayers().getArray().forEach(function (layer) {
if (layer.values_.name == "mapbox") {
map.removeLayer(layer)
map.getLayers().getArray().forEach(function (layer) {
if (layer.values_.name == "mapbox") {
map.removeLayer(layer)
}
})
$('#' + selectedMap).prop('checked', true);
switch (selectedMap) {
case 'light':
map.getLayers().insertAt(0, light);
currentMap = light;
break;
case 'streets':
map.getLayers().insertAt(0, streets);
currentMap = streets;
break;
case 'night':
map.getLayers().insertAt(0, night);
currentMap = night;
break;
}
})
$('#' + selectedMap).prop('checked', true);
switch (selectedMap) {
case 'light':
map.getLayers().insertAt(0, light);
currentMap = light;
break;
case 'streets':
map.getLayers().insertAt(0, streets);
currentMap = streets;
break;
case 'night':
map.getLayers().insertAt(0, night);
currentMap = night;
break;
}
}
function showControlMap(){
if ($('#showControlMap').is(':visible')) {
$("#showControlMap").hide();
$("#hideControlMap").show();
$(".mapControl").show();
} else {
$("#showControlMap").show();
$("#hideControlMap").hide();
$(".mapControl").hide();
}
function showControlMap() {
if ($('#showControlMap').is(':visible')) {
$("#showControlMap").hide();
$("#hideControlMap").show();
$(".mapControl").show();
} else {
$("#showControlMap").show();
$("#hideControlMap").hide();
$(".mapControl").hide();
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment