一天速成Mapbox,掌握以下功能:
-
mapbox起步
-
初始化地球
-
漫游flyTo
-
设置不同的layer-style
-
地形数据加载
-
地球⾃动旋转
-
Map点击事件控制地球旋转
-
沙盘-⽩天&⿊夜切换
-
地图控件
-
geojson数据加载
-
addSource
mapbox视频:
mapbox源代码:
mapbox笔记:
内容介绍
Mapbox 是⼀个可以创建各种⾃定义地图的⽹站,如 Pinterest、Evernote、Github、500px 等⼤ 牌都使⽤Mapbox创建⾃⼰的地图,Mapbox宣称要构建世界上最漂亮的地图。
已为 Foursquare、Pinterest、Evernote、⾦融时报、天⽓频道、优步科技等公司的⽹站提供了 订制在线地图服务。
Mapbox的特点
Mapbox 地图有4个特点:全、炫、快、美。
初始化地球
2-1、初始地图
1、安装依赖cnd
2、导⼊token,并设置token 3、实例化map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1. 0">
<title>Document</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.j s'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.cs s' rel='stylesheet' />
<style>
*{margin:0;padding:0}
#map{
width:100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
/* 初始地图 */
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJ
jbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style UR
L
center: [114.30,30.50],
zoom:12,
projection:'globe'
});
</script>
</body>
</html>
2-2、设置大气层
map.on("style.load",()=>{
map.setFog({
/* 设置⼤⽓层的颜⾊ */
"color":"#dc9f9f",
/* ⼤⽓层之上的颜⾊ */
"high-color":"#245bde", //定制化星空的颜⾊
"space-color":"#333" })
})
完整版PDF+视频教程+源码领取方式:
加小助手微信(whxzdjy)备注mapbox