01、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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:12, //缩放比例
pitch:45, //俯仰角 默认是0（0-90）
bearing:90 //水平角 默认是0 （-180-180）
});
console.log(map.getBearing)
console.log(map.getCenter)
// setInterval(() => {
//
let bearing = map.getBearing()
//
bearing++
//
map.setBearing(bearing)
// }, 20);
</script>
</body>
</html>
02、切换风格、投影方式
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
z-index: 1;
}
select{
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
</style>
</head>
<body>
<select name="" id="" onchange="changeStyle(event)">
<option value="mapbox://styles/mapbox/light-v11">Mapbox Light</option>
<option value="mapbox://styles/mapbox/dark-v11">Mapbox Dark</option>
</select>
<select id="projection" name="projection" onchange="changeStyle(event)" style="margin-left: 120px;">
<option value="mercator">Mercator</option>
<option value="globe">Globe</option>
<option value="albers">Albers</option>
<option value="equalEarth">Equal Earth</option>
<option value="equirectangular">Equirectangular</option>
<option value="lambertConformalConic" selected="">
Lambert Conformal Conic
</option>
<option value="naturalEarth">Natural Earth</option>
<option value="winkelTripel">Winkel Tripel</option>
</select>
<div id="map">
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
// zoom: 10, //缩放比例
pitch: 45, //俯仰角 默认是0（0-90）
bearing: 90 //水平角 默认是0 （-180-180）
});
function changeStyle(event){
// console.log(event)
map.setStyle(event.target.value)
}
function changeProjection(event){
// console.log(event)
map.setProjection(event.target.value)
}
</script>
</body>
</html>
03、加载高德底图
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
z-index: 1;
}
select {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
</style>
</head>
<body>
<select name="" id="" onchange="changeStyle(event)">
<option value="mapbox://styles/mapbox/light-v11">Mapbox Light</option>
<option value="mapbox://styles/mapbox/dark-v11">Mapbox Dark</option>
</select>
<select id="projection" name="projection" onchange="changeStyle(event)" style="margin-left: 120px;">
<option value="mercator">Mercator</option>
<option value="globe">Globe</option>
<option value="albers">Albers</option>
<option value="equalEarth">Equal Earth</option>
<option value="equirectangular">Equirectangular</option>
<option value="lambertConformalConic" selected="">
Lambert Conformal Conic
</option>
<option value="naturalEarth">Natural Earth</option>
<option value="winkelTripel">Winkel Tripel</option>
</select>
<div id="map">
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
/* 将地图挂载到对应的DOM上 相当于ol的target */
container: "map",
/* 相当于ol的layers */
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [114.30, 30.50],
zoom: 6,
projection: 'globe'
})
function changeStyle(event) {
// console.log(event)
map.setStyle(event.target.value)
}
function changeProjection(event) {
// console.log(event)
map.setProjection(event.target.value)
}
</script>
</body>
</html>
04、设置大气层样式
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:2, //缩放比例
});
map.on('style.load',()=>{
map.setFog({
'color':'blue',
'high-color':'black',
'space-color':'red'
})
})
</script>
</body>
</html>
05、地图事件
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
btn1{
position: fixed;
top: 2%;
left: 2%;
z-index: 99;
}
btn2{
position: fixed;
top: 2%;
left: 6%;
z-index: 99;
}
</style>
</head>
<body>
<button class="btn1" onclick="mapTo()">跳转</button>
<button class="btn2" onclick="removeEvent()">移除</button>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:12, //缩放比例
});
function mapTo(){
// map.setCenter([114.3,30.5]) //设置地图中心坐标 直接跳转地图
map.flyTo({ //飞行到某个点，带飞行动画
center:[118,38.5],
zoom:8,
speed:0.5,
})
// map.easeTo({ //缓慢的移过去 有过渡效果
//
center:[112,30],
//
duration:5000 //过渡时间 毫秒
// })
}
// function showLonlat(e){
//
console.log(e)
// }
// map.on('click',showLonlat)
// function removeEvent(){
//
map.off('click',showLonlat)
// }
</script>
</body>
</html>
06、定时器自转
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
*{
margin: 0;
padding: 0;
}
#map{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container:'map', //指定地图容器id
style:'mapbox://styles/mapbox/streets-v12', //地图风格
center:[114.30,30.50], //地图中心坐标
zoom:1, //缩放比例
});
setInterval(() => {
let center =map.getCenter()
center.lng+=1
map.easeTo({
center:[center.lng,center.lat],
duration:10,
})
// map.setCenter([c.lng++,lat++])
}, 20);
</script>
</body>
</html>
07、事件自转
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
</style>
</head>
<body>
<button onclick="stop()">Stop</button>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 1, //缩放比例
});
function stop() {
map.off('moveend', animatian)
}
function animatian() {
let center = map.getCenter()
center.lng += 1
map.easeTo({
center: [center.lng, center.lat],
duration: 2,
})
}
map.on('moveend', animatian)
</script>
</body>
</html>
08、点击控制自转
<!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库以及它的样式 -->
<script src="../lib/mapbox.js"></script>
<link rel="stylesheet" href="../lib/mapbox.css">
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: absolute;
top: 2%;
left: 2%;
z-index: 2;
}
</style>
</head>
<body>
<button onclick="stop()">Stop</button>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 1, //缩放比例
});
function animatian() {
let center = map.getCenter()
center.lng += 1
map.easeTo({
center: [center.lng, center.lat],
duration: 2,
})
}
function toMove() {
map.on('moveend', animatian)
animatian()
}
function stopMove() {
map.off('moveend', animatian)
}
let moving = false
map.on('click', () => {
if (moving) {
toMove()
} else {
stopMove()
}
moving = !moving
})
</script>
</body>
</html>
