Merge branch 'master' of https://git.electricmandarine.cloud/nicolo/caprigis
This commit is contained in:
commit
e3a3b30ade
144
webgis/geojson/villa_bismarck_area.geojson
Normal file
144
webgis/geojson/villa_bismarck_area.geojson
Normal file
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "vincoli",
|
||||
"name": "vincoli_unito",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "id": 64, "COMUNE": "capri", "LOCALITA": "palazzo a mare fortino", "FOGLIO": 2, "ANNO": 1987, "PROPRIETA": "varie", "OGGETTO": "decreto 1987 con mappa vincoli", "AREA": 12778.387, "PERCENTUAL": 0.12, "PART_BIS": "varie" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 14.233101957057912, 40.55855661753521 ], [ 14.233153368900533, 40.558557182383524 ], [ 14.233154853135023, 40.558564044900407 ], [ 14.233159129470815, 40.558565860946423 ], [ 14.233198172152715, 40.558559193038903 ], [ 14.233200441979228, 40.558557122517321 ], [ 14.233214147234253, 40.558502913621545 ], [ 14.233210273414857, 40.558500057453784 ], [ 14.233194332157932, 40.558502037201393 ], [ 14.233184770826229, 40.558488380121219 ], [ 14.233255600945375, 40.558400510653804 ], [ 14.233285897158975, 40.558398626200471 ], [ 14.233558576605967, 40.558380474085453 ], [ 14.233651119345367, 40.558375352837579 ], [ 14.234039619148092, 40.558460385589285 ], [ 14.234122965310604, 40.55864089520292 ], [ 14.234152094886339, 40.558655687527128 ], [ 14.234075647178869, 40.558452580108337 ], [ 14.233929474156575, 40.55804789940327 ], [ 14.233954150515389, 40.558042104251491 ], [ 14.233981129721588, 40.558074162982372 ], [ 14.234302842384098, 40.557935220969895 ], [ 14.234266338948077, 40.557881945292394 ], [ 14.23419871946891, 40.557885370168648 ], [ 14.234157634218178, 40.557891354502097 ], [ 14.234127659222388, 40.557882217466698 ], [ 14.23406679556545, 40.557789898763481 ], [ 14.234050350955419, 40.557793216029985 ], [ 14.234043511917692, 40.557776336956486 ], [ 14.234006936542155, 40.557789352781221 ], [ 14.233926291149, 40.557821740430811 ], [ 14.233926418543827, 40.557810568456581 ], [ 14.233998529987669, 40.557772910221018 ], [ 14.234010771311208, 40.557769937510272 ], [ 14.234022920076791, 40.55776651727156 ], [ 14.234082129475279, 40.557746947862043 ], [ 14.234107602631816, 40.557735497066091 ], [ 14.23411249711897, 40.557734486728847 ], [ 14.23409475756895, 40.557714332495458 ], [ 14.234027567106638, 40.557628749985255 ], [ 14.234017156556606, 40.557616763254451 ], [ 14.233944593819356, 40.557505596558123 ], [ 14.233756545457693, 40.557536079845733 ], [ 14.233741181292343, 40.557478922039131 ], [ 14.233621529860686, 40.557506283597256 ], [ 14.233597732213283, 40.557435066538858 ], [ 14.233718071378133, 40.557398771311995 ], [ 14.233691376405258, 40.557324704599345 ], [ 14.233640221407287, 40.55720325178202 ], [ 14.233588870463894, 40.557201719245796 ], [ 14.233533591514551, 40.557184965581925 ], [ 14.233433823826145, 40.557232867928604 ], [ 14.233346363822585, 40.557246290635412 ], [ 14.233264815764169, 40.557238002769559 ], [ 14.233163143183194, 40.557221760247394 ], [ 14.233140904207525, 40.557219378014814 ], [ 14.233105649444068, 40.557227933196778 ], [ 14.233085140983928, 40.557227945979825 ], [ 14.233044007449731, 40.557246741098311 ], [ 14.232894138129884, 40.557252076981428 ], [ 14.232805485080364, 40.557258787661787 ], [ 14.232727290058214, 40.557264748415044 ], [ 14.232672927892258, 40.557270346070418 ], [ 14.232711426981718, 40.557405271581132 ], [ 14.232731078416156, 40.557463202861491 ], [ 14.232794088687793, 40.557623914182741 ], [ 14.232817632721915, 40.557683063073107 ], [ 14.232842437072225, 40.557734473842302 ], [ 14.232900890408466, 40.55784956972775 ], [ 14.232907805703938, 40.557859745683253 ], [ 14.232958555920879, 40.557965256232954 ], [ 14.232998970712185, 40.558052225724111 ], [ 14.23302906020889, 40.558119760409944 ], [ 14.232904499212088, 40.558149323177162 ], [ 14.232891058576643, 40.558163237165772 ], [ 14.232878891823395, 40.558168221359928 ], [ 14.232878446782884, 40.558172985472893 ], [ 14.23292172794882, 40.55828261760572 ], [ 14.232943519381285, 40.558358439565012 ], [ 14.232922560553787, 40.558406417958246 ], [ 14.232884905430595, 40.558462627814812 ], [ 14.232885239061062, 40.558467620556151 ], [ 14.232879308438861, 40.558473837940149 ], [ 14.232878794659257, 40.558476069090901 ], [ 14.232886440909828, 40.558499210370528 ], [ 14.232891449831609, 40.558513842790035 ], [ 14.232919759844457, 40.558566170647573 ], [ 14.232897228174988, 40.558572277764732 ], [ 14.232898362592914, 40.558575562659669 ], [ 14.23290156728862, 40.558577148140685 ], [ 14.232923229288819, 40.558578781733054 ], [ 14.232956110352845, 40.558581458147792 ], [ 14.232955851266615, 40.558587042835718 ], [ 14.232995917994353, 40.558584776439666 ], [ 14.233093391074993, 40.558592648852589 ], [ 14.233097325261726, 40.558590216958194 ], [ 14.233101957057912, 40.55855661753521 ] ] ] ] } },
|
||||
|
||||
@ -43,4 +43,21 @@ export class SiteMedia {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderReconstructions() {
|
||||
return `
|
||||
<div class="content has-text-centered mb-5 pb-5">
|
||||
<p class="is-size-5 mt-3">Ricostruzioni 3D</p>
|
||||
<div style="max-width: 70%; margin: 0 auto">
|
||||
<p class="is-size-6 has-text-centered">Gallery ricostruzioni 3D</p>
|
||||
<figure class="is-relative is-clickable has-text-centered" id="gallery-3d">
|
||||
<img src="img/${this._siteData.filename}" width="300"/>
|
||||
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
|
||||
<i class="is-flex fa fa-2x fa-play-circle"></i>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ import API_CONFIG from "./config.js";
|
||||
import Icons from "./icons.js";
|
||||
import { SphericalPhoto } from "./components/SphericalPhoto.js";
|
||||
import { GisState } from "./state.js";
|
||||
import Options from "./layer_options.js";
|
||||
|
||||
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
|
||||
const BASE_URL = location.href;
|
||||
@ -28,47 +29,6 @@ GIS.INIT_ZOOM = 14;
|
||||
GIS.MIN_ZOOM = 11;
|
||||
GIS.MAX_ZOOM = 24;
|
||||
|
||||
const optionsVincoli = {
|
||||
color: '#222',
|
||||
opacity: 0.8,
|
||||
weight: 1,
|
||||
fillColor: '#fa7861',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const optionsSiti = {
|
||||
color: '#800040',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#800040',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const optionsGrotta = {
|
||||
color: '#205dac',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#205dac',
|
||||
fillOpacity: 0.8
|
||||
}
|
||||
const optionsPaesistici = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#88d28d',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const optionsFabbricati = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#5b5d5f',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
const clusterOptions = {
|
||||
spiderfyOnMaxZoom: false,
|
||||
showCoverageOnHover: false,
|
||||
disableClusteringAtZoom: 19,
|
||||
};
|
||||
|
||||
/**
|
||||
* Capitalize a text string
|
||||
* @todo Move to utils
|
||||
@ -108,8 +68,9 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
L.control.scale({imperial: false}).addTo(map);
|
||||
L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
|
||||
|
||||
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
|
||||
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
|
||||
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', Options.constraintsArch);
|
||||
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', Options.constraintsLand);
|
||||
let buildings = await this.loadGeoJSON('fabbricati.geojson', Options.buildings, false);
|
||||
|
||||
await this.addLayerGroups(map);
|
||||
await this.fetchCartographyLayers();
|
||||
@ -130,15 +91,14 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
);
|
||||
const cartography = {
|
||||
'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
|
||||
'Fabbricati' : buildings,
|
||||
'Vincoli archeologici' : layerVincoli,
|
||||
'Vincoli paesaggistici' : layerPaesistici,
|
||||
'Vincoli archeologici indiretti' : layerPaesistici,
|
||||
};
|
||||
L.control.layers(baseMap, cartography).addTo(map);
|
||||
|
||||
GisState.map = map;
|
||||
|
||||
//GisState.cartography.cadastral = wmsLayer;
|
||||
|
||||
return map;
|
||||
}
|
||||
/**
|
||||
@ -210,15 +170,20 @@ GIS.sites = async function () {
|
||||
let sitesData = await fetch(`${API_URL}/sites`)
|
||||
.then(data => data.json());
|
||||
|
||||
let sites = L.markerClusterGroup(clusterOptions);
|
||||
let sites = L.markerClusterGroup(Options.cluster);
|
||||
let geom = [];
|
||||
|
||||
for (let record of sitesData) {
|
||||
if (record.geojson) {
|
||||
const options = record.gisId === 'grotta_azzurra' ?
|
||||
optionsGrotta : optionsSiti;
|
||||
Options.grotta : Options.site;
|
||||
geom.push(await this.loadSiteLayer(record, options));
|
||||
}
|
||||
if (record.area) {
|
||||
const options = record.gisId === 'villa_bismarck' ?
|
||||
Options.bismarck : Options.site;
|
||||
geom.push(await this.loadSiteLayer(record, options, false, true));
|
||||
}
|
||||
|
||||
const marker = L.marker(
|
||||
record.coordinates,
|
||||
@ -250,7 +215,7 @@ GIS.notConserved = async function () {
|
||||
let notConserData = await fetch(`${API_URL}/not_conserved`)
|
||||
.then(data => data.json());
|
||||
|
||||
let notConserved = L.markerClusterGroup(clusterOptions);
|
||||
let notConserved = L.markerClusterGroup(Options.cluster);
|
||||
|
||||
for (let record of notConserData.records) {
|
||||
const marker = L.marker(
|
||||
@ -280,7 +245,7 @@ GIS.findings = async function () {
|
||||
.then(data => data.json());
|
||||
|
||||
let findings = L.markerClusterGroup(
|
||||
clusterOptions
|
||||
Options.cluster
|
||||
);
|
||||
|
||||
for (let record of findingsData) {
|
||||
@ -312,7 +277,7 @@ GIS.prehistoric = async function () {
|
||||
.then(data => data.json());
|
||||
|
||||
let prehistoric = L.markerClusterGroup(
|
||||
clusterOptions
|
||||
Options.cluster
|
||||
);
|
||||
|
||||
for (let record of data.records) {
|
||||
@ -344,7 +309,7 @@ GIS.underwater = async function () {
|
||||
let underwaterData = await fetch(`${API_URL}/underwater`)
|
||||
.then(data => data.json());
|
||||
|
||||
let underwater = L.markerClusterGroup(clusterOptions);
|
||||
let underwater = L.markerClusterGroup(Options.cluster);
|
||||
|
||||
for (let record of underwaterData.records) {
|
||||
const marker = L.marker(
|
||||
@ -369,7 +334,6 @@ GIS.underwater = async function () {
|
||||
/**
|
||||
* Adds layers to map and returns an object
|
||||
* with {baseMap, archeoLayers, sitesLayerGroup}
|
||||
* @todo Load areas for sites that have them!!
|
||||
* @param {L.Map} map
|
||||
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
|
||||
*/
|
||||
@ -388,16 +352,15 @@ GIS.initLayers = async function(map) {
|
||||
maxZoom: GIS.MAX_ZOOM,
|
||||
attribution: '© Mapbox'
|
||||
});
|
||||
|
||||
let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
|
||||
let buildings = await this.loadGeoJSON('fabbricati.geojson', optionsFabbricati, false);
|
||||
let baseCatasto = new L.LayerGroup([buildings, boundaries]);
|
||||
|
||||
const baseGroup = new L.LayerGroup([osmap]);
|
||||
baseGroup.addTo(map);
|
||||
const baseMap = {
|
||||
"OpenStreetMap" : osmap,
|
||||
"Satellite" : mapbox,
|
||||
"Fabbricati e limiti comuni" : baseCatasto,
|
||||
'Limiti amministrativi' : boundaries,
|
||||
};
|
||||
|
||||
return baseMap;
|
||||
@ -478,9 +441,10 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
|
||||
* @param {boolean} popup Should the features have a popup?
|
||||
* @returns {L.Layer}
|
||||
*/
|
||||
GIS.loadSiteLayer = async function (site, options, popup = true) {
|
||||
const geoJSON = `${site.gisId}.geojson`;
|
||||
const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
|
||||
GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
|
||||
let geoJSON = site.gisId;
|
||||
geoJSON += area ? '_area.geojson' : '.geojson';
|
||||
const geo = await fetch(`${BASE_URL}geojson/${geoJSON}`)
|
||||
.then(res => res.json())
|
||||
.catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
|
||||
|
||||
|
||||
54
webgis/js/layer_options.js
Normal file
54
webgis/js/layer_options.js
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* @namespace Options
|
||||
*/
|
||||
let Options = {};
|
||||
|
||||
Options.constraintsArch = {
|
||||
color: '#222',
|
||||
opacity: 0.8,
|
||||
weight: 1,
|
||||
fillColor: '#fa7861',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.site = {
|
||||
color: '#800040',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#800040',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.grotta = {
|
||||
color: '#205dac',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#205dac',
|
||||
fillOpacity: 0.8
|
||||
}
|
||||
Options.bismarck = {
|
||||
color: '#a4a79a',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#a4a79a',
|
||||
fillOpacity: 0.8
|
||||
}
|
||||
Options.constraintsLand = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#88d28d',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.buildings = {
|
||||
color: '#222',
|
||||
opacity: 1,
|
||||
weight: 1.5,
|
||||
fillColor: '#5b5d5f',
|
||||
fillOpacity: 0.8
|
||||
};
|
||||
Options.cluster = {
|
||||
spiderfyOnMaxZoom: false,
|
||||
showCoverageOnHover: false,
|
||||
disableClusteringAtZoom: 19,
|
||||
};
|
||||
|
||||
export default Options;
|
||||
@ -100,8 +100,14 @@ UI.openSiteModal = function (data, selector) {
|
||||
let surveys = data.images.filter(i => i.type === 'Survey');
|
||||
let photos = data.images.filter(i => i.type === 'Photo');
|
||||
let videos = data.images.filter(i => i.type === 'Video');
|
||||
let reconstructions = data.images.filter(i => i.type === 'Reconstruction');
|
||||
|
||||
if (surveys.length === 0 && photos.length === 0 && videos.length === 0) {
|
||||
const noMedia = surveys.length === 0
|
||||
&& photos.length === 0
|
||||
&& reconstructions.length === 0
|
||||
&& videos.length === 0;
|
||||
|
||||
if (noMedia) {
|
||||
images.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
|
||||
}
|
||||
|
||||
@ -114,6 +120,9 @@ UI.openSiteModal = function (data, selector) {
|
||||
siteMedia.siteData = photos[0] ?? undefined;
|
||||
images.innerHTML += photos[0] ? siteMedia.renderPhotos() : '';
|
||||
|
||||
siteMedia.siteData = reconstructions[0] ?? undefined;
|
||||
images.innerHTML += reconstructions[0] ? siteMedia.renderReconstructions() : '';
|
||||
|
||||
siteMedia.siteData = videos[0] ?? undefined;
|
||||
images.innerHTML += videos[0] ? siteMedia.renderVideos() : '';
|
||||
}
|
||||
@ -122,6 +131,7 @@ UI.openSiteModal = function (data, selector) {
|
||||
|
||||
this.imageGallery('gallery-1', surveys);
|
||||
this.imageGallery('gallery-2', photos);
|
||||
this.imageGallery('gallery-3d', reconstructions);
|
||||
this.imageGallery('gallery-video', videos, true);
|
||||
}
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user