453 lines
10 KiB
JavaScript
453 lines
10 KiB
JavaScript
import * as mapboxgl from "mapbox-gl";
|
|
import Bbox from "@turf/bbox";
|
|
import BboxPolygon from "@turf/bbox-polygon";
|
|
import Center from "@turf/center";
|
|
import BooleanContains from "@turf/boolean-contains";
|
|
import BooleanOverlap from "@turf/boolean-overlap";
|
|
import Buffer from "@turf/buffer";
|
|
import confini from "./layers/confini.json";
|
|
import confiniHole from "./layers/confini_hole.json";
|
|
import aree_omogenee from "./layers/aree_omogenee.json";
|
|
import scuole_buffer from "./layers/scuole_buffer.json";
|
|
import luoghi_monumentali_buffer from "./layers/luoghi_monumentali_buffer.json";
|
|
import mercati_buffer from "./layers/mercati_buffer.json";
|
|
import musei_buffer from "./layers/musei_buffer.json";
|
|
import ospedali_cliniche_buffer from "./layers/ospedali_cliniche_buffer.json";
|
|
import stazioni_ferrovie_buffer from "./layers/stazioni_ferrovie_buffer.json";
|
|
import stazioni_metro_buffer from "./layers/stazioni_metro_buffer.json";
|
|
import parchi_buffer from "./layers/parchi_buffer.json";
|
|
import "./style.css";
|
|
|
|
mapboxgl.accessToken =
|
|
"pk.eyJ1IjoidGVvIiwiYSI6IllvZUo1LUkifQ.dirqtn275pAKdnqtLM2HSw";
|
|
|
|
const bounds = Bbox(confini);
|
|
const maxBounds = Bbox(Buffer(confini, 100));
|
|
const map = new mapboxgl.Map({
|
|
container: "map-home",
|
|
zoom: 11,
|
|
center: Center(confini).geometry.coordinates,
|
|
style: "mapbox://styles/teo/cjyxhh5n92wy51ck4a4uiymtu/draft",
|
|
maxBounds: [[maxBounds[0], maxBounds[1]], [maxBounds[2], maxBounds[3]]],
|
|
maxZoom: 16,
|
|
scrollZoom: false
|
|
});
|
|
|
|
const nav = new mapboxgl.NavigationControl();
|
|
map.addControl(nav, "top-right");
|
|
|
|
map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], {
|
|
padding: 20
|
|
});
|
|
|
|
// const slider = document.getElementById("slider");
|
|
// const sliderValue = document.getElementById("slider-value");
|
|
|
|
map.on("load", function() {
|
|
map.setLayoutProperty("building", "visibility", "none");
|
|
map.setLayoutProperty("building-outline", "visibility", "none");
|
|
|
|
map.addSource("aree_omogeneeSource", {
|
|
type: "geojson",
|
|
data: aree_omogenee
|
|
});
|
|
|
|
map.addSource("scuoleBufferSource", {
|
|
type: "geojson",
|
|
data: scuole_buffer
|
|
});
|
|
|
|
map.addSource("luoghiMonumentaliBufferSource", {
|
|
type: "geojson",
|
|
data: luoghi_monumentali_buffer
|
|
});
|
|
|
|
map.addSource("mercatiBufferSource", {
|
|
type: "geojson",
|
|
data: mercati_buffer
|
|
});
|
|
|
|
map.addSource("museiBufferSource", {
|
|
type: "geojson",
|
|
data: musei_buffer
|
|
});
|
|
|
|
map.addSource("ospedaliClinicheBufferSource", {
|
|
type: "geojson",
|
|
data: ospedali_cliniche_buffer
|
|
});
|
|
|
|
map.addSource("stazioniFerrovieBufferSource", {
|
|
type: "geojson",
|
|
data: stazioni_ferrovie_buffer
|
|
});
|
|
|
|
map.addSource("stazioniMetroBufferSource", {
|
|
type: "geojson",
|
|
data: stazioni_metro_buffer
|
|
});
|
|
|
|
map.addSource("parchiBufferSource", {
|
|
type: "geojson",
|
|
data: parchi_buffer
|
|
});
|
|
|
|
map.addSource("confiniHoleSource", {
|
|
type: "geojson",
|
|
data: confiniHole
|
|
});
|
|
|
|
map.addSource("confiniSource", {
|
|
type: "geojson",
|
|
data: confini
|
|
});
|
|
|
|
map.addSource("osmbuildings", {
|
|
type: "vector",
|
|
url: "https://data.osmbuildings.org/0.2/rkc8ywdl/tile.json"
|
|
});
|
|
|
|
const layers = map.getStyle().layers;
|
|
//console.log(layers);
|
|
let labelLayerId = "";
|
|
for (let i = 0; i < layers.length; i++) {
|
|
if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
|
|
labelLayerId = layers[i].id;
|
|
break;
|
|
}
|
|
}
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "aree_omogenee",
|
|
type: "fill",
|
|
source: "aree_omogeneeSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "parchi_buffer",
|
|
type: "fill",
|
|
source: "parchiBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "mercati_buffer",
|
|
type: "fill",
|
|
source: "mercatiBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "scuole_buffer",
|
|
type: "fill",
|
|
source: "scuoleBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "musei_buffer",
|
|
type: "fill",
|
|
source: "museiBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "ospedali_cliniche_buffer",
|
|
type: "fill",
|
|
source: "ospedaliClinicheBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "stazioni_ferrovie_buffer",
|
|
type: "fill",
|
|
source: "stazioniFerrovieBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "stazioni_metro_buffer",
|
|
type: "fill",
|
|
source: "stazioniMetroBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "luoghi_monumentali_buffer",
|
|
type: "fill",
|
|
source: "luoghiMonumentaliBufferSource",
|
|
paint: {
|
|
"fill-color": "#f5553d",
|
|
"fill-opacity": 1
|
|
}
|
|
},
|
|
"building-outline"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "buildings-base",
|
|
type: "fill",
|
|
source: "osmbuildings",
|
|
"source-layer": "building",
|
|
// filter: ["all", ["==", "minHeight", 0]],
|
|
// layout: {},
|
|
paint: {
|
|
"fill-color": "#fff",
|
|
"fill-opacity": { stops: [[16, 0], [17.5, 1]] }
|
|
}
|
|
},
|
|
labelLayerId
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "buildings-3d",
|
|
type: "fill-extrusion",
|
|
source: "osmbuildings",
|
|
"source-layer": "building",
|
|
paint: {
|
|
"fill-extrusion-color": "#f5553d",
|
|
"fill-extrusion-height": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
15,
|
|
0,
|
|
15.05,
|
|
[
|
|
"number",
|
|
["get", "height"],
|
|
["*", ["number", ["get", "levels"], 3], 3]
|
|
]
|
|
],
|
|
"fill-extrusion-base": [
|
|
"interpolate",
|
|
["linear"],
|
|
["zoom"],
|
|
15,
|
|
0,
|
|
15.05,
|
|
[
|
|
"number",
|
|
["get", "minHeight"],
|
|
["*", ["number", ["get", "minLevel"], 0], 3]
|
|
]
|
|
],
|
|
|
|
"fill-extrusion-opacity": {
|
|
stops: [[15, 0], [15.5, 1], [16, 1], [17.5, 0.6]]
|
|
}
|
|
},
|
|
//filter: ["!=", ["string", ["get", "shape"], ""], "none"]
|
|
filter: ["match", ["get", "id"], "", true, false]
|
|
},
|
|
labelLayerId
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "confiniHole",
|
|
source: "confiniHoleSource",
|
|
type: "fill",
|
|
paint: {
|
|
"fill-color": "#fff"
|
|
}
|
|
},
|
|
"settlement-subdivision-label"
|
|
);
|
|
|
|
map.addLayer(
|
|
{
|
|
id: "confini",
|
|
source: "confiniSource",
|
|
type: "line",
|
|
paint: {
|
|
"line-color": "#000"
|
|
}
|
|
},
|
|
"settlement-subdivision-label"
|
|
);
|
|
});
|
|
|
|
map.on("moveend", function() {
|
|
if (map.getZoom() >= 15) {
|
|
const aulenti = aree_omogenee.features.filter(
|
|
f => f.properties.area === "C.so Garibladi, C.so Como, Gae Aulenti"
|
|
)[0];
|
|
|
|
let buildings = map.queryRenderedFeatures({
|
|
layers: ["buildings-base"],
|
|
filter: ["!=", ["string", ["get", "shape"], ""], "none"]
|
|
});
|
|
|
|
let features = map.queryRenderedFeatures({
|
|
layers: [
|
|
"aree_omogenee",
|
|
"parchi_buffer",
|
|
"luoghi_monumentali_buffer",
|
|
"mercati_buffer",
|
|
"musei_buffer",
|
|
"ospedali_cliniche_buffer",
|
|
"scuole_buffer",
|
|
"stazioni_ferrovie_buffer",
|
|
"stazioni_metro_buffer"
|
|
]
|
|
});
|
|
|
|
const filtered = buildings
|
|
.filter(b => {
|
|
let inside = false;
|
|
for (let feature of features) {
|
|
//console.log(b, feature);
|
|
if (BooleanContains(feature, b)) {
|
|
inside = true;
|
|
break;
|
|
} else {
|
|
inside = false;
|
|
}
|
|
}
|
|
return inside;
|
|
})
|
|
.map(b => b.properties.id);
|
|
|
|
const ids = [...new Set(filtered)].filter(i => i);
|
|
|
|
const filter = ["match", ["get", "id"], ids, true, false];
|
|
|
|
if (ids.length) {
|
|
map.setFilter("buildings-3d", filter);
|
|
}
|
|
}
|
|
});
|
|
|
|
map.on("zoomend", function() {
|
|
if (map.getZoom() >= 15) {
|
|
const aulenti = aree_omogenee.features.filter(
|
|
f => f.properties.area === "C.so Garibladi, C.so Como, Gae Aulenti"
|
|
)[0];
|
|
|
|
let buildings = map.queryRenderedFeatures({
|
|
layers: ["buildings-base"],
|
|
filter: ["!=", ["string", ["get", "shape"], ""], "none"]
|
|
});
|
|
|
|
let features = map.queryRenderedFeatures({
|
|
layers: [
|
|
"aree_omogenee",
|
|
"parchi_buffer",
|
|
"luoghi_monumentali_buffer",
|
|
"mercati_buffer",
|
|
"musei_buffer",
|
|
"ospedali_cliniche_buffer",
|
|
"scuole_buffer",
|
|
"stazioni_ferrovie_buffer",
|
|
"stazioni_metro_buffer"
|
|
]
|
|
});
|
|
|
|
const filtered = buildings
|
|
.filter(b => {
|
|
let inside = false;
|
|
for (let feature of features) {
|
|
//console.log(b, feature);
|
|
if (BooleanContains(feature, b)) {
|
|
inside = true;
|
|
break;
|
|
} else {
|
|
inside = false;
|
|
}
|
|
}
|
|
return inside;
|
|
})
|
|
.map(b => b.properties.id);
|
|
|
|
const ids = [...new Set(filtered)].filter(i => i);
|
|
|
|
const filter = ["match", ["get", "id"], ids, true, false];
|
|
|
|
if (ids.length) {
|
|
map.setFilter("buildings-3d", filter);
|
|
}
|
|
}
|
|
});
|
|
|
|
// var toggleableLayerIds = ["wbbuilding", "aereal"];
|
|
//
|
|
// for (var i = 0; i < toggleableLayerIds.length; i++) {
|
|
// var id = toggleableLayerIds[i];
|
|
//
|
|
// var link = document.createElement("a");
|
|
// link.href = "#";
|
|
// link.className = "active";
|
|
// link.textContent = id;
|
|
//
|
|
// link.onclick = function(e) {
|
|
// var clickedLayer = this.textContent;
|
|
// e.preventDefault();
|
|
// e.stopPropagation();
|
|
//
|
|
// var visibility = map.getLayoutProperty(clickedLayer, "visibility");
|
|
//
|
|
// if (visibility === "visible") {
|
|
// map.setLayoutProperty(clickedLayer, "visibility", "none");
|
|
// this.className = "";
|
|
// } else {
|
|
// this.className = "active";
|
|
// map.setLayoutProperty(clickedLayer, "visibility", "visible");
|
|
// }
|
|
// };
|
|
//
|
|
// var layers = document.getElementById("menu");
|
|
// layers.appendChild(link);
|
|
// }
|