[1] Mapbox-gl 创建地图并替换样式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

mapbox-gl js是什么？

官网文档是这样介绍的： Mapbox GL JS 是一个客户端 JavaScript 库，用于使用 Mapbox 的现代地图技术构建 web 地图和 web 应用程序。您可以使用 Mapbox GL JS 在 Web 浏览器或客户端中显示 Mapbox 地图，添加用户交互性，并在您的应用程序中自定义地图体验。

用自己的话说就是需要在页面中做地图相关可视化时可以考虑用mapbox-gl

mapbox-gl 官网文档

前期主要是官网文档引导，安装并创建自己的地图应用

看业务中的需要，查看官网示例中有无相应或类似的功能，然后就是面向官网示例代码编程

最后就是去查一查官网API文档，看一看总会有些收获

用mapbox-gl实现一个地图应用

mapbox-gl 安装

npm i mapbox-gl --save
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";
mapboxgl.accessToken = "这里需要注册一个账号，并创建一个token";
const map = new mapboxgl.Map({
  container: "container-id",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [103.93005525808513, 30.75208889840195],
  zoom: 12,
  pitch: 60,
简单说一下上面的代码。
首先我们需要去mapbox官网注册一个自己的账号，然后再创建一个自己的token。（其实后面在内网环境部署时也发现可以修改源码，从而不用验证token的情况，这个放在后面说。）
new mapboxgl.Map(options)，这个就是生成地图的主要方法，其中options可以包含很多配置项，简单说说这里的配置：
container，这里可以是一个 html 元素，也可以是 id 字符串。需要注意的是这里的html必须是没有子元素的。
<div id="container-id" ref="containerDom"></div>
const containerDom = ref(null)	// vue 获取html元素
new mapboxgl.Map({
  // container: "container-id"	// id 字符串
  container: containerDom.value	// html元素
style，地图样式。官网提供了一些默认样式，也可以使用自定义的地图样式。
center，地图显示中心位置。
zoom，地图默认缩放级别。
pitch，地图倾斜角度。
更多的配置项可以去官网API文档看一看。文档地址
现在的地图样式这样的：
这个风格比较小清新，换一个暗一点的。
地图样式可以直接使用 API 文档中提供的那几种，也可以去Map Studio创建自定义的地图样式。
打开 Map studio 点击创建按钮
这里可以选择在一些默认样式上修改，也可以完全自定义。
点击 Customize Basic 按钮进入样式编辑，在这里可以尽情的修改地图样式。
地图上那些英文标签看着不舒服，改成中文！
然后点击发布按钮即可将这个样式保存，然后直接复制样式地址拿来用就可以了。
复制style url 替换 new mapboxgl.Map(options) 中style即可替换样式！