👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：mapbox 从入门到精通
一、🍀前言
本文详细介绍如何基于mapbox-gl v3.8.0版本中加载mapbox官网地图，亲测可用。希望能帮助到您。一起学习，加油！加油！
mapboxglMap_font_10">1.1 ☘️mapboxgl.Map 地图对象
HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数：
new Map class(options: Object)
本例使用属性：
mapboxfont_17">二、🍀加载mapbox官方地图
1. ☘️实现思路
- 1、创建html文件，引入mapbox-gl v3.8.0的样式和js库文件。
- 2、添加"<div id=“map”>"html要素，作为mapboxgl.Map的地图容器。
- 3、创建"<script>“标签，在”<script>"内，实现加载mapbox官方地图的方法。
具体方法：设置mapbox的accessToken，作为访问官方资源的token依据。创建mapboxgl.Map地图对象map，构造函数中，传入container的值为‘map’作为渲染的容器（此处为2步骤div标签的id）。zoom设置为12，表示初始化地图缩放级别。minZoom设置为0，表示最小缩放级别。center为[116.4, 39.9]，表示初始化坐标位置。style设置为‘mapbox://styles/mapbox/standard’，为官网标准地图样式地址。具体代码参考代码样例。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>mapbox基础，加载mapbox地图</title><script src="lib/jquery-3.4.1.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
</head>
<style>html, body {height: 100%;margin: 0px;}#map {width: 100%;height: 100%;}
</style>
<body>
<div id="map">
</div>
</body>
<script type="text/javascript">// 需要maobox官网注册账户，获取accessToken，否则无法访问官网服务mapboxgl.accessToken = 'your token';var map = new mapboxgl.Map({container: 'map',zoom: 12,minZoom: 0,center: [116.4, 39.9],style: 'mapbox://styles/mapbox/standard'})map.on('load', () => {})
</script></html>
效果如下：
地图初始化状态，定位到北京。
缩小到能看到地球全貌
