Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
272 righe
8.1 KiB
272 righe
8.1 KiB
2 anni fa
|
function _displayMapRead (divtarget) {
|
||
|
|
divtarget = typeof divtarget !== 'undefined' ? divtarget : 'app';
|
||
|
|
document.getElementById(divtarget).innerHTML = "<div id='map' class='map-wrapper'></div>";
|
||
|
|
document.getElementById('home').className = "nav-link flat active";
|
||
|
|
document.getElementById('leaflet_crud_create').className = "nav-link flat";
|
||
|
|
document.getElementById('leaflet_crud_read').className = "nav-link flat active";
|
||
|
|
document.getElementById('navbarDropdownUpdate').className = "nav-link dropdown-toggle";
|
||
|
|
document.getElementById('leaflet_crud_delete').className = "nav-link flat";
|
||
|
|
|
||
|
|
var map, isCollapsed, odm1;
|
||
|
|
|
||
|
|
if (document.body.clientWidth <= 767) {
|
||
|
|
isCollapsed = true;
|
||
|
|
} else {
|
||
|
|
isCollapsed = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
var promisePoint = $.ajax({ url: "assets/dataservice/read_point.php",
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: {command:"POINT"},
|
||
|
|
username: null,
|
||
|
|
password: null
|
||
|
|
});
|
||
|
|
|
||
|
|
var pointObjects = L.geoJson(null, {
|
||
|
|
onEachFeature: function (feature, layer) {
|
||
|
|
if (feature.properties) {
|
||
|
|
layer.on({
|
||
|
|
click: function (e) {
|
||
|
|
var htmlformcomponent = "" +
|
||
|
|
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" +
|
||
|
|
"<thead>" +
|
||
|
|
"<tr>" +
|
||
|
|
"<th colspan='2' class='text-center'>Dati indetificativi</th>" +
|
||
|
|
"</tr>" +
|
||
|
|
"</thead>" +
|
||
|
|
"<tbody>" +
|
||
|
|
"<tr>" +
|
||
|
|
"<td class=''>Note</td>" +
|
||
|
|
"<td class=''><strong>"+feature.properties.notes+"</strong></td>" +
|
||
|
|
"</tr>" +
|
||
|
|
"</tbody>" +
|
||
|
|
"</table>" +
|
||
|
|
"";
|
||
|
|
$("#app_modal_body").empty();
|
||
|
|
$("#app_modal_body").removeClass().addClass('modal-body');
|
||
|
|
$("#app_modal_size").removeClass().addClass('modal-dialog');
|
||
|
|
$("#app_modal_body").html(htmlformcomponent);
|
||
|
|
$("#app_modal_label").html("POINT");
|
||
|
|
|
||
|
|
$("#modalbox").modal('show');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
promisePoint.then(function (data) {
|
||
|
|
pointObjects.addData(data);
|
||
|
|
map.addLayer(pointObjects);
|
||
|
|
});
|
||
|
|
|
||
|
|
var promiseLinestring = $.ajax({ url: "assets/dataservice/read_linestring.php",
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: {command:"LINESTRING"},
|
||
|
|
username: null,
|
||
|
|
password: null
|
||
|
|
});
|
||
|
|
|
||
|
|
var linestringObjects = L.geoJson(null, {
|
||
|
|
onEachFeature: function (feature, layer) {
|
||
|
|
if (feature.properties) {
|
||
|
|
layer.on({
|
||
|
|
click: function (e) {
|
||
|
|
var htmlformcomponent = "" +
|
||
|
|
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" +
|
||
|
|
"<thead>" +
|
||
|
|
"<tr>" +
|
||
|
|
"<th colspan='2' class='text-center'>Dati indetificativi</th>" +
|
||
|
|
"</tr>" +
|
||
|
|
"</thead>" +
|
||
|
|
"<tbody>" +
|
||
|
|
"<tr>" +
|
||
|
|
"<td class=''>Note</td>" +
|
||
|
|
"<td class=''><strong>"+feature.properties.notes+"</strong></td>" +
|
||
|
|
"</tr>" +
|
||
|
|
"</tbody>" +
|
||
|
|
"</table>" +
|
||
|
|
"";
|
||
|
|
$("#app_modal_body").empty();
|
||
|
|
$("#app_modal_body").removeClass().addClass('modal-body');
|
||
|
|
$("#app_modal_size").removeClass().addClass('modal-dialog');
|
||
|
|
$("#app_modal_body").html(htmlformcomponent);
|
||
|
|
$("#app_modal_label").html("LINESTRING");
|
||
|
|
|
||
|
|
$("#modalbox").modal('show');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
promiseLinestring.then(function (data) {
|
||
|
|
linestringObjects.addData(data);
|
||
|
|
map.addLayer(linestringObjects);
|
||
|
|
});
|
||
|
|
|
||
|
|
var promisePolygon = $.ajax({ url: "assets/dataservice/read_polygon.php",
|
||
|
|
method: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
data: {command:"POLYGON"},
|
||
|
|
username: null,
|
||
|
|
password: null
|
||
|
|
});
|
||
|
|
|
||
|
|
var polygonObjects = L.geoJson(null, {
|
||
|
|
onEachFeature: function (feature, layer) {
|
||
|
|
if (feature.properties) {
|
||
|
|
layer.on({
|
||
|
|
click: function (e) {
|
||
|
|
var htmlformcomponent = "" +
|
||
|
|
"<table id='feature_data' class='table table-condensed table-bordered table-striped'>" +
|
||
|
|
"<thead>" +
|
||
|
|
"<tr>" +
|
||
|
|
"<th colspan='2' class='text-center'>Dati indetificativi</th>" +
|
||
|
|
"</tr>" +
|
||
|
|
"</thead>" +
|
||
|
|
"<tbody>" +
|
||
|
|
"<tr>" +
|
||
|
|
"<td class=''>Notes</td>" +
|
||
|
|
"<td class=''><strong>"+feature.properties.notes+"</strong></td>" +
|
||
|
|
"</tr>" +
|
||
|
|
"</tbody>" +
|
||
|
|
"</table>" +
|
||
|
|
"";
|
||
|
|
$("#app_modal_body").empty();
|
||
|
|
$("#app_modal_body").removeClass().addClass('modal-body');
|
||
|
|
$("#app_modal_size").removeClass().addClass('modal-dialog');
|
||
|
|
$("#app_modal_body").html(htmlformcomponent);
|
||
|
|
$("#app_modal_label").html("POLYGON");
|
||
|
|
|
||
|
|
$("#modalbox").modal('show');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
promisePolygon.then(function (data) {
|
||
|
|
polygonObjects.addData(data);
|
||
|
|
map.addLayer(polygonObjects);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var url = "https://test-paesaggistica.lavoripubblici.sicilia.it/geoserver/mappers/wms";
|
||
|
|
|
||
|
|
//################# INIZIO PARTICELLA SELEZIONATA #################
|
||
|
|
<?php if ( strlen($_SESSION['SELECT_PARTICELLA']) > 100 ) { ?>
|
||
|
|
particella = L.geoJson(<?php echo $_SESSION['SELECT_PARTICELLA'];?>, {
|
||
|
|
style: {'color': "#ff0000",'fillColor': "rgb(255, 255, 0)",'fillOpacity': 0.4,'dashArray': 4,'weight': 3,'opacity': 0.9}
|
||
|
|
});
|
||
|
|
<?php } ?>
|
||
|
|
//################# FINE PARTICELLA SELEZIONATA #################
|
||
|
|
|
||
|
|
odm1 = L.tileLayer ('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
maxZoom: 20,
|
||
|
|
minZoom: 1,
|
||
|
|
transparent: true,
|
||
|
|
attribution: 'OpenStreetMap | contributors CC-BY-SA.'
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
odm2 = L.tileLayer ('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||
|
|
maxZoom: 20,
|
||
|
|
minZoom: 1,
|
||
|
|
transparent: true,
|
||
|
|
attribution: '© Esri | Source: Esri, USDA, USGS, AEX, GeoEye and the GIS User Community'
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
odm3 = L.tileLayer.wms (url, {
|
||
|
|
maxZoom: 20,
|
||
|
|
minZoom: 5,
|
||
|
|
transparent: true,
|
||
|
|
layers: 'mappers:provincie',
|
||
|
|
attribution: '© mapcloud services'
|
||
|
|
});
|
||
|
|
|
||
|
|
ctr10k = L.tileLayer.wms ('http://geoportal.mapcloud.it:8080/geoserver/wms', {
|
||
|
|
format: 'image/png',
|
||
|
|
transparent: true,
|
||
|
|
maxZoom: 20,
|
||
|
|
minZoom: 5,
|
||
|
|
transparent: true,
|
||
|
|
layers: 'mapcloud:ctr10k',
|
||
|
|
attribution: 'Carta Tecnica Regionale 1:10.000 - Regione Sicilia (Servizio WMS)'
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
particelle = L.tileLayer.wms(url, {
|
||
|
|
layers: "mappers:particelle_<?php echo $_SESSION['COMUNE_BELF']; ?>",
|
||
|
|
format: "image/png",
|
||
|
|
maxZoom: 20,
|
||
|
|
minZoom: 10,
|
||
|
|
transparent: true,
|
||
|
|
attribution: '© mapcloud services'
|
||
|
|
}),
|
||
|
|
|
||
|
|
|
||
|
|
map = L.map("map", {
|
||
|
|
zoom: <?php echo $_SESSION['ZOOM'];?>,
|
||
|
|
center: [<?php echo $_SESSION['CENTER'];?>],
|
||
|
|
layers: [odm1,particella],
|
||
|
|
minZoom: 3,
|
||
|
|
maxZoom: 20,
|
||
|
|
zoomControl: false,
|
||
|
|
attributionControl: false
|
||
|
|
});
|
||
|
|
|
||
|
|
map.setMaxBounds([<?php echo $_SESSION['BOUND']; ?>]);
|
||
|
|
|
||
|
|
var zoomControl = L.control.zoom({
|
||
|
|
position: "topleft"
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
var baseLayers = [
|
||
|
|
{label: '<b>Opendata Map</b>', noShow: false, children: [
|
||
|
|
{label: 'OpenStreetMap', layer: odm1},
|
||
|
|
{label: 'Satellite Image', layer: odm2},
|
||
|
|
{label: 'Limiti provinciali', layer: odm3},
|
||
|
|
]},
|
||
|
|
{label: '<b>Cartografia Regionale</b>', children: [
|
||
|
|
{label: 'CTR 10K - volo 2012-2013', layer: ctr10k },
|
||
|
|
]},
|
||
|
|
];
|
||
|
|
|
||
|
|
var overlayLayers =
|
||
|
|
{
|
||
|
|
label: '<b>CARTOGRAFICI</b>',
|
||
|
|
noShow: true,
|
||
|
|
children: [
|
||
|
|
{label: '<b>Catasto</b>', children: [
|
||
|
|
{label: 'Particelle catastali', layer: particelle},
|
||
|
|
]},
|
||
|
|
{label: '<b>Particelle progetto</b>', children: [
|
||
|
|
{label: 'Particelle selezionate', layer: particella},
|
||
|
|
]},
|
||
|
|
{label: '<b>Elelenti del progetto</b>', children: [
|
||
|
|
{label: 'Elementi puntuali', layer: pointObjects},
|
||
|
|
{label: 'Elementi lineari', layer: linestringObjects},
|
||
|
|
{label: 'Elementi poligonali', layer: polygonObjects},
|
||
|
|
]},
|
||
|
|
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
collapsed: true,
|
||
|
|
closedSymbol: '<i class="fal fa-plus-square" style="margin-right:5px"></i>',
|
||
|
|
openedSymbol: '<i class="fal fa-minus-square" style="margin-right:5px"></i>',
|
||
|
|
namedToggle: false,
|
||
|
|
spaceSymbol: ' ',
|
||
|
|
selectorBack: false,
|
||
|
|
collapseAll: '',
|
||
|
|
expandAll: '',
|
||
|
|
};
|
||
|
|
|
||
|
|
var layerControlTree = L.control.layers.tree(baseLayers, overlayLayers, options).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
}
|