Skip to content

Commit ade0fcd

Browse files
author
bingliu
committed
增加scanEffect和effect的支持
1 parent 2fe7a3a commit ade0fcd

7 files changed

Lines changed: 233 additions & 0 deletions

File tree

‎config/examples.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2883,6 +2883,13 @@ const examples = [
28832883
cn: "扫描光效果",
28842884
en: "scan effect ring"
28852885
}
2886+
},
2887+
{
2888+
name: "effect",
2889+
title: {
2890+
cn: "序列帧特效",
2891+
en: "squence effect"
2892+
}
28862893
}
28872894
]
28882895
},

‎public/codes/3d/post-process/effect/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+
margin: 0px;
4+
height: 100%;
5+
width: 100%;
6+
}
7+
8+
.container {
9+
width: 100%;
10+
height: 100%;
11+
}

‎public/codes/3d/post-process/effect/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script
2+
type="text/javascript"
3+
src="https://maptalks.com/api/transcoders.draco.js"
4+
></script>
5+
6+
<div id="map" class="container"></div>

‎public/codes/3d/post-process/effect/index.js‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
const map = new maptalks.Map("map", {
2+
center: [-73.98170407, 40.76104242],
3+
zoom: 15.141217633928335,
4+
bearing: -160.4,
5+
pitch: 58.45,
6+
lights: {
7+
directional: {
8+
direction: [0.5, 0, -1],
9+
color: [1, 1, 1]
10+
},
11+
ambient: {
12+
exposure: 0.787,
13+
hsv: [0, 0, -0.298],
14+
orientation: 0
15+
}
16+
}
17+
});
18+
19+
const vtStyle = [
20+
{
21+
filter: ["all", ["==", "$layer", "entertainment"], ["==", "$type", "Polygon"]],
22+
renderPlugin: {
23+
dataConfig: {
24+
type: "fill"
25+
},
26+
sceneConfig: {},
27+
type: "fill"
28+
},
29+
symbol: {
30+
polygonFill: [0.5725490196078431, 0.6980392156862745, 0.5450980392156862, 1]
31+
}
32+
},
33+
{
34+
filter: ["all", ["==", "$layer", "entertainment"], ["==", "$type", "Polygon"]],
35+
renderPlugin: {
36+
dataConfig: {
37+
type: "line"
38+
},
39+
sceneConfig: {},
40+
type: "line"
41+
},
42+
symbol: {
43+
lineColor: [0.73, 0.73, 0.73, 1],
44+
lineWidth: 2
45+
}
46+
},
47+
{
48+
filter: ["all", ["==", "$layer", "building"], ["==", "$type", "Polygon"]],
49+
renderPlugin: {
50+
type: "lit",
51+
dataConfig: {
52+
type: "3d-extrusion",
53+
altitudeProperty: "height",
54+
minHeightProperty: "min_height",
55+
altitudeScale: 1,
56+
defaultAltitude: 10,
57+
topThickness: 0,
58+
top: true,
59+
side: true
60+
},
61+
sceneConfig: {
62+
animation: null,
63+
animationDuration: 800
64+
}
65+
},
66+
symbol: {
67+
bloom: false,
68+
ssr: false,
69+
polygonOpacity: 1,
70+
material: {
71+
baseColorFactor: [1, 1, 1, 1],
72+
hsv: [0, 0, -0.32],
73+
baseColorIntensity: 1.532,
74+
roughnessFactor: 1,
75+
metallicFactor: 0,
76+
clearCoatIor: 1.4,
77+
clearCoatRoughnessFactor: 0.04,
78+
emissiveTexture: "{res}/textures/897/1.jpg",
79+
emissiveFactor: [0.9333333333333333, 0.9254901960784314, 0.9607843137254902],
80+
emitColorFactor: 0.31
81+
}
82+
}
83+
},
84+
{
85+
filter: ["all", ["==", "$layer", "secondary-road"], ["==", "$type", "LineString"]],
86+
renderPlugin: {
87+
dataConfig: {
88+
type: "line"
89+
},
90+
sceneConfig: {},
91+
type: "line"
92+
},
93+
symbol: {
94+
lineColor: [1, 1, 1, 1],
95+
linePatternFile: "{res}/patterns/d4b.jpg",
96+
lineWidth: {
97+
type: "exponential",
98+
default: 2,
99+
stops: [
100+
[14, 2],
101+
[15, 4],
102+
[16, 10],
103+
[17, 20],
104+
[18, 50],
105+
[20.7, 100],
106+
[22, 200]
107+
]
108+
}
109+
}
110+
}
111+
];
112+
113+
const vtLayer = new maptalks.VectorTileLayer("vt", {
114+
urlTemplate: "http://tile.maptalks.com/test/planet-single/{z}/{x}/{y}.mvt",
115+
style: vtStyle
116+
});
117+
118+
const effectLayer = new maptalks.EffectLayer("effect");
119+
const center = map.getCenter();
120+
/**start**/
121+
const sceneConfig = {
122+
environment: {
123+
enable: true,
124+
mode: 1,
125+
level: 3,
126+
brightness: 0.489
127+
},
128+
shadow: {
129+
type: "esm",
130+
enable: true,
131+
quality: "high",
132+
opacity: 0.5,
133+
color: [0, 0, 0],
134+
blurOffset: 1
135+
},
136+
ground: {
137+
enable: true,
138+
renderPlugin: {
139+
type: "fill"
140+
},
141+
symbol: {
142+
polygonFill: [0.803921568627451, 0.803921568627451, 0.803921568627451, 1],
143+
polygonOpacity: 1
144+
}
145+
}
146+
};
147+
const effectMarker1 = new maptalks.EffectMarker(map.getCenter(), {
148+
symbol: {
149+
url: 'plane',
150+
shadow: false,
151+
textureUrl: '{res}/images/sequence/explosion.png',
152+
type: 'uv',
153+
loop: true,
154+
doubleSided: true,
155+
anchorZ: 'bottom',
156+
// rotationX: 90,
157+
translateZ: 0,
158+
scaleX: 5,
159+
scaleY: 5,
160+
scaleZ: 5,
161+
uniforms: {
162+
width: 8,
163+
height: 4
164+
}
165+
}
166+
}).addTo(effectLayer);
167+
const effectMarker2 = new maptalks.EffectMarker(map.getCenter().add(0.01, 0), {
168+
symbol: {
169+
url: 'plane',
170+
shadow: false,
171+
textureUrl: '{res}/images/sequence/skill.png',
172+
type: 'uv',
173+
loop: true,
174+
doubleSided: true,
175+
anchorZ: 'bottom',
176+
// rotationX: 90,
177+
translateZ: 0,
178+
scaleX: 5,
179+
scaleY: 5,
180+
scaleZ: 5,
181+
uniforms: {
182+
width: 8,
183+
height: 5
184+
}
185+
}
186+
}).addTo(effectLayer);
187+
const effectMarker3 = new maptalks.EffectMarker(map.getCenter().add(0.005, 0), {
188+
symbol: {
189+
url: 'plane',
190+
shadow: false,
191+
textureUrl: '{res}/images/sequence/fly.png',
192+
type: 'uv',
193+
loop: true,
194+
doubleSided: true,
195+
anchorZ: 'bottom',
196+
scaleX: 358 / 133,
197+
// rotationX: 90,
198+
translateZ: 500,
199+
uniforms: {
200+
width: 6,
201+
height: 4
202+
}
203+
}
204+
}).addTo(effectLayer);
205+
const groupGLLayer = new maptalks.GroupGLLayer("gl", [vtLayer, effectLayer], {
206+
sceneConfig
207+
}).addTo(map);
208+
/**end**/
209+

‎public/resources/images/sequence/explosion.png‎

8.34 MB
Loading

‎public/resources/images/sequence/fly.png‎

357 KB
Loading

‎public/resources/images/sequence/skill.png‎

11.8 MB
Loading

0 commit comments

Comments
 (0)