地图引擎(WebGIS)之MapBox的基础使用

最新推荐文章于 2024-06-02 21:27:33 发布
最新推荐文章于 2024-06-02 21:27:33 发布
阅读量615 收藏 20
点赞数 25
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44930306/article/details/138790426
版权

目录

一、MapBox

1.1、js显示(高德地图)

1.2、l7&mapbox

1.3、案例

1.3.1、加载深圳市数据

1.3.2、漫游(flyTo)效果

1.3.3、底层(layer-style)切换

1.3.4、地形数据加载

1.3.5、事件控制地球自转与暂停

1.3.6、沙盘的白天黑夜切换

1.3.7、地图控件

1.3.8、geojson加载数据

1.3.9、addSource

1.3.10、设置鼠标形状

1.4、vue3中引入并应用

1.4.1、安装配置

1.4.2、代码应用

一、MapBox

官网： Mapbox Docs

JS语法模块：　Mapbox GL JS | Mapbox

Openlayer、Leaflet相关应用：4、leaflet · 语雀  

1.1、js显示(高德地图)

效果展示：

跟随鼠标操作可以放大缩小、俯仰角观看，左右摇摆式观看

代码分析：

 <!-- 1、导入mapbox的依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }
        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map"></div>
    <script>
        const gaode = {
            "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
            }]
        }
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        const map = new mapboxgl.Map({
            /* 相当于openlayer的target */
            container: 'map', // container ID
            /* 相当于openlayer的layers */
            style: gaode, //显示高德地图，原来是国际地图
            center: [114.30, 30.50], // 设置经纬度 [lng, lat]
            zoom: 2,
            /* 属性值为globe显示球形 ,默认是平面式的*/
            projection: 'globe',
            pitch: 0,//俯仰角 0~90(默认值是0)
            bearing:0//水平角
        });
       map.on("style.load", () => {
            map.setFog({
                color: 'red',//大气层颜色
                'high-color': 'yellow',//高空颜色
                'space-color': 'green'//星空颜色
            })//设置背景
            map.doubleClickZoom.disable()//禁止双击地图放大
        })
       map.on('click', () => {
            // var pitch = map.getPitch()
            // pitch += 10;
            // map.setPitch(pitch);//点击图层，俯仰角度改变
            setInterval(() => {
                let bearing = map.getBearing()
                bearing += 10;
                map.setBearing(bearing)
            }, 50);//借助定时器实现“沙盘旋转”效果
        })
    </script>
</body>

1.2、l7&mapbox

L7(地理数据可视化)官网： 快速上手 | AntV L7 地理空间数据可视化引擎

科普：7代表7大洲

    <!-- 1、导入mapbox的依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://unpkg.com/@antv/l7"></script>
<script>
const token = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        const scene = new L7.Scene({
            id: 'map',
            map: new L7.Mapbox({
                style: gaode, // 样式URL
                center: [114.050008, 22.529272],
                pitch: 0,
                zoom: 14,
                projection: 'globe',
                token,
            }),
        });
        const map = scene.map;
        map.on('style.load', () => {
            map.setFog({})
        })
        /* 地图控件 */
        scene.on('loaded', () => {
            /* 地图主题控件 */
            const mapTheme = new L7.MapTheme();
            scene.addControl(mapTheme);
        });
</script>

1.3、案例

1.3.1、加载深圳市数据

https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json

效果展示:

核心代码：

 // L7.PolyonLayer
        scene.on('loaded', () => {
            fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json')
                .then(res => res.json())
                .then(data => {
                    console.log(data);
                    const layer = new L7.PolyonLayer({});//实例化(区域)图层
                    layer.source(data)//加载数据
                        .shape('extrude')//视图区域层有高度
                        .size('h20')//可以直接获取geojson中properties里的属性值
                        .active(true)
                    scene.addLayer(layer)
                })
        })

1.3.2、漫游(flyTo)效果

    <style>
        #btn {
            width: 200px;
            height: 50px;
            position: fixed;
            top: 20px;
            right: 30px;
            z-index: 100;
        }
    </style>
    <button onclick="resetMap()" id="btn">复位地图</button>
    <script>
        // 漫游效果：点击地图飞行到武汉，点击复位恢复原始状态
        map.on('click', () => {
            map.flyTo({
                zoom: 14,
                pitch: 90,
                center: [114.30, 30.50]//中心点
            })
        })
        function resetMap() {
            map.flyTo({
                zoom: 1.5,
                pitch: 0,
                center: [114.30, 30.50]
            })
        }
    </script>

1.3.3、底层(layer-style)切换

设置不同样式：Styles API | API Docs | Mapbox

    <style>
        #btn {
            width: 200px;
            height: 50px;
            position: fixed;
            top: 20px;
            right: 30px;
            z-index: 100;
        }
    </style>
    <button id="btn">模式切换</button>
    <script>
        let isToggle = false;
        let btn = document.getElementById("btn");
        btn.onclick = function () {
            isToggle = !isToggle;
            if (isToggle) {
                map.setStyle('mapbox://styles/mapbox/satellite-streets-v12');
                this.innerHTML = '卫星地图';
            } else {
                map.setStyle('mapbox://styles/mapbox/streets-v12');
                this.innerHTML = '街景地图';
            }
            console.log(isToggle, this.innerHTML);
        }
    </script>

1.3.4、地形数据加载

相当于地图中的山脉形状也清晰可见了。

<script>    
    // DEM（数据高程模型)
        map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            url: 'mapbox://mapbox.mapbox-terrain-dem-v1'
        })
        map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 })
</script>

1.3.5、事件控制地球自转与暂停

地球自转本质：每间隔一段时间经度累加，通过easeTo()开始旋转,通过stop()停止旋转;

//===========================模仿原理====================
map.on('click', () => {
            setInterval(() => {
                let center = map.getCenter();
                center.lng += 10;//地球自转：经度累加
                map.setCenter(center)
            }, 50)
})
//===========================官方api实现====================
        let isUserInterface = false;
        map.on('click', () => {
            isUserInterface = !isUserInterface;
            if (isUserInterface) {
                map.stop();//停止旋转
            } else {
                rotateMap();
            }
        })
        map.on('moveend', () => {
            rotateMap();//当地球停止旋转时，触发旋转事件
        })
        function rotateMap() {
            const zoom = map.getZoom()
            if (zoom < 5 && !isUserInterface) {
                let center = map.getCenter();
                center.lng += 10;//地球自转：经度累加
                map.easeTo({//easeTo相当于setInterval
                    center,
                    duration: 1000,//间隔时长
                    easing: n => n
                })
            }
        }
        rotateMap();

1.3.6、沙盘的白天黑夜切换

其实就是设置不同的setFog；

        map.on('moveend', () => {
            rotateMap();//当地球停止旋转时，触发旋转事件
        })
        function rotateMap() {
            let bearing = map.getBearing();
            bearing += 10;
            if (bearing < 0) {
                map.setFog({
                    range: [-1, 2],
                    'horizon-blend': 0.3,
                    color: "#242B4B",//黑夜
                    "high-color": '#161B36',
                    "space-color": '#0B1026',
                    'star-intensity': 0.8
                })
            } else {
                map.setFog({
                    range: [-1, 2],
                    'horizon-blend': 0.3,
                    color: "white",//白天
                    "high-color": '#add8e6',
                    "space-color": '#d8f2ff',
                    'star-intensity': 0.0
                })
            }
            map.easeTo({//easeTo相当于setInterval
                bearing: bearing,
                duration: 1000,//间隔时长
                easing: n => n
            })
        }

1.3.7、地图控件

<head>
    <!-- 汉化包 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
</head>   
<script>
        map.addControl(new mapboxgl.FullscreenControl());//全屏控件
        map.addControl(new mapboxgl.NavigationControl(),
            // top-left、top-right、bottom-left、bottom-right
            'top-right');//导航控件
        map.addControl(new mapboxgl.ScaleControl(),'top-right');//比例尺控件
        // 鼠标位置控件
        map.on('mousemove', (evt) => {
            let { lng, lat } = evt.lngLat;
            // 随着鼠标移动获取对应的经纬度
            document.getElementById('mouse').innerHTML = `经度：${lng.toFixed(2)},纬度：${lat.toFixed(2)}`
        })
        // 汉化控件(将国际命名转为汉字)
        map.addControl(new MapBoxLanguage({
            defaultLanguage: 'zh-Hans'
        }))
</script>

1.3.8、geojson加载数据

获取湖北省的地图数据：DataV.GeoAtlas地理小工具系列

<head>
    <!--jquery -->
    <script src='https://lib.baomitu.com/jquery/2.2.4/jquery.js'></script>
</head>   
<script>       、
 map.on("style.load", () => {
            map.setFog({})//设置背景
            map.doubleClickZoom.disable()//禁止双击地图放大
            $.ajax({
                url: 'https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json'
            }).then(res => {
                map.addLayer({
                    id: 'hubei',
                    type: 'fill',
                    source: {
                        type: 'geojson',
                        data: res
                    },
                    // 绘制地图样式
                    paint: {
                        'fill-color': '#ff2d51',
                        'fill-opacity': .5
                    }
                })
            })
        })
</script>

1.3.9、addSource

addLayer可以单独使用，也可以结合addSource一起使用；

     // http请求后的图层已经加载到map的style属性中了
                map.addSource("hubei", {
                    type: 'geojson',
                    data: res
                })
                map.addLayer({
                    id: 'hubei-layer',
                    type: 'fill',
                    source: "hubei",
                    // 绘制地图样式
                    paint: {
                        'fill-color': '#ff2d51',
                        'fill-opacity': .5
                    }
                })

1.3.10、设置鼠标形状

map.on("load", function () {
            map.on('mouseenter', 'Point', () => {
                map.getCanvas().style.cursor = 'pointer';
            });
            map.on('mouseleave', 'Point', () => {
                map.getCanvas().style.cursor = 'default';
            });
        })

1.4、vue3中引入并应用

1.4.1、安装配置

(1)、npm i mapbox-gl

(2)、设置.env,这里的token 是临时的，可以去官网注册一个新的

VITE_TOKEN ='pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'

(3)、配置main.js

1.4.2、代码应用

(1)、初始化地图

<template>
  <div id="map"></div>
</template>
<script setup>
import mapboxGl from "mapbox-gl";
import { onMounted } from "vue";
mapboxGl.accessToken = import.meta.env.VITE_TOKEN;
onMounted(() => {
  const map = new mapboxGl.Map({
    /* target-ol */
    container: "map", // container ID
    style: "mapbox://styles/mapbox/streets-v12", // style URL
    center: [114.3, 30.5], // starting position [lng, lat]
    zoom: 12, // starting zoom
  });
});
</script>
<style scoped>
#map{
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom: 0;
}
</style>

(2)、将地图挂载到全局

BoxMap.vue代码：

<template>
  <div id="map"></div>
</template>
<script setup>
import mapboxGl from "mapbox-gl";
import { onMounted } from "vue";
import { app } from "../main";
mapboxGl.accessToken = import.meta.env.VITE_TOKEN;
onMounted(() => {
  const map = new mapboxGl.Map({
    /* target-ol */
    container: "map", // container ID
    style: "mapbox://styles/mapbox/streets-v12", // style URL
    center: [114.3, 30.5], // starting position [lng, lat]
    zoom: 12, // starting zoom
  });
  app.provide("$map", map);
});
</script>
<style scoped>
#map {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>

BoxGeoJSON.vue代码：geojson加载-点击事件漫游

<template>
  <div>
    <!-- 点击按执行飞行 -->
    <button id="btn" @click="handleClick">按钮</button>
  </div>
</template>
<script setup>
import { onMounted, inject } from "vue";
let $map;
onMounted(() => {
  $map = inject("$map");
  let url = "https://geo.datav.aliyun.com/areas_v3/bound/420100_full.json";
  $map.on("style.load", () => {
    $map.addLayer({
      id: "wuhan",
      type: "fill",
      source: {
        type: "geojson",
        data: url,
      },
      paint: {
        "fill-color": "#fff",
        "fill-opacity": 0.8,
      },
    });
  });
});
const handleClick = () => {
  $map.flyTo({
    zoom: 4,
  });
};
</script>
<style scoped>
#btn {
  width: 200px;
  height: 50px;
  background-color: #ff2d51;
  position: fixed;
  z-index: 100;
  top: 10px;
  right: 50px;
}
</style>

注意：这些只是基础使用，其他的属性和方法自行查找官网，慢慢研究。

野槐
关注
  • 25
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mapbox使用教程
ll_883963的博客
05-01 2万+
地图创建点 const sourceId = 'typeId'; const pointId= 'pointId'; map.addSource(sourceId, { type: 'geojson', data: data, }); //设置原点默认值 map.addLayer({ id: pointId, type: 'circle', source: sourceId, // filter: ["!", ["has", "point_count
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7 + mapbox 实现简单地图场景
mapbox fitbounds 定位到geojson数据边界
南山老沙
03-29 257
mapbox 定位到多面的边界，利用turf.js 的bbox进行计算geojson的边界
WebGIS 瓦片地图引擎实现之——地图瓦片加载计算原理介绍
07-26 2144
在地图瓦片技术使用之前，用户使用在线地图，一般都是客户端把将要显示的地理范围传送到服务端，服务器端将地理范围内的地理数据都查询出来，然后在服务端按照预先定义的专题地图的配置样式渲染成地图图片，再返回给客户端浏览，这也就是 OGC（地理信息联盟）标准的 WMS（Web Map Service）服务。...
WebGIS 瓦片地图引擎实现之——地图瓦片计算
07-25 2246
为了解决这些问题，谷歌地图率先提出了TMS（TileMapService）服务，预先在服务端分层（金字塔模型）切片全量渲染，提出了Web-Mercator投影，按照地图不同的显示级别切成了瓦片坐标的图片。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hA7WJPQf-1658738538111)(https[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u50A3QSo-1658738538112)(httpsOGCWMTS。...
WebGIS开发入门
热门推荐
popstarqq的博客
10-22 2万+
一 WebGIS： Web就是网页端，GIS全称是地理信息系统;所以webgis系统就是网页端的地理信息系统，简单点说将地理空间信息以地图的方式在网页端展现出来，进行可视化或者是分析； 二 GIS背景 gis是一门专业课程，本科阶段叫地理信息系统(科学)，硕士阶段是地图学与地理信息系统；该专业毫无疑问就是webgis开发最专业的专业了； 大部分gis专业学生，本科先接触arcgis 二次开发；然后是arcgis for js的网页gis二次开发；接触开源gis比较少； 目前只要设计地图开发的都可以
WebGIS开发之Mapbox
GIS前端嘉欣的博客
09-20 118
Mapbox 针对不同平台均开发了相应的 GIS 引擎以满⾜开发者或相关⽤户的需要，如：iOS SDK（⽤于iOS端开发）、Android SDK（⽤于Andriod端开发）、Navigation SDK（⽤于Navigation端开发）、Unity SDK（⽤于Unity端开发）、GL JS（⽤于web端开发）。由于CTO是美国顶尖院校的设计专业毕业（王⼒宏校友），在成为⼯程师之前有过⼀段设计经历，我们的地图都做的很精美，从来没有哪个地图公司这么花⼼思在「如何把地图做的更漂亮上」。
9.webgis地图api对比分析
yaojindou0的博客
08-10 523
gis厂商：SuperMap API、ArcGIS API地图商：百度地图、腾讯地图、高德地图国家：天地图开源：mapbox、leaflet、openlayers三维：cesuim、three其他：echarts政府项目选天地图或者SuperMap API、ArcGIS API地图业务比较复杂、功能繁多、有一定难度的项目选openlayers专题图选mapbox追求地图美感的话选LeafLet静态专题图没有其他功能可选echarts。
MapboxGL系列（一）基础知识介绍
qq_37731856的博客
09-21 6151
mapboxgl基础知识介绍
开源WebGIS架构
徐永赛的博客
07-29 2984
开源WebGIS架构
WebGIS二次开发-问题及解决方案整理(未完待续)（mapbox，openlayer，高德，百度，cesium）
bguihiub的博客
02-07 751
WebGIS
webgis之OpenLayers地图使用教程合集_极品.zip
01-10
webgis之OpenLayers地图使用教程合集_极品
基于WebGIS的地图发布系统设计与实现
05-16
【作品名称】：基于WebGIS的地图发布系统设计与实现 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：基于WebGIS的地图...
WebGIS从基础到开发实践
07-22
资源名称：Web GIS从基础到开发实践内容简介：《Web GIS从基础到开发实践:基于ArcGIS API for Javaｓｃｒｉｐｔ》适合政府、企业相关部门的GIS研究与开发人员，以及高等院校地理学、地理信息系统、房地产、环境科学...
基于WebGIS的矿区电子地图的设计
05-28
随着WebGIS技术的广泛应用,电子地图的使用也渐渐走入人们的视野。文中以某矿区为例,设计基于WebGIS的、类似于百度地图形式的矿区电子地图,以数字化的方式来展示矿区的地理空间信息,更方便地为人们导航矿区的地理信息...
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 504
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 514
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 577
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
webgis之leaflet全面解析 pdf
08-02
《WebGIS之Leaflet全面解析》是一本针对WebGIS开发中的Leaflet库进行详细解析的PDF教程。本书内容丰富全面，适合WebGIS初学者或有一定基础的开发者学习。 首先，本书首先介绍了WebGIS的基本概念和发展趋势，让读者对WebGIS有一个整体的认识。然后，重点介绍了Leaflet库的基本知识和使用方法。Leaflet是一个轻量级的JavaScript库，用于在Web浏览器中创建地图和交互式地图应用程序。 在Leaflet的基础知识介绍之后，本书详细讲解了Leaflet库的各种功能和插件。包括地图的创建与配置、图层的添加与控制、交互操作的实现、地图样式的定制等方面。同时，本书还扩展了Leaflet库的功能，介绍了如何在Leaflet中集成常见的地理信息数据格式，如GeoJSON、WMS等。还介绍了如何使用Leaflet与其他常见的WebGIS框架和工具进行集成开发，如OpenLayers、ArcGIS API for JavaScript等。 除了技术介绍外，本书还包含了丰富的实例和案例，帮助读者快速上手并深入理解Leaflet库的使用和应用场景。通过实例的讲解，读者可以学习如何使用Leaflet库开发各种功能丰富的WebGIS应用程序，如地图展示、地理信息查询、路径规划、地理数据可视化等。 总之，《WebGIS之Leaflet全面解析》是一本内容详实、实用性强的教程，通过学习本书，读者可以全面掌握Leaflet库的使用方法和开发技巧，有助于提升WebGIS应用程序的开发水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值