webgis开发之mapbox（1）

最新推荐文章于 2024-10-23 09:38:21 发布
最新推荐文章于 2024-10-23 09:38:21 发布
阅读量1.1k 收藏 9
点赞数 21
分类专栏： webgis开发 mapbox 文章标签： 前端 html5 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136366828
版权

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',    //指定地图容器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": ["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',    //指定地图容器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>
mapbox高阶，绘制台风路径、台风预测路径、台风风圈
我哎GIS博客
04-16 219
本文详细介绍如何基于mapbox-gl v3.*.* 版本，绘制台风路径、台风预测路径、台风风圈，亲测可用。希望能帮助到您。一起学习，加油！加油！
WebGIS开发常见的开源框架及其区别与联系
weixin_45875986的博客
05-25 1950
Mapbox并非像谷歌、百度地图一样是一个直接面向C端用户的地图导航，其主要服务对象是各种APP、网站的开发者，为他们提供了一个地图开源平台，用户可以通过SDK、API等方式把Mapbox提供的地图整合进自己的应用中。WebGIS（网络地理信息系统）是指工作在Web网上的GIS，是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是Internet上地理信息发布、共享和交流协作的基础。明星数据格式是矢量切片，是最具美感的专题地图。
Mapbox应用开发——概述篇
iamsamzhang的专栏
03-03 4254
我们可以简单地将Mapbox理解成一个地图编辑平台，同时，这个平台为ios，android和web开发者提供了导航、定位等功能丰富的API。 根据上述描述，我们可以看出，Map向开发者提供了两项基本功能：一是地图编辑功能，开发者可以在Mapbox studio创建满足自身业务需求的各式地图；二是通过mapbox 平台提供的API，在移动端和web端加入定位、导航等地图相关功能。 在使用mapb
Mapbox开发
小小白兔兔
06-24 441
Mapbox 官网资源 一.Mapbox styles https://docs.mapbox.com/api/maps/styles/ 主要是各种样式图层，例如卫星地图，街景地图，深色地图，浅色地图等 二.map-events 事件触发 https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events ...
mapbox的应用开发参考
creamy521的专栏
01-20 786
http://mobile.51cto.com/ahot-509700.htm http://www.lai18.com/content/1957522.html https://www.mapbox.com/blog/android-voice-generated-directions/ http://blog.csdn.net/u013220174
mapbox 开发笔记
GIS（地理信息系统）
11-22 893
mapbox 切换底图后图层消失？
WebGIS之MapBox篇
weixin_30883271的博客
09-15 381
前面在Arcgis的基础上玩了玩,这不最近又去摸索了一下Web上开源的GIS;这次选择了基于MapBox来实现一些效果: 1、加载自己发布的本地瓦片效果 2、加载热力图、Echarts、三位建筑、路况效果： 3、加载热力图、Echarts、三位建筑、路况效果： 4、再来个展示三维建筑的效果: 5、再来个路径回放效果 6、再来个渐变效果的路径回放 7、...
基于Cesium、Mapbox与Ailabel技术的WebGIS可视化设计源码
09-29
WebGIS（Web地理信息系统）是一种基于Web技术的地理信息系统，它允许用户通过互联网访问和处理地理数据。随着互联网技术的发展，...它不仅适用于相关领域的正答辩展示，也为WebGIS开发人员提供了学习和参考的宝贵资料。
webgis.rar_fliesgkc_webGIS地震_webgis_webgis框架开发_分布地图
09-20
在“webgis.rar_fliesgkc_webGIS地震_webgis_webgis框架开发_分布地图”这个压缩包中，我们可以看到与WebGIS开发相关的资源，特别是用于展示地震点分布的框架。 首先，我们要理解WebGIS的核心概念。它结合了Web技术...
WebGIS开发总结
gggg5643的专栏
02-07 3218
WebGIS 开发 专题讨论目的 业务人员基于公司油田业务，结合当前WebGIS的技术体系，对构建公司油田GIS信息化提供一些思路 技术人员关于WebGIS的技术体系做一个深入的探讨 GIS开发基础知识 GIS概念 地理信息系统（Geographic Information System，GIS），是在计算机硬、软件系统支持下，对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统 对于专业GIS人员，多学科 Web...
常见的WebGIS三维地图框架对比（Mapbox/Cesium）
最新发布
2301_78220461的博客
10-23 1194
Cesium JS和Mapbox GL JS是目前最流行的支持3D地形图的WebGIS框架，大部分企业招聘三维GIS开发工程师，都要求会这两个框架。从用人单位的角度看，这两个框架是最受欢迎、使用最广泛、可视化效果也是最好的。因此，学会使用这两个JS框架，对找工作非常有帮助。这里重点解释一下为什么企业招聘的时候会要求掌握Mapbox以及Cesium等三维地图框架。以及这两个框架具体有哪些差异和相同点。
mapbox设计方案
12-18
mapbox的设计书，官方发布的，对地图设计者来说可以参考
mapbox样例
02-18
用于开发自已的地图服务的一个简单样例，因为要用于国外，所以不能调用百度的接口
mapbox 技术方案
weixin_35749545的博客
02-12 230
Mapbox 是一个提供地图数据和地图可视化的平台。它使用了在线地图技术，并通过 API 和工具提供了丰富的功能和定制选项，方便开发人员在他们的应用程序和网站中集成地图。Mapbox 的技术方案基于开放源代码软件和大量在线数据，并采用了数据科学和机器学习技术来提高地图的精确性和可用性。Mapbox 还与其他地图和地理信息系统(GIS)技术相结合，为开发人员提供更加全面的解决方案。 ...
vue3-mapboxgl-antv-L7开发（一）项目的搭建
ycc211215的博客
08-31 1210
随着科技的飞速发展，智慧地球，智慧城市等一些名词不断的出现在我们的日常生活中，智慧化的完成离不开地理信息的，它们要获取到我们的位置信息，进而完成一些智能化的决策。
MapBox介绍
weixin_39676449的博客
02-06 8910
来自美国的一家为开发者提供开发工具及开放平台的地图服务公司,不仅拥有有顶尖的测绘工程师们，同时110+万注册开发者以及每月3亿C端活跃用户也成为了他们的贡献者。官网：https://www.mapbox.com/mapbox以开源的形式构建了矢量瓦片技术生态，基于矢量瓦片规格和瓦片渲染规格，开发了矢量切片工具、瓦片服务传输框架、瓦片在各种终端下渲染使用的全套工具包、样式编辑等等。比如用户的地理位置移动情况、他们移动的速度。Mapbox设定了程序，收集到的数据会自动更新Mapbox地图的准确度。
地图引擎(WebGIS)之MapBox的基础使用
qq_44930306的博客
05-17 7745
addLayer可以单独使用，也可以结合addSource一起使用；BoxGeoJSON.vue代码：geojson加载-点击事件漫游。注意：这些只是基础使用，其他的属性和方法自行查找官网，慢慢研究。跟随鼠标操作可以放大缩小、俯仰角观看，左右摇摆式观看。地球自转本质：每间隔一段时间经度累加，通过。相当于地图中的山脉形状也清晰可见了。其实就是设置不同的setFog；
使用 Mapbox 在 Vue 中开发一个地理信息定位应用
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
08-19 3553
在本文中，我们将大致了解正向地理编码和反向地理编码的概念。 我们将使用 Mapbox 和 Vue.js 2.6.11 构建一个应用这些概念来显示特定位置的应用程序。
mapbox-gl开发教程（一）：搭建前端开发环境
地理信息技术杂谈 博客，欢迎技术交流
04-26 3013
–mapbox-gl是一个开源、基于webgl技术的前端地图类库– 开发教程篇一：搭建前端开发环境 1、mapbox官网注册一个账号，生成一个开发token，在mapbox-gl2.0以前，使用自搭建的后台地图服务时，可以不使用此token，参见公众号文章：mapbox-gl升级到2.0后，使用自搭建的后端服务，也需要token，敬请注意！，或者修改mapbox-gl2.0以后的源码，也能避免token，参见公众号文章：mapbox-gl避免设置token源码修改，修改时，看一下官网的许可声明。 2、生成t
webGIS开发案例源代码学习手册
WebGIS（Web地理信息系统）是一...开发者通过研究和学习这些源代码，可以加深对WebGIS开发流程、架构设计、前后端交互以及功能实现的理解，从而提升自己的开发技能，进一步开发出更高效、安全、用户友好的WebGIS应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值