你正要离开Mapbox中国网站

并非所有mapbox.com的服务在中国提供

Examples
Layers (30)
拉伸多边形以绘制3D室内地图用3D形式呈现建筑物添加3D模型调整图层不透明度为一系列图像添加动画效果为线添加动画效果为点添加动画效果按照缩放级别改变建筑颜色更改标注的大小写显示具有自定义属性的HTML聚类创建样式聚类使用按钮更改图层颜色添加自定义样式图层给圆添加数据驱动属性的样式给线添加数据驱动属性的样式。显示多种文本格式并设置其样式为多边形添加图案在标签下添加新图层绘制 GeoJSON 点创建热力图图层添加晕暄使用表达式创建渐变色线条添加 GeoJSON 多边形添加 GeoJSON 线设置海洋深度数据样式改变行政边界世界观根据缩放级别更新等值线图层显示和隐藏图层变量标签位置可视化人口密度

添加自定义样式图层

使用自定义样式图层来渲染自定义WebGL内容。

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>添加自定义样式图层</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.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 = '<your access token here>';
var map = window.map = new mapboxgl.Map({
container: 'map',
zoom: 3,
center: [7.5, 58],
style: 'mapbox://styles/mapbox/light-v10'
});
var highlightLayer = {
id: 'highlight',
type: 'custom',
onAdd: function (map, gl) {
var vertexSource = "" +
"uniform mat4 u_matrix;" +
"attribute vec2 a_pos;" +
"void main() {" +
" gl_Position = u_matrix * vec4(a_pos, 0.0, 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");
var helsinki = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 25.004, lat: 60.239 });
var berlin = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 13.403, lat: 52.562 });
var kyiv = mapboxgl.MercatorCoordinate.fromLngLat({ lng: 30.498, lat: 50.541 });
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);
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.on('load', function() {
map.addLayer(highlightLayer, 'building');
});
</script>
</body>
</html>