MAPBOX
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', //指定地图容器idstyle:'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', //指定地图容器idstyle: '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": ["http://webrd01.is.autonavi.com/appmaptile?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', //指定地图容器idstyle:'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', //指定地图容器idstyle:'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', //指定地图容器idstyle:'mapbox://styles/mapbox/streets-v12', //地图风格center:[114.30,30.50], //地图中心坐标 zoom:1, //缩放比例});setInterval(() => {let center =map.getCenter()center.lng+=1map.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', //指定地图容器idstyle: '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 += 1map.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', //指定地图容器idstyle: 'mapbox://styles/mapbox/streets-v12', //地图风格center: [114.30, 30.50], //地图中心坐标 zoom: 1, //缩放比例});function animatian() {let center = map.getCenter()center.lng += 1map.easeTo({center: [center.lng, center.lat],duration: 2,})}function toMove() {map.on('moveend', animatian)animatian()}function stopMove() {map.off('moveend', animatian)}let moving = falsemap.on('click', () => {if (moving) {toMove()} else {stopMove()}moving = !moving})</script>
</body></html>
