-
Notifications
You must be signed in to change notification settings - Fork 633
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
503 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<meta name="geometry" content="diagram"> | ||
<link rel="stylesheet" href="./assets/common.css"> | ||
<title>dashline demo</title> | ||
<style> | ||
#map { position:absolute; top:0; bottom:0; width:100%; } | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<div id="map"></div> | ||
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> | ||
<script src="./assets/jquery-3.2.1.min.js"></script> | ||
<script src="./assets/dat.gui.min.js"></script> | ||
<script src="../build/L7.js"></script> | ||
<script> | ||
|
||
const color1 = [ 'rgba(37, 140, 249, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(255, 255, 255, 0.8)' ]; | ||
const scene = new L7.Scene({ | ||
id: 'map', | ||
mapStyle: 'dark', // 样式URL | ||
center: [ 102.602992, 23.107329], | ||
pitch: 15, | ||
zoom: 14.82, | ||
}); | ||
scene.on('loaded', () => { | ||
$.get('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json', data => { | ||
scene.LineLayer({ | ||
zIndex: 2 | ||
}) | ||
.source(data) | ||
.size('ELEV',(value)=>{ | ||
return [2,(value-1000)*7]; | ||
}) | ||
.active(true) | ||
.shape('line') | ||
.style({ | ||
lineType: 'dash', | ||
dashArray: 200, | ||
dashOffset: 0.2, | ||
dashRatio: 0.5 | ||
}) | ||
.color('ELEV',["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse()) | ||
.render(); | ||
}); | ||
}); | ||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,28 @@ | ||
precision highp float; | ||
uniform float u_opacity; | ||
|
||
uniform float u_opacity : 1.0; | ||
uniform float u_dash_offset : 0.0; | ||
uniform float u_dash_ratio : 0.0; | ||
uniform float u_blur : 0.9; | ||
|
||
varying vec4 v_color; | ||
varying float vTime; | ||
varying float v_distance; | ||
varying float v_dash_array; | ||
varying float v_time; | ||
varying vec2 v_normal; | ||
|
||
void main() { | ||
gl_FragColor = v_color; | ||
gl_FragColor = v_color; | ||
#ifdef DASHLINE | ||
gl_FragColor.a *= u_opacity * ceil(mod(v_distance + u_dash_offset, v_dash_array) - (v_dash_array * u_dash_ratio)); | ||
#else | ||
gl_FragColor.a = v_color.a * u_opacity; | ||
#ifdef ANIMATE | ||
gl_FragColor.a *= vTime; | ||
#endif | ||
#endif | ||
#ifdef ANIMATE | ||
gl_FragColor.a *= v_time; | ||
#endif | ||
|
||
// anti-alias | ||
float blur = 1. - smoothstep(u_blur, 1., length(v_normal)); | ||
gl_FragColor.a *= blur; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,48 @@ | ||
precision highp float; | ||
attribute float a_miter; | ||
attribute vec4 a_color; | ||
attribute float a_size; | ||
attribute float a_distance; | ||
attribute float a_dash_array; | ||
|
||
uniform float u_zoom; | ||
uniform float u_time : 0; | ||
uniform float u_activeId : 1; | ||
uniform vec4 u_activeColor : [ 1.0, 0, 0, 1.0 ]; | ||
|
||
varying float v_time; | ||
varying vec4 v_color; | ||
uniform float u_time; | ||
varying float vTime; | ||
uniform float u_activeId; | ||
uniform vec4 u_activeColor; | ||
// animate | ||
varying float v_distance; | ||
varying float v_dash_array; | ||
varying vec2 v_normal; | ||
|
||
#ifdef ANIMATE | ||
uniform float u_duration; // 动画持续时间 | ||
uniform float u_interval; | ||
uniform float u_repeat; | ||
uniform float u_trailLength; | ||
uniform float u_duration : 2.0; | ||
uniform float u_interval : 1.0; | ||
uniform float u_trailLength : 0.2; | ||
#endif | ||
|
||
|
||
void main() { | ||
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; | ||
vec3 pointPos = vec3(position.xy,0.) + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter); | ||
v_color = a_color; | ||
if(pickingId == u_activeId) { | ||
v_color = u_activeColor; | ||
} | ||
#ifdef ANIMATE | ||
//mod(a_distance,0.2) * 5. | ||
float alpa =1.0 - fract( mod(1.0- a_distance,u_interval)* (1.0/u_interval) + u_time / u_duration); | ||
alpa = (alpa + u_trailLength -1.0) / u_trailLength; | ||
vTime = clamp(alpa,0.,1.); | ||
// vTime = (28800. + mod(u_time* 1000.,28800.)- position.z) / 100.; | ||
v_color = a_color; | ||
v_distance = a_distance; | ||
v_dash_array = a_dash_array; | ||
|
||
// anti-alias | ||
v_normal = vec2(normal * sign(a_miter)); | ||
|
||
// extrude along normal | ||
float extrude_scale = pow(2.0, 20.0 - u_zoom); | ||
vec3 offset = vec3(normal * a_size * extrude_scale / 2.0 * a_miter); | ||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy + offset.xy, 0., 1.0); | ||
|
||
#ifdef ANIMATE | ||
float alpha =1.0 - fract( mod(1.0- a_distance,u_interval)* (1.0/u_interval) + u_time / u_duration); | ||
alpha = (alpha + u_trailLength -1.0) / u_trailLength; | ||
v_time = clamp(alpha,0.,1.); | ||
#endif | ||
worldId = id_toPickColor(pickingId); | ||
gl_Position = matModelViewProjection * vec4(pointPos.xy, 0., 1.0); | ||
|
||
// picking | ||
if(pickingId == u_activeId) { | ||
v_color = u_activeColor; | ||
} | ||
worldId = id_toPickColor(pickingId); | ||
} |
Oops, something went wrong.