你正要离开Mapbox中国网站

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

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

以幻灯片形式播放地图位置。

自动播放纽约市内各区的位置。

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>
<style>
.map-overlay-container {
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
z-index: 1;
}
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
border-radius: 3px;
padding: 10px;
box-shadow:0 1px 2px rgba(0,0,0,0.20);
}
.map-overlay h2,
.map-overlay p {
margin: 0 0 10px;
}
</style>
<div id='map'></div>
<div class='map-overlay-container'>
<div class='map-overlay'>
<h2 id='location-title'></h2>
<p id='location-description'></p>
<small>Text credit: <a target='_blank' href='http://www.nycgo.com/neighborhoods'>nycgo.com</a></small>
</div>
</div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.0315, 40.6989],
maxZoom: 16,
minZoom: 9,
zoom: 9.68
});
var title = document.getElementById('location-title');
var description = document.getElementById('location-description');
var locations = [{
"id": "2",
"title": "The Bronx",
"description": "This is where hip-hop was born, where the Yankees became a dynasty and where you can find New York City's leading zoo and botanical garden.",
"camera": {
center: [-73.8709, 40.8255],
zoom: 12.21,
pitch: 50
}
}, {
"id": "3",
"title": "Brooklyn",
"description": "No matter how hip it looks on TV, NYC's most populous borough is best experienced in person. Read on to find out about live music, Prospect Park, Nets basketball and more.",
"camera": {
center: [-73.9499, 40.6260],
bearing: -8.9,
zoom: 11.68
}
}, {
"id": "1",
"title": "Manhattan",
"description": "Even if you think you know Manhattan—its world-class museums, fine dining and unforgettable views—the borough always has something new and exciting in store.",
"camera": {
center: [-74.0070, 40.7437],
bearing: 25.3,
zoom: 11.5
}
}, {
"id": "4",
"title": "Queens",
"description": "Taste food from around the globe, watch Mets baseball and US Open tennis, see cutting-edge art and more in one of the world's most diverse places.",
"camera": {
center: [-73.8432, 40.6923],
bearing: 36,
zoom: 11.37
}
}, {
"id": "5",
"title": "Staten Island",
"description": "Take a free ferry ride to an island getaway filled with historic architecture, stunning views, gardens and many family-friendly attractions.",
"camera": {
center: [-74.1991, 40.5441],
bearing: 28.4,
zoom: 11.64
}
}, {
"title": "Boroughs of new york",
"description": "New York City is made up of five boroughs: the Bronx, Brooklyn, Manhattan, Queens and Staten Island. Each one has enough attractions—and enough personality—to be a city all its own.",
"camera": {
center: [-74.0315, 40.6989],
zoom: 9.68,
bearing: 0,
pitch: 0
}
}];
function highlightBorough(code) {
// Only show the polygon feature that cooresponds to `borocode` in the data
map.setFilter('highlight', ["==", "borocode", code]);
}
function playback(index) {
title.textContent = locations[index].title;
description.textContent = locations[index].description;
highlightBorough(locations[index].id ? locations[index].id : '');
// Animate the map position based on camera properties
map.flyTo(locations[index].camera);
map.once('moveend', function() {
// Duration the slide is on screen after interaction
window.setTimeout(function() {
// Increment index
index = (index + 1 === locations.length) ? 0 : index + 1;
playback(index);
}, 3000); // After callback, show the location for 3 seconds.
});
}
// Display the last title/description first
title.textContent = locations[locations.length - 1].title;
description.textContent = locations[locations.length - 1].description;
map.on('load', function() {
map.addLayer({
"id": "highlight",
"type": "fill",
"source": {
"type": "vector",
"url": "mapbox://mapbox.8ibmsn6u"
},
"source-layer": "original",
"paint": {
"fill-color": "#fd6b50",
"fill-opacity": 0.25
},
"filter": ["==", "borocode", ""]
}, 'settlement-subdivision-label'); // Place polygon under the neighborhood labels.
// Start the playback animation for each borough
playback(0);
});
</script>
</body>
</html>