mapbox底图切换

满分观察网友z

已于 2024-02-28 10:20:14 修改

阅读量1.1k

点赞数 29

分类专栏： mapbox 文章标签：服务器前端运维 javascript html arcgis web

于 2024-02-28 08:51:00 首次发布

本文链接：https://blog.csdn.net/dongxiaod1/article/details/136336335

版权

mapbox 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

本案例使用Mapbox GL JavaScript库进行底图切换。

文章目录

1. 引入 CDN 链接
2. 创建菜单选项
3. 创建地图
4. 设置地球的背景颜色
5. 底图切换
6. 演示效果
7. 代码实现

1. 引入 CDN 链接

<!-- 引入Mapbox GL JS库 -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<!-- 引入Mapbox GL CSS样式 -->
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

2. 创建菜单选项

我们定义一个下拉菜单选项，供我们选择不同的地图底图。

<select name="projection" id="select">
  <option value="streets-v12">streets-v12</option>
  <option value="outdoors-v12">outdoors-v12</option>
  <option value="light-v11">light-v11</option>
  <option value="dark-v11">dark-v11</option>
  <option value="satellite-v9">satellite-v9</option>
  <option value="satellite-streets-v12">satellite-streets-v12</option>
</select>

3. 创建地图

我们创建了一个Mapbox GL JS地图实例，设置了地图的容器、默认的地图风格、中心点坐标、地图级别以及默认的地图投影模式。

const map = new mapboxgl.Map({
  // 在这个对象中，我们填入一些地图相关的参数设置
  container: "map", //地图容器
  style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
  center: [114.085947, 22.547], //默认注视的坐标点
  zoom: 12, //当前展示的地图级别
  projection: "globe", //地图投影模式
});

4. 设置地球的背景颜色

给地图设置 fog 效果，特别是在地图的视图比较远或者在夜晚地图上的细节不够清晰时，可以使用 fog 效果来提高可见性。

map.on("style.onload", () => {
  map.setFog({});
});

5. 底图切换

给select元素添加一个onchange事件监听器。当用户在选择框中更改选项时，地图的样式会根据新选项的值来设置。

const select = document.getElementById("select");
select.onchange = (e) => {
  map.setStyle(`mapbox://styles/mapbox/${e.target.value}`);
};

6. 演示效果

6.1. streets-v12

6.2. outdoors-v12

6.3. light-v11

6.4. dark-v11

6.5. satellite-v9

6.6. satellite-streets-v12

7. 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>底图切换</title>
    <!-- 1.引入CDN链接 -->
    <!-- 引入Mapbox GL JS库 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <!-- 引入Mapbox GL CSS样式 -->
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      /* 地图样式 */
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
      #select {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <!-- 2.创建菜单选项 -->
    <select name="projection" id="select">
      <option value="streets-v12">streets-v12</option>
      <option value="outdoors-v12">outdoors-v12</option>
      <option value="light-v11">light-v11</option>
      <option value="dark-v11">dark-v11</option>
      <option value="satellite-v9">satellite-v9</option>
      <option value="satellite-streets-v12">satellite-streets-v12</option>
    </select>
    <div id="map"></div>
    <script>
      // 3.地图显示
      window.onload = () => {
        // 注册token
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 3.1 创建地图实例
        const map = new mapboxgl.Map({
          // 在这个对象中，我们填入一些地图相关的参数设置
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
          center: [114.085947, 22.547], //默认注视的坐标点
          zoom: 12, //当前展示的地图级别
          projection: "globe", //地图投影模式
        });
        // 5.设置地球的背景颜色
        map.on("style.onload", () => {
          map.setFog({});
        });
        // 6.底图切换
        const select = document.getElementById("select");
        select.onchange = (e) => {
          map.setStyle(`mapbox://styles/mapbox/${e.target.value}`);
        };
      };
    </script>
  </body>
</html>