Skip to content

Commit 3384a08

Browse files
deyihufuzhenn
deyihu
authored and
fuzhenn
committed
update examples
1 parent aa48cdc commit 3384a08

7 files changed

+1041
-36
lines changed

‎demo/bar.html

+23-19
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232
var map = new maptalks.Map("map", {
3333
center: [19.06325670775459, 42.16842479475318],
34-
zoom: 6,
34+
zoom: 3,
3535
pitch: 60,
3636
// bearing: 180,
3737

@@ -54,8 +54,9 @@
5454
var light = new THREE.DirectionalLight(0xffffff);
5555
light.position.set(0, -10, 10).normalize();
5656
scene.add(light);
57-
58-
addBars(scene);
57+
setTimeout(() => {
58+
addBars(scene);
59+
}, 1000);
5960

6061
};
6162
threeLayer.addTo(map);
@@ -68,9 +69,11 @@
6869
fetch('./data/population.json').then((function (res) {
6970
return res.json();
7071
})).then(function (json) {
72+
const time = 'time';
73+
console.time(time);
7174
bars = json.filter(function (dataItem) {
7275
return dataItem[2] > 50;
73-
}).map(function (dataItem) {
76+
}).slice(0, Infinity).map(function (dataItem) {
7477
return {
7578
coordinate: dataItem.slice(0, 2),
7679
height: dataItem[2]
@@ -83,27 +86,27 @@
8386
// radialSegments: 4
8487
}, material);
8588

86-
// tooltip test
87-
bar.setToolTip(d.height * 400, {
88-
showTimeout: 0,
89-
eventsPropagation: true,
90-
dx: 10
91-
});
89+
// // tooltip test
90+
// bar.setToolTip(d.height * 400, {
91+
// showTimeout: 0,
92+
// eventsPropagation: true,
93+
// dx: 10
94+
// });
9295

9396

94-
//infowindow test
95-
bar.setInfoWindow({
96-
content: 'hello world,height:' + d.height * 400,
97-
title: 'message',
98-
animationDuration: 0,
99-
autoOpenOn: false
100-
});
97+
// //infowindow test
98+
// bar.setInfoWindow({
99+
// content: 'hello world,height:' + d.height * 400,
100+
// title: 'message',
101+
// animationDuration: 0,
102+
// autoOpenOn: false
103+
// });
101104

102105

103106
//event test
104107
['click', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) {
105108
bar.on(eventType, function (e) {
106-
console.log(e.type, e);
109+
// console.log(e.type, e);
107110
// console.log(this);
108111
if (e.type === 'mouseout') {
109112
this.setSymbol(material);
@@ -118,6 +121,7 @@
118121
});
119122

120123
console.log(bars);
124+
console.timeEnd(time);
121125
// bars.forEach(function (bar) {
122126
// scene.add(bar.getObject3d());
123127
// });
@@ -186,4 +190,4 @@
186190
</script>
187191
</body>
188192

189-
</html>
193+
</html>

‎demo/bars.html

+7-17
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
light.position.set(0, -10, 10).normalize();
6161
scene.add(light);
6262

63-
scene.add(new THREE.AmbientLight(0xffffff,0.2));
63+
scene.add(new THREE.AmbientLight(0xffffff, 0.2));
6464

6565
// camera.add(new THREE.PointLight(0xffffff, 1));
6666

@@ -130,24 +130,14 @@
130130
colorMap[color].data.push(d);
131131
});
132132
console.log(colorMap);
133+
const time = 'time';
134+
console.time(time);
133135
for (let color in colorMap) {
134136
const { data, material } = colorMap[color];
135-
const count = data.length;
136-
const PAGESIZE = 1000;
137-
if (count > PAGESIZE) {
138-
const page = Math.ceil(data.length / PAGESIZE);
139-
for (let i = 0; i <= page; i++) {
140-
const list = data.slice(i * PAGESIZE, (i + 1) * PAGESIZE);
141-
if (list.length) {
142-
const mesh = threeLayer.toBars(list, { interactive: false }, material);
143-
bars.push(mesh);
144-
}
145-
}
146-
} else {
147-
const mesh = threeLayer.toBars(data, { interactive: false }, material);
148-
bars.push(mesh);
149-
}
137+
const mesh = threeLayer.toBars(data, { interactive: false }, material);
138+
bars.push(mesh);
150139
}
140+
console.timeEnd(time);
151141
bars.forEach(mesh => {
152142
mesh.setToolTip('hello', {
153143
showTimeout: 0,
@@ -293,4 +283,4 @@
293283
</script>
294284
</body>
295285

296-
</html>
286+
</html>

‎demo/box-stack.html

+226
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>box-stack</title>
6+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/randomColor.js"></script>
7+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/dat.gui.min.js"></script>
8+
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
9+
<script type="text/javascript" src="./js/maptalks.js"></script>
10+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
11+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks.three@latest/dist/maptalks.three.js"></script>
12+
<script type="text/javascript"
13+
src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/stats.min.js"></script>
14+
<style>
15+
html,
16+
body {
17+
margin: 0px;
18+
height: 100%;
19+
width: 100%;
20+
}
21+
22+
#map {
23+
width: 100%;
24+
height: 100%;
25+
background-color: #a1a7c7;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id="map"></div>
32+
<script>
33+
34+
var map = new maptalks.Map("map", {
35+
center: [13.416935229170008, 52.529564137540376],
36+
zoom: 13,
37+
pitch: 70,
38+
bearing: 0,
39+
40+
centerCross: true,
41+
doubleClickZoom: false,
42+
// baseLayer: new maptalks.TileLayer('tile', {
43+
// urlTemplate: 'https://mt2.google.cn/maps/vt?lyrs=m&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}',
44+
// subdomains: ['a', 'b', 'c', 'd'],
45+
// // attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
46+
// })
47+
});
48+
map.on('click', e => {
49+
console.log(e.coordinate.toArray());
50+
});
51+
const layer = new maptalks.VectorLayer('layer').addTo(map);
52+
53+
// the ThreeLayer to draw buildings
54+
var threeLayer = new maptalks.ThreeLayer('t', {
55+
forceRenderOnMoving: true,
56+
forceRenderOnRotating: true
57+
});
58+
var stats, ambientLight, pointLight, light;
59+
60+
threeLayer.prepareToDraw = function (gl, scene, camera) {
61+
stats = new Stats();
62+
stats.domElement.style.zIndex = 100;
63+
document.getElementById('map').appendChild(stats.domElement);
64+
65+
light = new THREE.DirectionalLight(0xffffff, 0.4);
66+
light.position.set(0, -10, 10).normalize();
67+
scene.add(light);
68+
ambientLight = new THREE.AmbientLight(0xffffff, 0.44);
69+
scene.add(ambientLight);
70+
pointLight = new THREE.PointLight(0xffffff, 0);
71+
camera.add(pointLight);
72+
73+
addBars();
74+
75+
};
76+
threeLayer.addTo(map);
77+
78+
function randomLnglats() {
79+
return [[13.429362937522342, 52.518205849377495]
80+
, [13.41688993786238, 52.52216099633924]
81+
, [13.417991247928398, 52.53296954185342]
82+
, [13.438154245439819, 52.533321196953096]
83+
, [13.450418871799684, 52.52653968753597]
84+
, [13.390340036780685, 52.51953598324846]
85+
, [13.399921081391199, 52.50920191922407]
86+
, [13.366122901455583, 52.50949703597493]
87+
, [13.365784792637783, 52.51964629275582]
88+
, [13.371429857108524, 52.528732386936014]
89+
, [13.383686384074508, 52.53781463596616]
90+
, [13.40395563186371, 52.540223413847315]
91+
, [13.361485408920998, 52.53916869831616]
92+
, [13.35373758485457, 52.52883597474849]
93+
, [13.355233792792774, 52.519259850666316]
94+
, [13.369548077301943, 52.506940362998336]
95+
, [13.338732610093984, 52.50860998116909]
96+
, [13.341879792058194, 52.52318729489704]
97+
, [13.348448231846305, 52.537668773653735]
98+
, [13.389246594295287, 52.53548698398501]
99+
, [13.38850757718967, 52.53863503802975]
100+
, [13.37609820107241, 52.53114151693521]
101+
, [13.378738663778222, 52.52573619010886]
102+
, [13.37831231443704, 52.52080685602138]
103+
, [13.375035939673353, 52.51971996135225]
104+
, [13.389897299946142, 52.51899162027868]
105+
, [13.391256053067082, 52.52202236946218]
106+
, [13.392790046648201, 52.52844544479157]
107+
, [13.395005819018024, 52.53310464893897]
108+
, [13.401718911909938, 52.52425187302205]
109+
, [13.402397026911103, 52.51909223851541]
110+
, [13.411313379918056, 52.51798115586686]
111+
, [13.415911385871823, 52.51888605929159]
112+
, [13.41824726883442, 52.52171525554482]
113+
, [13.417314242886505, 52.52609578512883]
114+
, [13.412330051141907, 52.5293517938629]
115+
, [13.40936323330186, 52.532595113983206]
116+
, [13.41394381887676, 52.5381488398327]
117+
, [13.419539658615577, 52.540914487009076]
118+
, [13.436661171707783, 52.5407178069876]
119+
, [13.43043712770941, 52.53493464958078]
120+
, [13.426802529616793, 52.53273186525789]
121+
, [13.427190063411217, 52.52859751715991]
122+
, [13.429687741409111, 52.52541511779546]
123+
, [13.420674712370555, 52.52132920963592]
124+
, [13.422291590946202, 52.51771896093092]
125+
, [13.42602853364042, 52.51691591867936]
126+
, [13.4407066690992, 52.517628077846695]
127+
, [13.445125010359334, 52.518379661504895]
128+
, [13.449230960410887, 52.51890206493917]
129+
, [13.452697161728338, 52.522833015637474]
130+
, [13.452150183293384, 52.527206052817604]
131+
, [13.450596418938858, 52.53120611025892]
132+
, [13.449321345704561, 52.53478259925626]
133+
, [13.44991743982439, 52.53800964581964]
134+
, [13.444911438078066, 52.540011719191256]
135+
, [13.433846712878221, 52.53776840443655]
136+
, [13.446110400946054, 52.53745564016762]
137+
, [13.42655484257807, 52.53375521527627]
138+
, [13.410074080611025, 52.52474520696168]
139+
, [13.39700902166237, 52.5211808556779]
140+
, [13.39224970456371, 52.52795947015855]
141+
, [13.397787887746631, 52.527687381119534]
142+
, [13.404781597398824, 52.531570514480876]
143+
, [13.402245452485431, 52.53470324196846]
144+
, [13.420458447249871, 52.53324273115388]
145+
, [13.421777392290323, 52.52903708527933]
146+
, [13.422154850584775, 52.52568580719807]
147+
, [13.425979170707365, 52.5225528451015]
148+
, [13.43384246418384, 52.52106341825615]
149+
, [13.437886395258374, 52.52359528344451]
150+
, [13.43602741073164, 52.52734201890169]
151+
, [13.433894856093502, 52.52999680902715]
152+
, [13.440403956745058, 52.53046767348306]
153+
, [13.443630184112749, 52.5345563486467]
154+
, [13.446005091212669, 52.52604566053341]
155+
, [13.447046979747824, 52.52147908728435]
156+
, [13.438474092805109, 52.52016101093679]
157+
, [13.433534190029263, 52.51375347746014]
158+
, [13.423521933452776, 52.51201966778339]
159+
, [13.408093385343363, 52.51256294330912]
160+
, [13.394147099129441, 52.513520846913224]
161+
, [13.384281207204936, 52.51450177617838]
162+
, [13.37856319851221, 52.515164690078194]
163+
, [13.375558597164172, 52.514388509308475]
164+
, [13.381667785856393, 52.519387857354985]
165+
, [13.382148908463023, 52.52353236618089]
166+
, [13.38475353387787, 52.52724225103057]
167+
, [13.3815086591095, 52.53156487184728]
168+
, [13.380623530434377, 52.53505642591742]
169+
, [13.381915256011666, 52.53591866294866]
170+
, [13.396791162437012, 52.53627471648187]
171+
];
172+
}
173+
174+
var bars = [];
175+
var materials = {};
176+
177+
function getMaterial(color) {
178+
if (!materials[color]) {
179+
materials[color] = new THREE.MeshLambertMaterial({ color });
180+
}
181+
return materials[color];
182+
}
183+
const colors = [
184+
'#0B0030',
185+
'#100243',
186+
'#100243',
187+
'#1B048B',
188+
'#051FB7',
189+
'#0350C1',
190+
'#0350C1',
191+
'#0072C4',
192+
'#0796D3',
193+
'#2BA9DF',
194+
'#30C7C4',
195+
'#6BD5A0',
196+
'#A7ECB2',
197+
'#D0F4CA'
198+
];
199+
function addBars() {
200+
const lnglats = randomLnglats();
201+
lnglats.forEach(lnglat => {
202+
for (let i = 0; i < colors.length; i++) {
203+
const bar = threeLayer.toBox(lnglat, { height: 100, altitude: i * 100, radius: 50, interactive: false }, getMaterial(colors[i]));
204+
bars.push(bar);
205+
}
206+
});
207+
threeLayer.addMesh(bars);
208+
209+
210+
211+
animation();
212+
}
213+
214+
function animation() {
215+
// layer animation support Skipping frames
216+
threeLayer._needsUpdate = !threeLayer._needsUpdate;
217+
if (threeLayer._needsUpdate) {
218+
threeLayer.renderScene();
219+
}
220+
stats.update();
221+
requestAnimationFrame(animation);
222+
}
223+
</script>
224+
</body>
225+
226+
</html>

0 commit comments

Comments
 (0)