Skip to content

Commit ea2bae8

Browse files
author
jannik brack
committed
add walls and change thumbnail in pointcloud demo
1 parent 0e25074 commit ea2bae8

File tree

3 files changed

+224
-24
lines changed

3 files changed

+224
-24
lines changed

‎.github/workflows/build_and_deploy.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ jobs:
4040
CI=false yarn build
4141
cd ..
4242
cp -r multi_tab/dist docs-build/multi_tab
43-
- name: Install and build multi-tab🔧
43+
- name: Install and build pointcloud🔧
4444
run: |
4545
cd pointcloud
4646
yarn

‎assets/thumbnails/PointCloudDemoThumbnail.png‎

-50.2 KB
Loading

‎pointcloud/src/App.tsx‎

Lines changed: 223 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,238 @@
11
import "./App.css";
2-
import {MapLibreMap, MlNavigationTools} from "@mapcomponents/react-maplibre";
2+
import {MapLibreMap, MlGeoJsonLayer, MlNavigationTools} from "@mapcomponents/react-maplibre";
33
import LasLayer from "./LasLayer.jsx";
4+
import {FeatureCollection} from "geojson";
45

56
function App() {
7+
const wgFreiburgWalls: FeatureCollection = {
8+
"type": "FeatureCollection",
9+
"features": [
10+
{
11+
"id": "21517c507fb9d62466214ae28bcc420d",
12+
"type": "Feature",
13+
"properties": {"id": "21517c507fb9d62466214ae28bcc420d"},
14+
"geometry": {
15+
"coordinates": [[[7.842913005868155, 47.988816221118185], [7.84292397880796, 47.9888698795171], [7.842907608846019, 47.988870296447715], [7.842912001158595, 47.988884149581054], [7.842945231881458, 47.98888071683709], [7.84295580705475, 47.9889237646282], [7.842925215470984, 47.98892698572752], [7.8429450385637836, 47.98892769961785], [7.842961493451185, 47.989005725213616], [7.842961764502007, 47.98900723918888], [7.84297766709318, 47.98900634783601], [7.84298864379744, 47.9890708632569], [7.842994321681601, 47.98907053590517], [7.842982855025554, 47.989005419900394], [7.842982019287234, 47.9890007518099], [7.842967881046519, 47.989001885601624], [7.842954404881823, 47.988926613185015], [7.842966635436227, 47.98892550439905], [7.842951138126466, 47.988876324550915], [7.8429170326175495, 47.98888021137674], [7.842916235085909, 47.98887362056607], [7.842933758694613, 47.988873239097614], [7.842918196963524, 47.988810882788556], [7.842913005868155, 47.988816221118185]]],
16+
"type": "Polygon"
17+
}
18+
}, {
19+
"id": "f68b5b7185ce567e7b77608f379d9227",
20+
"type": "Feature",
21+
"properties": {"id": "f68b5b7185ce567e7b77608f379d9227"},
22+
"geometry": {
23+
"coordinates": [[[7.842988392917448, 47.989070817216856], [7.842994364590311, 47.9890708589827], [7.842995089154925, 47.989076354507546], [7.842894857225332, 47.989082830463445], [7.842894609890891, 47.98909013943472], [7.842808847102873, 47.98909632281757], [7.842804180530294, 47.98907170571593], [7.842750699418929, 47.989078597798965], [7.842749831152673, 47.989075196415826], [7.84281095090995, 47.98906751821437], [7.842815894318846, 47.989089336302385], [7.8428857354135175, 47.98908547103474], [7.842886207759193, 47.98907797046718], [7.842988392917448, 47.989070817216856]]],
24+
"type": "Polygon"
25+
}
26+
}, {
27+
"id": "83dcd215884fa42e184f131b43250568",
28+
"type": "Feature",
29+
"properties": {"id": "83dcd215884fa42e184f131b43250568"},
30+
"geometry": {
31+
"coordinates": [[[7.8427572048898355, 47.98907407559423], [7.842749783671138, 47.989074960603006], [7.842737916042097, 47.98903286545374], [7.842717329748496, 47.989021906646144], [7.842710899001673, 47.988990825640116], [7.842728903477109, 47.98898010569985], [7.842717879087161, 47.98894634933072], [7.842718812420401, 47.988904387041], [7.842696654901573, 47.988893119388734], [7.842690632498176, 47.98886794807589], [7.842707920692845, 47.98885322724638], [7.842702223916348, 47.988823826553244], [7.842708866939603, 47.98882706225362], [7.842714546975088, 47.98885515983093], [7.8426976346108574, 47.98886956064186], [7.842703683541458, 47.98889125128278], [7.842724799159015, 47.98890274742871], [7.842723429962064, 47.9889446943956], [7.842735794413045, 47.988981097170466], [7.842719446747083, 47.98899139436702], [7.8427251435151675, 47.98902079497137], [7.842747113118747, 47.98903222260452], [7.8427572048898355, 47.98907407559423]]],
32+
"type": "Polygon"
33+
}
34+
}, {
35+
"id": "788a20c7c4bb2fdf71b093dd317183c8",
36+
"type": "Feature",
37+
"properties": {"id": "788a20c7c4bb2fdf71b093dd317183c8"},
38+
"geometry": {
39+
"coordinates": [[[7.842702901245218, 47.98882393778641], [7.842771655607464, 47.98881901407401], [7.842788515766216, 47.98881102512661], [7.842835884741049, 47.98880604655088], [7.842847056581604, 47.98881798192721], [7.842918514008318, 47.98881092412725], [7.842912829569514, 47.98881609953571], [7.842843431495112, 47.98882358213217], [7.842832737211353, 47.988813083320906], [7.842789426847958, 47.98881611407518], [7.842773305524702, 47.98882330634234], [7.842708931145694, 47.988826846405914], [7.842702901245218, 47.98882393778641]]],
40+
"type": "Polygon"
41+
}
42+
}
43+
]
44+
}
45+
46+
const wgFreiburgWallsInside: FeatureCollection = {
47+
"type": "FeatureCollection",
48+
"features": [
49+
{
50+
"id": "5c75077878045341706c2108f0274657",
51+
"type": "Feature",
52+
"properties": {"id": "5c75077878045341706c2108f0274657"},
53+
"geometry": {
54+
"coordinates": [[[7.842928452805921, 47.98901035267505], [7.842931414388715, 47.98900963124672], [7.842917225637734, 47.98892738145486], [7.842912679004826, 47.9889282477248], [7.842919050993174, 47.98895868746487], [7.842928452805921, 47.98901035267505]]],
55+
"type": "Polygon"
56+
}
57+
}, {
58+
"id": "7d61c4fd1ddb21d404ab582566a600a9",
59+
"type": "Feature",
60+
"properties": {"id": "7d61c4fd1ddb21d404ab582566a600a9"},
61+
"geometry": {
62+
"coordinates": [[[7.842918246465359, 47.98892613795593], [7.842724134601269, 47.98894319388211], [7.842725298277941, 47.98894555325933], [7.842725423109982, 47.98894523018913], [7.842914631870769, 47.988928181768614], [7.8429174350743125, 47.98892770164707], [7.842918246465359, 47.98892613795593]]],
63+
"type": "Polygon"
64+
}
65+
}, {
66+
"id": "6db7ada0dc3ca5cf3b47157a3ce49a5c",
67+
"type": "Feature",
68+
"properties": {"id": "6db7ada0dc3ca5cf3b47157a3ce49a5c"},
69+
"geometry": {
70+
"coordinates": [[[7.842832287145683, 47.98893488089374], [7.842828434715813, 47.98893510173943], [7.842837540302696, 47.988972214053035], [7.842840480887929, 47.98897208394058], [7.842832287145683, 47.98893488089374]]],
71+
"type": "Polygon"
72+
}
73+
}, {
74+
"id": "edf44500578313fe382c9730d8c807ca",
75+
"type": "Feature",
76+
"properties": {"id": "edf44500578313fe382c9730d8c807ca"},
77+
"geometry": {
78+
"coordinates": [[[7.842928406242834, 47.98900800263979], [7.842928928691094, 47.989009993209066], [7.842871076284069, 47.98901476064489], [7.842871846631709, 47.98901326832407], [7.842928406242834, 47.98900800263979]]],
79+
"type": "Polygon"
80+
}
81+
}, {
82+
"id": "1c875683f05d3c8f9fbe1a17eaac1076",
83+
"type": "Feature",
84+
"properties": {"id": "1c875683f05d3c8f9fbe1a17eaac1076"},
85+
"geometry": {
86+
"coordinates": [[[7.842921325422083, 47.98896817823433], [7.842735962658111, 47.98898172202021], [7.842734803520216, 47.988978140719155], [7.84292137994575, 47.988966288809365], [7.842921325422083, 47.98896817823433]]],
87+
"type": "Polygon"
88+
}
89+
}, {
90+
"id": "dc076d98ef0d593e087f500cb53f9b72",
91+
"type": "Feature",
92+
"properties": {"id": "dc076d98ef0d593e087f500cb53f9b72"},
93+
"geometry": {
94+
"coordinates": [[[7.8428711959886925, 47.98901475424958], [7.842865865924722, 47.988971075060334], [7.842869339633097, 47.9889708373766], [7.842873959305848, 47.98901431494147], [7.8428711959886925, 47.98901475424958]]],
95+
"type": "Polygon"
96+
}
97+
}, {
98+
"id": "4c72ee1140caec872e60260fe2b2f0d3",
99+
"type": "Feature",
100+
"properties": {"id": "4c72ee1140caec872e60260fe2b2f0d3"},
101+
"geometry": {
102+
"coordinates": [[[7.842814940278743, 47.988975444181676], [7.842817495812824, 47.98902458678859], [7.842814959839302, 47.98902416124167], [7.842811670935731, 47.988975392076725], [7.842814940278743, 47.988975444181676]]],
103+
"type": "Polygon"
104+
}
105+
}, {
106+
"id": "d029fa29278f3834bc1e7d04a06a11ab",
107+
"type": "Feature",
108+
"properties": {"id": "d029fa29278f3834bc1e7d04a06a11ab"},
109+
"geometry": {
110+
"coordinates": [[[7.842815349308239, 47.98902360236272], [7.84274634754064, 47.98903050428842], [7.8427467435190295, 47.989032045632484], [7.842817805966689, 47.989024511236664], [7.842815349308239, 47.98902360236272]]],
111+
"type": "Polygon"
112+
}
113+
}, {
114+
"id": "95ee05eb2caffa85dc01eb75c4e852eb",
115+
"type": "Feature",
116+
"properties": {"id": "95ee05eb2caffa85dc01eb75c4e852eb"},
117+
"geometry": {
118+
"coordinates": [[[7.842811489677985, 47.98906885802489], [7.842831891084103, 47.989066457793456], [7.842830931118812, 47.9890633502834], [7.842810926360357, 47.98906719294436], [7.842811489677985, 47.98906885802489]]],
119+
"type": "Polygon"
120+
}
121+
}, {
122+
"id": "26e50467d5893e4e4f0e26c64cbd2070",
123+
"type": "Feature",
124+
"properties": {"id": "26e50467d5893e4e4f0e26c64cbd2070"},
125+
"geometry": {
126+
"coordinates": [[[7.842815637782138, 47.98902503181378], [7.842827746372649, 47.989064254810955], [7.8428310577870946, 47.98906357689128], [7.842817877296028, 47.98902408646828], [7.842815637782138, 47.98902503181378]]],
127+
"type": "Polygon"
128+
}
129+
}, {
130+
"id": "7fdebcf4d9110b2071b2739b7e9bcf90",
131+
"type": "Feature",
132+
"properties": {"id": "7fdebcf4d9110b2071b2739b7e9bcf90"},
133+
"geometry": {
134+
"coordinates": [[[7.842982503457648, 47.98903732140673], [7.84292879609697, 47.98904136851439], [7.842929109642682, 47.98904260448526], [7.842982789624784, 47.98903890820844], [7.842982503457648, 47.98903732140673]]],
135+
"type": "Polygon"
136+
}
137+
}, {
138+
"id": "99d97d2b4e3922e6a5afdf1f153c98bb",
139+
"type": "Feature",
140+
"properties": {"id": "99d97d2b4e3922e6a5afdf1f153c98bb"},
141+
"geometry": {
142+
"coordinates": [[[7.842929052549437, 47.98904249915222], [7.842934388408253, 47.98907467496815], [7.842937778930576, 47.98907477423444], [7.842932854990067, 47.98904228814851], [7.842929052549437, 47.98904249915222]]],
143+
"type": "Polygon"
144+
}
145+
}, {
146+
"id": "db6d1535a9b535a43a745f6d14a888df",
147+
"type": "Feature",
148+
"properties": {"id": "db6d1535a9b535a43a745f6d14a888df"},
149+
"geometry": {
150+
"coordinates": [[[7.842931554492651, 47.989053123340796], [7.84288620802144, 47.989056025056016], [7.842886153198776, 47.98905820007815], [7.842931816619398, 47.989054967237365], [7.842931554492651, 47.989053123340796]]],
151+
"type": "Polygon"
152+
}
153+
}, {
154+
"id": "6f0c0168fe8b4d2eec04cc4537f87761",
155+
"type": "Feature",
156+
"properties": {"id": "6f0c0168fe8b4d2eec04cc4537f87761"},
157+
"geometry": {
158+
"coordinates": [[[7.842886257261824, 47.98907847988502], [7.842885443450768, 47.98905648107916], [7.842886115009961, 47.98905602610171], [7.8428879239788785, 47.98905632917345], [7.842888802499971, 47.989077976375654], [7.842886257261824, 47.98907847988502]]],
159+
"type": "Polygon"
160+
}
161+
}, {
162+
"id": "43fdc8741a8dfa0cf0d8decc1ec613dd",
163+
"type": "Feature",
164+
"properties": {"id": "43fdc8741a8dfa0cf0d8decc1ec613dd"},
165+
"geometry": {
166+
"coordinates": [[[7.842910608701715, 47.98905487359684], [7.842913039931005, 47.98907655070144], [7.842910163935784, 47.989076440424725], [7.84290839145126, 47.9890546321287], [7.842910608701715, 47.98905487359684]]],
167+
"type": "Polygon"
168+
}
169+
}, {
170+
"id": "b9a3dd0c6c5e8c55ed71d9da1db9e87e",
171+
"type": "Feature",
172+
"properties": {"id": "b9a3dd0c6c5e8c55ed71d9da1db9e87e"},
173+
"geometry": {
174+
"coordinates": [[[7.842917158805079, 47.9889275604138], [7.842944891366557, 47.988927394253835], [7.842942916187269, 47.98892508800739], [7.842917900055539, 47.988926308672006], [7.842917158805079, 47.9889275604138]]],
175+
"type": "Polygon"
176+
}
177+
}
178+
]
179+
}
180+
6181
return (
7182
<>
8183
<MapLibreMap
184+
options={
185+
{
186+
style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
187+
zoom:
188+
10,
189+
maxZoom:
190+
24,
191+
center:
192+
[7.842609, 47.997791],
193+
pitch:
194+
60,
195+
bearing:
196+
188
197+
}
198+
}
199+
style={
200+
{
201+
position: "absolute", top:
202+
0, bottom:
203+
0, left:
204+
0, right:
205+
0
206+
}
207+
}
208+
/>
209+
<LasLayer/>
210+
<MlGeoJsonLayer
211+
geojson={wgFreiburgWalls}
212+
type="fill-extrusion"
9213
options={{
10-
style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
11-
zoom: 10,
12-
maxZoom: 24,
13-
center: [7.842609, 47.997791],
14-
pitch: 60,
15-
bearing: 188
214+
paint: {
215+
"fill-extrusion-color": "#ffffff",
216+
"fill-extrusion-height": 2,
217+
"fill-extrusion-opacity": 0.5
218+
}
219+
}}
220+
/>
221+
<MlGeoJsonLayer
222+
geojson={wgFreiburgWallsInside}
223+
type="fill-extrusion"
224+
options={{
225+
paint: {
226+
"fill-extrusion-color": "#ffffff",
227+
"fill-extrusion-height": 1,
228+
"fill-extrusion-opacity": 0.5
229+
}
16230
}}
17-
style={{position: "absolute", top: 0, bottom: 0, left: 0, right: 0}}
18231
/>
19-
<LasLayer/>
20-
{/*<MlFillExtrusionLayer
21-
paint={{
22-
"fill-extrusion-color": "hsla(196,61%,83%,0)",
23-
"fill-extrusion-height": {
24-
property: "render_height",
25-
type: "identity",
26-
},
27-
"fill-extrusion-base": {
28-
property: "render_min_height",
29-
type: "identity",
30-
},
31-
"fill-extrusion-opacity": 0.1,
32-
}}/>*/}
33232
<MlNavigationTools showFollowGpsButton={false}></MlNavigationTools>
34233
</>
35-
);
234+
)
235+
;
36236
}
37237

38238
export default App;

0 commit comments

Comments
 (0)