123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453 |
- 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);
- // }
|