mapbox基础，加载mapbox官方地图

news2025/10/31 23:42:42

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：mapbox 从入门到精通

文章目录

一、🍀前言
- 1.1 ☘️mapboxgl.Map 地图对象
二、🍀加载mapbox官方地图
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于mapbox-gl v3.8.0版本中加载mapbox官网地图，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️mapboxgl.Map 地图对象

HREE.PlaneGeometry 用于生成平面几何体的类。
构造函数：
new Map class(options: Object)
本例使用属性：
在这里插入图片描述

二、🍀加载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>