1、Mapbox地图样式定义

Mapbox地图样式：按照Mapbox地图样式规范中描述的模式定义的一个JSON对象，或者是此类JSON的URL。可以接受null值以允许手动添加样式。

要从Mapbox API加载样式，可以使用表单的URL

mapbox://styles/:owner/:style

其中：owner是您的Mapbox帐户名，：style是样式ID。

2、Mapbox默认地图样式

样式名称	样式URL	样式image
Mapbox Streets街道底图	mapbox://styles/mapbox/streets-v12
Mapbox Outdoors户外底图	mapbox://styles/mapbox/outdoors-v12
Mapbox Light	mapbox://styles/mapbox/light-v11
Mapbox Dark	mapbox://styles/mapbox/dark-v11
Mapbox Satellite卫星底图	mapbox://styles/mapbox/satellite-v9
Mapbox Satellite Streets卫星街道混合底图	mapbox://styles/mapbox/satellite-streets-v12
Mapbox Navigation Day导航底图(白天)	mapbox://styles/mapbox/navigation-day-v1
Mapbox Navigation Night导航底图(晚上)	mapbox://styles/mapbox/streets-v12

3、Mapbox地图样式对象

Mapbox地图样式对象样式对象必须符合以下规则：

• 必须是有效的JSON

• 必须与地图框样式规范的最新版本对齐

• 可由不超过15个来源组成

• 样式正文中不能包含样式规范中列出的键以外的任何键

• 源对象中的url属性必须是有效的Mapbox集合ID

• 仅支持光栅和矢量源

mapbox地图样式对象例子：

{
  "version": 8,
  "name": "{name}",
  "metadata": "{metadata}",
  "sources": "{sources}",
  "sprite": "mapbox://sprites/{username}/{style_id}",
  "glyphs": "mapbox://fonts/{username}/{fontstack}/{range}.pbf",
  "layers": ["{layers}"],
  "created": "2015-10-30T22:18:31.111Z",
  "id": "{style_id}",
  "modified": "2015-10-30T22:22:06.077Z",
  "owner": "{username}",
  "visibility": "private",
  "protected": false,
  "draft": true
}

样式对象属性说明表：

Property	Type	Description
version	number	The style specification version number.
name	string	A human-readable name for the style.
metadata	object	Information about the style that is used in Mapbox Studio.
sources	object	Sources supply the data that will be shown on the map.
layers	array	Layers will be drawn in the order of this array.
created	string	The date and time the style was created.
id	string	The ID of the style.
modified	string	The date and time the style was last modified.
owner	string	The username of the style owner.
visibility	string	Access control for the style, either public or private. Private styles require an access token belonging to the owner. Public styles may be requested with an access token belonging to any user.
protected	boolean	Indicates whether the style is protected (true) or not (false). Protected styles cannot be edited and deleted.
draft	boolean	Indicates whether the style is a draft (true) or whether it has been published (false).

4、切换地图样式的案例

完整代码（vue版本）：

<template>
  <div>
    <div id="map"></div>

    <div id="menu">
      <input
        id="satellite-streets-v12"
        type="radio"
        name="rtoggle"
        value="satellite"
        checked="checked"
      />
      <!-- See a list of Mapbox-hosted public styles at -->
      <!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
      <label for="satellite-streets-v12">卫星街道混合</label>
      <input id="light-v11" type="radio" name="rtoggle" value="light" />
      <label for="light-v11">亮色</label>
      <input id="dark-v11" type="radio" name="rtoggle" value="dark" />
      <label for="dark-v11">暗色</label>
      <input id="streets-v12" type="radio" name="rtoggle" value="streets" />
      <label for="streets-v12">街道</label>
      <input id="outdoors-v12" type="radio" name="rtoggle" value="outdoors" />
      <label for="outdoors-v12">户外</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },

  components: {},
  created() {},
  mounted() {
    this.initmap();
  },
  computed: {},

  methods: {
    initmap() {
      this.$mapboxgl.accessToken =
        "pk.xxxoidGlnZXJiZ3AyMDIwIiwiYSI6ImNsaGhpb3Q0ZTBvMWEzcW1xcXd4aTk5bzIifQ.4mA7mUrhK09N4vrrQfZA_Q";

      this.map = new this.$mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/satellite-streets-v12", //mapbox://styles/mapbox/satellite-streets-v12
        projection: "globe",
        center: [104.07, 30.67],
        zoom: 3,
        // pitch: 60, //视野倾斜，0-60
        // bearing: -17.6,//视野旋转角度
      });
      const layerList = document.getElementById("menu");
      const inputs = layerList.getElementsByTagName("input");

      for (const input of inputs) {
        input.onclick = (layer) => {
          const layerId = layer.target.id;
          this.map.setStyle("mapbox://styles/mapbox/" + layerId);
        };
      }
	}
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#menu {
  position: absolute;
  background: #efefef;
  padding: 10px;
  font-family: "Open Sans", sans-serif;
}
</style>

效果图：