PyCafe - Solara - 3D Building Visualization with Leafmap

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import sys
sys.setrecursionlimit(300)

import leafmap.maplibregl as leafmap
import pycafe
import solara

# 獲取 MapTiler 的 API 密鑰
MAPTILER_KEY = pycafe.get_secret("MAPTILER_KEY")
print("I got the MAPTILER_KEY")


class Map(leafmap.Map):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

        # 加載 STAC GUI 工具
        #self.add_stac_gui()

        # 設置地圖底圖
        self.add_basemap("Esri.WorldImagery", visible=True)

        # 設定向量資料來源
        source = {
            "url": f"https://api.maptiler.com/tiles/v3/tiles.json?key={MAPTILER_KEY}",
            "type": "vector",
        }

        # 定義 3D 建築物圖層
        layer = {
            "id": "3d-buildings",
            "source": "openmaptiles",
            "source-layer": "building",
            "type": "fill-extrusion",
            "min-zoom": 15,
            "paint": {
                "fill-extrusion-color": [
                    "interpolate",
                    ["linear"],
                    ["get", "render_height"],
                    0,
                    "lightgray",
                    200,
                    "royalblue",
                    400,
                    "lightblue",
                ],
                "fill-extrusion-height": [
                    "interpolate",
                    ["linear"],
                    ["zoom"],
                    15,
                    0,
                    16,
                    ["get", "render_height"],
                ],
                "fill-extrusion-base": [
                    "case",
                    [">=", ["get", "zoom"], 16],
                    ["get", "render_min_height"],
                    0,
                ],
            },
        }
        
        # 添加來源和圖層
        self.add_source("openmaptiles", source)
        self.add_layer(layer)
        self.add_layer_control()


@solara.component
def Page():
    # 等待初始化完成
    waited = solara.use_reactive(False)

    @solara.lab.use_task
    async def wait():
        import asyncio
        await asyncio.sleep(1)
        waited.value = True

    if waited.value:
        solara.Text("before")
        # 設置地圖初始視角
        Map.element(
            center=[-74.0066, 40.7135],
            zoom=16,
            pitch=45,
            bearing=-17,
            style="liberty",
            height="750px"
        )
        solara.Text("after")
    else:
        solara.Text("waiting")
Py.Cafe

leafmap-maplibre-test

3D Building Visualization with Leafmap
