-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathmapbox-customlayer-demo.html
126 lines (119 loc) · 4.26 KB
/
mapbox-customlayer-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a custom style layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="./lib/mapboxgl-v1.6.js"></script>
<link href="./lib/mapbox.gl-v1.6.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
} ;
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoibGltemdpc2VyIiwiYSI6ImNqZXFvemJlcjB1bWYyd2x0eGxjeGdvcXIifQ.gSsj63R-2VZV7L7mpSw0Uw';
var map = (window.map = new mapboxgl.Map({
container: 'map',
zoom: 0,
center: [7.5, 58],
style: 'mapbox://styles/mapbox/dark-v10',
renderWorldCopies: false,
antialias: true
}));
animTime = 0
var highlightLayer = {
id: 'highlight',
type: 'custom',
onAdd: function (map, gl) {
var vertexSource = `
uniform mat4 u_matrix;
uniform float anim;
attribute vec2 a_pos;
void main() {
gl_Position = u_matrix * vec4(a_pos,anim , 1.0);
}
`
var fragmentSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
}
`
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);
this.aPos = gl.getAttribLocation(this.program, 'a_pos');
this.unifromAnim = gl.getUniformLocation(this.program, "anim");
var helsinki = mapboxgl.MercatorCoordinate.fromLngLat({
lng: -180.00,
lat: 85
});
var berlin = mapboxgl.MercatorCoordinate.fromLngLat({
lng: 0,
lat: 0
});
var kyiv = mapboxgl.MercatorCoordinate.fromLngLat({
lng: -180.00,
lat: -85
});
this.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
helsinki.x,
helsinki.y,
berlin.x,
berlin.y,
kyiv.x,
kyiv.y
]),
gl.STATIC_DRAW
);
},
render: function (gl, matrix) {
gl.useProgram(this.program);
gl.uniformMatrix4fv(
gl.getUniformLocation(this.program, 'u_matrix'),
false,
matrix
);
animTime += 0.002;
animTime = animTime % 0.2;
gl.uniform1f(this.unifromAnim, animTime);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.enableVertexAttribArray(this.aPos);
gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
map.triggerRepaint();
return true;
}
};
map.on('load', function () {
map.addLayer(highlightLayer, 'building');
});
map.on('click', function (e) {
});
</script>
</body>
</html>