webgis开发之mapbox(1)

文章正文
发布时间:2024-06-13 21:20

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>