MapBox加载不同风格

王八八。

已于 2024-06-25 15:06:43 修改

阅读量585

点赞数

文章标签： javascript vue.js 3d 前端

于 2023-08-10 15:07:30 首次发布

本文链接：https://blog.csdn.net/weixin_42562567/article/details/132210416

版权

初始化MapBox地图：

	var map = new mapboxgl.Map({
          container: 'map',
          zoom: 3,
          center: [105, 34],
          
		  //此处更改地图风格
          style: 'mapbox://styles/mapbox/satellite-v9',
          hash: false,
      });

1.户外地图（mapbox://styles/mapbox/basic-v9）新版：（mapbox://styles/mapbox/outdoors-v12）支持三维地图
在这里插入图片描述

2.街道地图（mapbox://styles/mapbox/streets-v9）新版：（mapbox://styles/mapbox/streets-v12）支持三维地图
在这里插入图片描述
3.浅色地图（mapbox://styles/mapbox/light-v9）新版：（mapbox://styles/mapbox/light-v11）支持三维地图

4.深色地图（mapbox://styles/mapbox/dark-v9）新版：（mapbox://styles/mapbox/dark-v11）支持三维地图

5.鲜艳地图（mapbox://styles/mapbox/bright-v9）
在这里插入图片描述
6.影像地图（mapbox://styles/mapbox/satellite-v9）

7.导航地图+实时交通路况+白天（mapbox://styles/mapbox/navigation-preview-day-v2）

8.导航地图+实时交通路况+夜晚（mapbox://styles/mapbox/navigation-preview-night-v2）

9.导航地图+白天
（mapbox://styles/mapbox/navigation-guidance-day-v2）
在这里插入图片描述