https://tokyooasis.com/js/layer/road.js

1import {OneGeoJson} from "../carto.js";
2
3export default class {
4
5    constructor(map) {
6        this.map = map
7
8        this.addGroundLayer().then()
9        this.addBasementLayer().then()
10    }
11
12    addGroundLayer = () => {
13        return new Promise((resolve) => {
14            OneGeoJson(`
15            SELECT cartodb_id, the_geom as geom, link_id, floor 
16            FROM road_network_link 
17            WHERE floor >= 1
18            `).then(data => {
19                this.map.addSource("ground", {
20                    type: "geojson",
21                    data: data,
22                })
23//                console.log(data)
24                this.map.addLayer({
25                    id: "ground-layer",
26                    type: "line",
27                    source: "ground",
28                    layout: {
29                        "line-join": "round",
30                        "line-cap": "round",
31                        "visibility": "none",
32                    },
33                    paint: {
34                        "line-color": "#568a69",
35                        "line-width": 2,
36                    },
37                })
38                resolve()
39            }).catch(e => {
40                console.log(e)
41                resolve()
42            })
43        })
44    }
45
46    addBasementLayer = () => {
47        return new Promise((resolve) => {
48            OneGeoJson(`
49            SELECT cartodb_id, the_geom as geom, link_id, floor 
50            FROM road_network_link 
51            WHERE floor <= -1
52            `).then(data => {
53//                console.log(data)
54                this.map.addSource("basement",{
55                    type: "geojson",
56                    data: data,
57                });
58                this.map.addLayer({
59                    id: "basement-layer",
60                    type: "line",
61                    source: "basement",
62                    layout: {
63                        "line-join": "round",
64                        "line-cap": "round",
65                        "visibility": "none",
66                    },
67                    paint: {
68                        "line-color": "#723d3d",
69                        "line-width": 2,
70                    },
71                });
72                resolve()
73            }).catch(e => {
74                console.log(e)
75                resolve()
76            })
77        })
78    }
79
80    show = (types) => {
81        this.map.setLayoutProperty("ground-layer", "visibility", types.includes("ground") ? "visible": "none")
82        this.map.setLayoutProperty("basement-layer", "visibility", types.includes("basement") ? "visible": "none")
83    }
84
85}