持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
你总是需要地图，因为它过于直观。
一、地图、地图、还是地图
Ned 是一个前端开发，就职于一家 To C 业务的公司，这天产品经理提出了一个需求：
“来一张地图吧，把我们所有的客户放在上面，让我们一眼就能看出来是谁在用我们的APP！”
从未做过地图的 Ned 茫然点了点头，开始进行技术筛选，然后他才发现，小小一张地图，居然有这么多门道！
瓦片地图服务商有：天地图、百度地图、高德地图 等...
而地图引擎又有 openlayers，cesium 等...
如果要在地图上加载三维模型，可能他还得了解 three.js 等技术...
那么，有没有什么方案不仅开箱即用，而且拥有可观的 拓展性 呢？
当然有，比如： mapbox-gl。
二、什么是 mapbox-gl？
谈到这个问题之前，得先弄清楚什么是 mapbox
首先，这是一家企业，它提供地图服务和解决方案，你几乎可以把它看做 “百度地图”，提供。
同时，它提供了一个基于 WebGL 的开源地图引擎：mapbox-gl。
mapbox-gl npmjs: www.npmjs.com/package/map…
mapbox-gl github：github.com/mapbox/mapb…
通过 mapbox-gl，你可以像使用 openlayers 那样加载各种源的地图，包括 mapbox 本身提供的瓦片源、百度地图等瓦片源。
同时，它也是 mapbox GL 生态的重要一环。
三、如何安装
yarn add mapbox-gl
四、基础使用：渲染地图
此处以
mapbox本身的瓦片源为例
首先，在 mapbox 官网注册账号，获得 accessToken。（为避嫌，此处不细赘述）
如果你在 vue3 项目中，可以通过如下代码渲染：
index.vue
<template>
<div id="map"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import mapboxgl from 'mapbox-gl';
onMounted(() => {
mapboxgl.accessToken = `你的accessToken`
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [0, 0],
zoom: 0.6,
projection: 'naturalEarth' // starting projection
});
})
</script>
一个简单的世界地图就这样简单而清晰的世界地图便展现出来：
五、在地图上渲染区域
众所周知，用来描绘地图上区域的格式叫 geojson，它的本质是通过多个点的合集，来描述一个多边形。
现在，我通过各种人工手段获取了一个湖泊的多边形图案，要将它在地图上绘制出来，应该怎么做呢？
很简单：增加以下代码：
map.on('load', function () {
rotateCamera(0);
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geojson',
'data': lakeGeoJson // 湖面的geojson
},
'layout': {},
'paint': {
'fill-color': '#17b1ee',
'fill-opacity': 0.8,
}
});
(当然，别忘了把地图圆心也选为 geojson 中的某个点)
效果如下：
途中蔚蓝色的多边形，便是通过 geojson 画出的湖泊。
六、倾斜视角
90 度垂直俯瞰的视角太过死板，但提供多角度的渲染，正是 mapbox-gl 的拿手好戏。
只需要一行代码：
const map = new mapboxgl.Map({
// ... 其他配置不变
pitch: 60, // 增加此行
});
整个画面顿时有了质的提升！
七、旋转、跳跃、以及 Rap
沉寂的画面是单调的，以及没有逼格的——甲方也这么认为。
因此，甲方经常会提出 “让地图动起来” 的合理需求。
这在 mapbox-gl 中非常容易。
增加以下代码：
function rotateCamera(timestamp) {
map.rotateTo((timestamp / 360) % 360, { duration: 0 });
requestAnimationFrame(rotateCamera);
}
map.on('load', function () {
rotateCamera(0);
})
画面轻松动了起来！
八、结束语
我是春哥。
大龄前端打工仔，依然在努力学习。
我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。
你可以在公众号里找到我：前端要摸鱼。
