display tile on minimap

parent c5e5f4b8
// set defaults // set defaults http://localhost:8000/reports/tiles/2z68/T14QMG/20190127/10/230/569.png
EMPTY_TILE_URL = 'http://www.maptiler.org/img/none.png';
MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var mapExtent = [-99.19365897401688, 19.61416852699256, -98.91574534130153, 19.90428912567150];
var defaultExtent = ol.proj.transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857');
// Create layers // Create layers
var imagelayer;
var mapbox = new ol.layer.Tile({ var mapbox = new ol.layer.Tile({
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
}) })
}); });
var xyz = new ol.layer.Tile({
opacity: 0.6,
extent: defaultExtent,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/static/reports/test/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 7,
maxZoom: 14
})
});
// create map // create map
var map = new ol.Map({ var map = new ol.Map({
target: 'minimap', target: 'minimap',
layers: [mapbox, xyz], layers: [mapbox],
view: new ol.View({ view: new ol.View({
center: ol.proj.fromLonLat([-99.19, 19.61]), center: ol.proj.fromLonLat([-99.19, 19.61]),
zoom: 10 zoom: 4,
minZoom:4,
maxZoom: 14
}) })
}); });
//addLayer
function addImageLayer(labelDate) {
map.removeLayer(imagelayer)
var xyz = new ol.layer.Tile({
opacity: 0.5,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+labelDate+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 4,
maxZoom: 14
})
});
imagelayer = xyz;
map.addLayer(xyz);
$.ajax({
type: 'POST',
dataType: "json",
data: {'purchase_id': purchase_id, 'report': zone, 'date': labelDate},
url: '/reports/tiles/tileinfo',
success: function (data) {
var extent = ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857');
map.getView().fit(extent, {duration: 800})
},
error: function(data) {
console.error("request error: ", {'msg': 'tile info request failed'});
}
});
}
...@@ -32,6 +32,7 @@ document.getElementById("myChart").onclick = function (evt) { ...@@ -32,6 +32,7 @@ document.getElementById("myChart").onclick = function (evt) {
//console.log(firstPoint) //console.log(firstPoint)
//console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.) //console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
var label = myChart.data.labels[firstPoint._index]; var label = myChart.data.labels[firstPoint._index];
addImageLayer(label)
console.log("label: ") console.log("label: ")
console.log(label) console.log(label)
//console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.) //console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
......
...@@ -369,7 +369,6 @@ ...@@ -369,7 +369,6 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<!-- page script --> <!-- page script -->
<script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
<script> <script>
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
...@@ -417,6 +416,7 @@ ...@@ -417,6 +416,7 @@
let image_path = "{{IMAGE_PATH}}"; let image_path = "{{IMAGE_PATH}}";
let scl_path = "{{SCL_PATH}}"; let scl_path = "{{SCL_PATH}}";
let zone = "{{ zone }}" let zone = "{{ zone }}"
let purchase_id = "{{ purchaseID }}"
let platform = "{{ platform }}"; let platform = "{{ platform }}";
let productLevel = "{{ productLevel }}"; let productLevel = "{{ productLevel }}";
let startDate = "{{ startDate }}"; let startDate = "{{ startDate }}";
...@@ -438,4 +438,5 @@ ...@@ -438,4 +438,5 @@
</script> </script>
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
{% endblock %} {% endblock %}
...@@ -8,5 +8,7 @@ urlpatterns = [ ...@@ -8,5 +8,7 @@ urlpatterns = [
url(r'^(?P<purchase_id>(\d+))/(?P<report>[\w\-]+)$', views.report_L2ASCL, name='report'), url(r'^(?P<purchase_id>(\d+))/(?P<report>[\w\-]+)$', views.report_L2ASCL, name='report'),
url(r'^$', views.Reports, name='reports'), url(r'^$', views.Reports, name='reports'),
url(r'^ws/process_progress$', views.wsProcessProgress, name='wsProcessProgress'), url(r'^ws/process_progress$', views.wsProcessProgress, name='wsProcessProgress'),
url(r'^tiles/(?P<purchase_id>(\d+))/(?P<report>[\w\-]+)/(?P<date>[0-9]+)/(?P<z>[0-9]+)/(?P<x>[0-9]+)/(?P<y>[0-9]+).png$',
views.tiles, name='tile'),
url(r'^tiles/tileinfo$', views.tileinfo, name='tileinfo'),
] ]
...@@ -3,13 +3,16 @@ from __future__ import unicode_literals ...@@ -3,13 +3,16 @@ from __future__ import unicode_literals
import json import json
import os import os
import xml.etree.ElementTree as ET
# Create your views here. # Create your views here.
from collections import OrderedDict from collections import OrderedDict
from django.core.paginator import Paginator from django.core.paginator import Paginator
from django.http import HttpResponse, Http404 from django.http import HttpResponse, Http404, JsonResponse
from django.shortcuts import render, render_to_response from django.shortcuts import render, render_to_response
from django.views.decorators.csrf import csrf_exempt
from GeoInt_SIDT.tasks import add from GeoInt_SIDT.tasks import add
from catalog.models import Purchase from catalog.models import Purchase
from GeoInt_SIDT.tasks import * from GeoInt_SIDT.tasks import *
...@@ -108,7 +111,7 @@ def report_L2ASCL(request, report, purchase_id): ...@@ -108,7 +111,7 @@ def report_L2ASCL(request, report, purchase_id):
# graphData['options']['maintainAspectRatio']=False # graphData['options']['maintainAspectRatio']=False
# print(json.dumps(graphData).encode("utf-8")) # print(json.dumps(graphData).encode("utf-8"))
return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData),"name":"foo", "report_name": "SCL Image Classification Data(Km²)", "startDate": startDate,"endDate": endDate,"clouds": dataProduct['clouds'], "platform": dataProduct['platform'],"productLevel": dataProduct['productLevel'] ,"IMAGE_PATH": image_path, "SCL_PATH" : SCL_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset, "folders" : folders,"zone":reporteDir }) return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData),"name":"foo", "report_name": "SCL Image Classification Data(Km²)", "startDate": startDate,"endDate": endDate,"clouds": dataProduct['clouds'], "platform": dataProduct['platform'],"productLevel": dataProduct['productLevel'] ,"IMAGE_PATH": image_path, "SCL_PATH" : SCL_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset, "folders" : folders,"zone":reporteDir, "purchaseID": purchase_id })
# -------------------------------------------------------------------------------def Reports(request): # -------------------------------------------------------------------------------def Reports(request):
...@@ -259,6 +262,51 @@ def wsProcessProgress(request): ...@@ -259,6 +262,51 @@ def wsProcessProgress(request):
else: else:
raise Http404 raise Http404
# tiles
def tiles(request, purchase_id, report, date, z, x, y):
absolute_path = USERS_PATH + request.user.email + '/' + purchase_id + '/out'
tile_folder = '/' + report + '/tiles' + '/' + date + '_TCI_60m'
image = '/' + z + '/' + x + '/' + y + '.png'
image_path = absolute_path + tile_folder + image
if not os.path.exists(image_path):
# raise Http404
return HttpResponse(None, content_type="image/png")
image = open(image_path, "rb").read()
return HttpResponse(image, content_type="image/png")
# read a xml file with tiles info to display and return that info
@csrf_exempt
def tileinfo(request):
if request.is_ajax():
req = dict(request.POST)
absolute_path = USERS_PATH + request.user.email + '/' + req['purchase_id'][0] + '/out'
resource_path = '/' + req['report'][0] + '/tiles' + '/' + req['date'][0] + '_TCI_60m/tilemapresource.xml'
tree = ET.parse(absolute_path + resource_path)
bounding_box = tree.find('BoundingBox')
sets = [set.get('order') for set in tree.findall('TileSets/TileSet')]
origin = tree.find('Origin')
return JsonResponse({
'boundingBox': [
float(bounding_box.get('minx')),
float(bounding_box.get('miny')),
float(bounding_box.get('maxx')),
float(bounding_box.get('maxy'))
],
'zoom': {
'max': int(max(sets)),
'min': int(min(sets))
},
'origin': [float(origin.get('x')), float(origin.get('y'))],
'projection': tree.find('SRS').text
})
else:
raise Http404
# ------------------------------------------------------------------------ # ------------------------------------------------------------------------
# def tareas(): # def tareas():
......
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