mapbox官网：www.mapbox.com/
按照上图的步骤进入mapbox js手册：docs.mapbox.com/mapbox-gl-j… 。
1. mapbox代码片段
1.1 初始化地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初始化mapbox地图</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.Bk59W_pB_Riwe6o-MneRLA";
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 9, // starting zoom
});
</script>
</body>
</html>
1.2 使用高德地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用高德地图</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: gaode,
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe", // 将地图设置成球形
});
map.on("style.load", () => {
map.setFog({
// map.setFog可以设置背景
color: "red",
// 设置高空颜色
"high-color": "#fafafa",
// 设置星空颜色
"star-intensity": "green",
});
});
</script>
</body>
</html>
1.3 相机
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>相机</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: gaode,
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe", // 将地图设置成球形
// 俯仰角， 0-90的取值范围，默认值是0
pitch: 60,
});
map.on("style.load", () => {
map.setFog({});
// 禁止双击地图放大
map.doubleClickZoom.disable();
});
// 点击获取和设置俯仰角
map.on("click", () => {
let pitch = map.getPitch();
pitch += 10;
map.setPitch(pitch);
});
</script>
</body>
</html>
1.4 水平角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>水平角</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: gaode,
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe", // 将地图设置成球形
// 俯仰角， 0-90的取值范围，默认值是0, 上下
pitch: 90,
// 水平角， 左右
bearing: 60,
});
map.on("style.load", () => {
map.setFog({});
// 禁止双击地图放大
map.doubleClickZoom.disable();
});
// 点击获取和设置水平角
map.on("click", () => {
let res = map.getBearing();
res += 10;
map.setBearing(res);
});
</script>
</body>
</html>
1.5 沙盘效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>沙盘效果</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: gaode,
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe", // 将地图设置成球形
// 俯仰角， 0-90的取值范围，默认值是0, 上下
pitch: 70,
// 水平角， 左右
bearing: 0,
});
map.on("style.load", () => {
map.setFog({});
// 禁止双击地图放大
map.doubleClickZoom.disable();
});
// 点击实现沙盘效果
map.on("click", () => {
setInterval(() => {
let bearing = map.getBearing();
bearing += 10;
map.setBearing(bearing);
}, 50);
});
</script>
</body>
</html>
1.6 漫游
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>漫游</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#btn {
position: fixed;
width: 200px;
height: 50px;
top: 20px;
right: 30px;
z-index: 100;
}
</style>
</head>
<body>
<button id="btn" onclick="resetMap()">复位地图</button>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: gaode,
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe", // 将地图设置成球形
// 俯仰角， 0-90的取值范围，默认值是0, 上下
pitch: 70,
// 水平角， 左右
bearing: 0,
});
map.on("style.load", () => {
map.setFog({});
});
// 对地图执行点击事件，飞行到武汉，pitch: 90
map.on("click", () => {
map.flyTo({
center: [114.31, 30.52],
zoom: 14,
pitch: 90,
bearing: 0,
speed: 0.5,
});
});
function resetMap() {
map.flyTo({
center: [114.31, 30.52],
zoom: 1.5,
pitch: 0,
bearing: 0,
speed: 0.5,
});
}
</script>
</body>
</html>
1.7 mapbox底图切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mapbox底图切换</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#btn {
position: fixed;
width: 200px;
height: 50px;
top: 20px;
right: 30px;
z-index: 100;
}
</style>
</head>
<body>
<button id="btn" onclick="resetMap()">街景</button>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 14, // starting zoom
projection: "globe", // 将地图设置成球形
// 俯仰角， 0-90的取值范围，默认值是0, 上下
pitch: 60,
// 水平角， 左右
bearing: 0,
});
map.on("style.load", () => {
map.setFog({});
});
// 街景底图 和 高德底图 切换使用
var isToggle = false;
var btn = document.getElementById("btn");
btn.click = function () {
isToggle = !isToggle;
if (isToggle) {
map.setStyle(gaode);
this.innerHTML = "高德地图";
} else {
map.setStyle("mapbox://styles/mapbox/streets-v12");
this.innerHTML = "街景地图";
}
};
</script>
</body>
</html>
1.8 展示地形数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>展示地形数据 dem-数据高程模型</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
});
map.on("style.load", () => {
map.setFog({});
// 官方提供的dem数据
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14,
});
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
});
</script>
</body>
</html>
1.9 mapbox展示地球自转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mapbox展示地球自转</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe",
});
map.on("style.load", () => {
map.setFog({});
});
function rorateMap() {
// 获取经度
let center = map.getCenter();
center.lng += 10;
map.easeTo({
center,
duration: 1000,
easing: (n) => n,
});
}
rorateMap();
map.on("moveend", () => {
console.log("end");
rorateMap();
});
// 实现地球自转
// map.on("click", () => {
// setInterval(() => {
// // 获取经度
// let center = map.getCenter();
// center.lng += 10;
// map.setCenter(center);
// }, 50);
// });
</script>
</body>
</html>
1.10 展示点击事件控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>展示点击事件控制</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: "mapbox://styles/mapbox/streets-v12",
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe",
});
map.on("style.load", () => {
map.setFog({});
});
// 设置用户是否接触
let isUserInterface = false;
function rorateMap() {
if (!isUserInterface && map.getZoom() < 4) {
// 获取经度
let center = map.getCenter();
center.lng += 10;
map.easeTo({
center,
duration: 1000,
easing: (n) => n,
});
}
}
map.on("moveend", () => {
rorateMap();
});
rorateMap();
map.on("click", (e) => {
isUserInterface = !isUserInterface;
if (isUserInterface) {
map.stop();
} else {
rorateMap();
}
});
</script>
</body>
</html>
1.11 沙盘效果-街景山脉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>沙盘效果-街景山脉</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: "mapbox://styles/mapbox/streets-v12",
center: [6.6301, 45.35625], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 12, // starting zoom
projection: "globe", // 将地图设置成球形
// 俯仰角， 0-90的取值范围，默认值是0, 上下
pitch: 80,
});
map.on("style.load", () => {
map.setFog({});
// 官方提供的dem数据
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14,
});
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
});
function rorateMap() {
let bearing = map.getBearing();
bearing += 10;
map.easeTo({
bearing,
duration: 500,
easing: (n) => n,
});
if (bearing < 0) {
// 黑夜
map.setFog({
range: [-1, 2],
"horizon-blend": 0.3,
"high-color": "#c6d9ff",
"space-color": "#0B1026",
"star-intensity": 0.0,
});
} else {
// 白天
map.setFog({
range: [-1, 2],
"horizon-blend": 0.3,
"high-color": "#c6d9ff",
"space-color": "#d8f2ff",
"star-intensity": 0.0,
});
}
}
// 点击实现沙盘效果
map.on("moveend", () => {
rorateMap();
});
setTimeout(() => {
rorateMap();
}, 500);
</script>
</body>
</html>
1.12 mapbox展示控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mapbox展示控件</title>
<!-- 1. 导入mapbox的依赖 -->
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- 2. 设置地图容器的挂载点 -->
<div id="map"></div>
<script>
// 实例化地图
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken =
"pk.eyJ1IjoibWFuMzI1IiwiYSI6ImNsdHpqYzBodTAwbmMybHBkN216MTVncnQifQ.ey7k-MFmzP02tDv2Tb-GFA";
const gaode = {
version: 8,
glyphs: "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
sources: {
"gd-satellite": {
type: "raster",
tiles: [
// 高德地图 卫星地图
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
],
tileSize: 256,
},
},
layers: [
{
id: "gl-satellite",
type: "raster",
source: "gl-satellite",
layout: {
visibility: "none",
},
minzoom: 0,
maxzoom: 22,
},
],
};
const map = new mapboxgl.Map({
container: "map", // container ID
// style是设置地图图层的
style: gaode,
center: [-74.5, 40], // starting position [lng, lat]. Note that lat must be set between -90 and 90
zoom: 1.5, // starting zoom
projection: "globe", // 将地图设置成球形
});
map.on("style.load", () => {
map.setFog({});
// 全屏控件
map.addControl(new mapboxgl.FullscreenControl(), "top-left");
// 放大缩小 导航
map.addControl(new mapboxgl.NavigationControl());
});
</script>
</body>
</html>
Mapbox和高德地图是两个不同的地图服务平台，它们各自有不同的特点和功能：
-
自定义能力：
- Mapbox以其强大的自定义能力著称，用户可以通过Mapbox Studio创建和编辑地图样式，支持高度定制化的设计。
- 高德地图虽然也提供自定义地图服务，但更专注于导航指路功能，其自定义能力可能不如Mapbox强大。
-
服务范围：
- Mapbox提供全球地图服务，其数据更新方式属于定期更新，可能存在一定的过时性。
- 高德地图在中国有广泛的城市覆盖，提供400多个城市的详细路线，且在无网络的情况下也可以进行离线使用。
-
技术特点：
- Mapbox使用矢量数据渲染地图，支持矢量瓦片（vector tiles）技术，这意味着地图数据是动态加载和渲染的，提供更快的响应速度和更小的数据量。
- 高德地图则提供实时路况信息，帮助用户避开出行拥堵路段，且有AR功能和锁屏导航等特点。
-
开源性：
- Mapbox的Web SDK是开源的，允许开发者免费使用并根据需要进行修改。
- 高德地图提供的服务主要是商业化的，不开源。
-
数据和分析：
- Mapbox提供LBS服务、自动驾驶、自有数据（包括边界、交通数据、人流移动数据）以及车机服务。
- 高德地图则网罗全国美食、酒店、演出、商场、优惠等各种生活信息，并提供实时路况信息。
-
用户体验：
- Mapbox的用户体验侧重于地图的美学和定制化，适合需要高度定制地图样式的企业开发者。
- 高德地图的用户体验更全面，包括长辈地图、自驾游定制、智慧景区导览和室内导航等贴心服务。
总的来说，Mapbox更适合需要高度自定义地图和全球服务的场景，而高德地图则更适合在中国境内需要详细导航和生活信息服务的场景。
Mapbox和高德地图使用的经纬度定位系统并不完全相同。以下是两者的主要区别：
-
坐标系统：
- Mapbox主要基于WGS84坐标系统，这是国际上广泛使用的全球定位系统坐标标准。
- 高德地图使用的是GCJ02坐标系统，也称为火星坐标系统，这是中国国家测绘地理信息局采用的一种坐标系统，与WGS84坐标系统存在偏差。
-
定位精度和适用性：
- WGS84坐标系统在全球范围内通用，适用于需要全球定位的场景。
- GCJ02坐标系统主要在中国国内使用，对于中国境内的定位更为精准，符合中国法律法规的要求。
-
坐标转换：
- 在实际应用中，可能需要在Mapbox和高德地图之间进行坐标转换，因为两者的坐标系统不同。例如，从WGS84坐标转换为GCJ02坐标，或者反之。
-
服务范围和特点：
- Mapbox提供全球地图服务，强调自定义能力和国际化。
- 高德地图在中国有广泛的城市覆盖，提供详细的路线和实时路况信息，更适合中国境内的导航和定位服务。
总结来说，Mapbox和高德地图在经纬度定位上的主要区别在于它们使用的坐标系统不同，这影响了它们的定位精度和适用场景。在全球范围内，Mapbox可能更适合，而在中国境内，高德地图则因其精准的定位和丰富的本地数据而更受青睐。
Mapbox和高德地图使用的经纬度定位系统并不完全相同。以下是两者的主要区别：
-
坐标系统：
- Mapbox主要基于WGS84坐标系统，这是国际上广泛使用的全球定位系统坐标标准。
- 高德地图使用的是GCJ02坐标系统，也称为火星坐标系统，这是中国国家测绘地理信息局采用的一种坐标系统，与WGS84坐标系统存在偏差。
-
定位精度和适用性：
- WGS84坐标系统在全球范围内通用，适用于需要全球定位的场景。
- GCJ02坐标系统主要在中国国内使用，对于中国境内的定位更为精准，符合中国法律法规的要求。
-
坐标转换：
- 在实际应用中，可能需要在Mapbox和高德地图之间进行坐标转换，因为两者的坐标系统不同。例如，从WGS84坐标转换为GCJ02坐标，或者反之。
-
服务范围和特点：
- Mapbox提供全球地图服务，强调自定义能力和国际化。
- 高德地图在中国有广泛的城市覆盖，提供详细的路线和实时路况信息，更适合中国境内的导航和定位服务。
总结来说，Mapbox和高德地图在经纬度定位上的主要区别在于它们使用的坐标系统不同，这影响了它们的定位精度和适用场景。在全球范围内，Mapbox可能更适合，而在中国境内，高德地图则因其精准的定位和丰富的本地数据而更受青睐。
Mapbox的特点
我理解的 Mapbox 地图有4个特点:全、炫、快、美
全
Mapbox 有长达8年的地图数据积累和专业的测绘团队它是 OSM 最大的贡献者。
地图数据遭盖全球并提供全球多语言地图包括中文。
这给国内出海企业提供了很大便利不用去各国找不同的地图教据提供商，
炫
Mapbox 将在游戏开发中使用的OpenGL四染技术用到了地图渲染精确控制到每个像素，从而可以提供最生动的地图相关数据可视化工具。
快
Mapbox 支持使用矢量地图切片，同样的地图消耗的流量只需要传统技术的113左右还能对切片无限分割，支持更灵活的设计;多层合并，更进一步节省流量。
美
由于CTO是美国顶尖院校的设计专业毕业(王力宏校友)在成为工程师之前有过一段设计经历，我们的地图都做的很精美，从来没有哪个地图公司这么花心思在[如何把地图做的更漂亮全」。这还不够，他们还研发了 Map studio让其它公司也能自助设计地图做品牌专属地图。
参考： mapbox注册过程：blog.csdn.net/qq_38436431…
mapbox注册跳过accessToken检测的方法：blog.csdn.net/qq_37312180…
改的是 this._requestManager._customAccessToken,(t=>{if 这句代码
