[1] Mapbox-gl 创建地图并替换样式创建mapbox-gl应用。替换地图样式标签为中文。mapbox-gl.j

携手创作，共同成长！这是我参与「掘金日新计划 · 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元素
})