Skip to content

Commit a717fd5

Browse files
deyihudeyihu
authored
add geojson has altitude demo (#165)
1 parent 1d8f28c commit a717fd5

5 files changed

Lines changed: 2520 additions & 0 deletions

File tree

‎config/examples.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2696,6 +2696,13 @@ const examples = [
26962696
cn: "设置纹理",
26972697
en: "Set textures"
26982698
}
2699+
},
2700+
{
2701+
name: "altitude",
2702+
title: {
2703+
cn: "数据里包含海拔值",
2704+
en: "geojson has altitude"
2705+
}
26992706
}
27002707
]
27012708
},

‎public/codes/3d/line-3d-style/altitude/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
html,
2+
body {
3+
width: 100%;
4+
height: 100%;
5+
margin: 0px;
6+
}
7+
8+
.container {
9+
width: 100%;
10+
height: 100%;
11+
}

‎public/codes/3d/line-3d-style/altitude/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div id="map" class="container"></div>

‎public/codes/3d/line-3d-style/altitude/index.js‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
const map = new maptalks.Map("map", {
2+
center: [-73.98903845348661, 40.72259059625898],
3+
zoom: 17.8,
4+
bearing: -54,
5+
pitch: 20.8,
6+
lights: {
7+
directional: {
8+
direction: [1, 0, -1],
9+
color: [1, 1, 1]
10+
},
11+
ambient: {
12+
resource: {
13+
url: {
14+
front: "{res}/hdr/gradient/front.png",
15+
back: "{res}/hdr/gradient/back.png",
16+
left: "{res}/hdr/gradient/left.png",
17+
right: "{res}/hdr/gradient/right.png",
18+
top: "{res}/hdr/gradient/top.png",
19+
bottom: "{res}/hdr/gradient/bottom.png"
20+
},
21+
prefilterCubeSize: 32
22+
},
23+
exposure: 1,
24+
hsv: [0, 0.34, 0],
25+
orientation: 0
26+
}
27+
}
28+
});
29+
30+
/**start**/
31+
32+
33+
const style = {
34+
style: [
35+
{
36+
name: 'building-test',
37+
filter: ["all", ["==", "$type", "Polygon"]
38+
],
39+
renderPlugin: {
40+
type: "lit",
41+
dataConfig: {
42+
type: "3d-extrusion",
43+
altitudeProperty: "height",
44+
minHeightProperty: "min_height",
45+
altitudeScale: 1,
46+
defaultAltitude: 10,
47+
topThickness: 0,
48+
top: true,
49+
side: true
50+
},
51+
sceneConfig: {}
52+
},
53+
symbol: {
54+
material: {
55+
baseColorFactor: [1, 1, 1, 1],
56+
roughnessFactor: 1,
57+
metallicFactor: 1
58+
}
59+
}
60+
},
61+
{
62+
name: 'bridge-test',
63+
filter: ["all", ["==", "$type", "LineString"]
64+
],
65+
renderPlugin: {
66+
dataConfig: {
67+
type: "line"
68+
},
69+
sceneConfig: {
70+
depthFunc: '<=',
71+
depthMask: true
72+
},
73+
type: "line"
74+
},
75+
76+
symbol: {
77+
lineColor: [1, 1, 1, 1],
78+
linePatternFile: "{res}/patterns/road1.jpg",
79+
lineWidth: {
80+
type: "exponential",
81+
default: 2,
82+
stops: [
83+
[14, 1],
84+
[15, 4],
85+
[16, 8],
86+
[17, 15],
87+
[18, 22],
88+
[20, 35]
89+
]
90+
}
91+
}
92+
},
93+
{
94+
name: 'sprite-test',
95+
filter: ["all", ["==", "$type", "Point"]
96+
],
97+
renderPlugin: {
98+
dataConfig: {
99+
type: "point"
100+
},
101+
sceneConfig: {
102+
depthMask: true,
103+
depthFunc: '<=',
104+
},
105+
type: "icon"
106+
},
107+
108+
symbol: {
109+
markerType: 'ellipse',
110+
markerWidth: 10,
111+
markerHeight: 10,
112+
markerDy: -2
113+
}
114+
}
115+
]
116+
};
117+
118+
const geovtLayer = new maptalks.GeoJSONVectorTileLayer("geo", {
119+
data: "{res}/geojson/bridge.geojson",
120+
features: true,
121+
pickingGeometry: true,
122+
style
123+
});
124+
125+
geovtLayer.on("dataload", (e) => {
126+
map.fitExtent(e.extent);
127+
});
128+
129+
map.on('click', e => {
130+
const result = geovtLayer.identify(e.coordinate);
131+
const len = result.length;
132+
if (!len) {
133+
return;
134+
}
135+
console.log(result);
136+
showInfoWindow(result[len - 1]);
137+
138+
});
139+
140+
function showInfoWindow(item) {
141+
const { coordinate, data } = item;
142+
143+
infoWindow.setTitle(`feature.id=${data.feature.id}`);
144+
const content = JSON.stringify((data.feature || {}).properties);
145+
// console.log(content);
146+
infoWindow.setContent(content);
147+
infoWindow.show(new maptalks.Coordinate(coordinate));
148+
}
149+
150+
151+
var options = {
152+
'title': 'Map\' InfoWindow',
153+
'content': 'Click on map to reopen',
154+
155+
// 'autoPan': true,
156+
// 'width': 300,
157+
// 'minHeight': 120,
158+
// 'custom': false,
159+
'autoOpenOn': null, //set to null if not to open window when clicking on map
160+
//'autoCloseOn' : 'click'
161+
};
162+
var infoWindow = new maptalks.ui.InfoWindow(options);
163+
infoWindow.addTo(map);
164+
165+
/**end**/
166+
167+
const groupLayer = new maptalks.GroupGLLayer("group", [geovtLayer], {
168+
sceneConfig: {
169+
environment: {
170+
enable: true,
171+
mode: 1,
172+
level: 0,
173+
brightness: 0
174+
},
175+
shadow: {
176+
type: "esm",
177+
enable: true,
178+
quality: "high",
179+
opacity: 0.11,
180+
color: [0, 0, 0],
181+
blurOffset: 1
182+
},
183+
postProcess: {
184+
enable: true,
185+
antialias: {
186+
enable: true,
187+
taa: true,
188+
jitterRatio: 0.25
189+
},
190+
ssr: {
191+
enable: true
192+
},
193+
bloom: {
194+
enable: true,
195+
threshold: 0,
196+
factor: 0.2,
197+
radius: 0.105
198+
},
199+
ssao: {
200+
enable: true,
201+
bias: 0.08,
202+
radius: 0.08,
203+
intensity: 1.5
204+
},
205+
sharpen: {
206+
enable: false,
207+
factor: 0.2
208+
}
209+
},
210+
ground: {
211+
enable: true,
212+
renderPlugin: {
213+
type: "fill"
214+
},
215+
symbol: {
216+
polygonFill: [1, 1, 1, 1]
217+
}
218+
}
219+
}
220+
});
221+
groupLayer.addTo(map);

0 commit comments

Comments
 (0)