mapbox地图投影

满分观察网友z

已于 2024-02-28 10:19:51 修改

阅读量759

点赞数 18

分类专栏： mapbox 文章标签： javascript css web arcgis

于 2024-02-27 15:27:37 首次发布

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

版权

mapbox 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

本文介绍了如何使用MapboxGLJS库在网页上创建可交互的地图，支持8种预设投影模式的切换，如Mercator、Globe等，并展示了相应的代码实现和效果演示。

摘要由CSDN通过智能技术生成

本案例使用Mapbox GL JS库创建地图投影的示例。它允许用户从 8 种预设的地图投影模式中选择一种，并实时查看效果。

1. 引入 CDN 链接

<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<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="mercator">mercator</option>
  <option value="globe">globe</option>
  <option value="albers">albers</option>
  <option value="equalEarth">equalEarth</option>
  <option value="equirectangular">equirectangular</option>
  <option value="lambertConformalConic">lambertConformalConic</option>
  <option value="naturalEarth">naturalEarth</option>
  <option value="winkelTripel">winkelTripel</option>
</select>

3. 创建地图

3.1. 地图实例

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

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

3.2. 设置地球的背景颜色

地图加载完成后，设置了雾化效果。

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

3.3. 更新地图

通过监听下拉菜单的onchange事件，当用户选择一个新的地图投影模式时，会更新地图的投影设置。

const select = document.getElementById("select");
select.onchange = (e) => {
  map.setProjection({
    name: e.target.value,
  });
};

4. 地图样式

* {
  margin: 0;
  padding: 0;
}
#map {
  width: 100vw;
  height: 100vh;
}
#select {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
}

5. 演示效果

5.1. mercator

5.2. globe

5.3. albers

5.4. equalEarth

5.5. equirectangular

5.6. lambertConformalConic

5.7. naturalEarth

5.8. winkelTripel

6. 代码实现

<!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链接 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <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="mercator">mercator</option>
      <option value="globe">globe</option>
      <option value="albers">albers</option>
      <option value="equalEarth">equalEarth</option>
      <option value="equirectangular">equirectangular</option>
      <option value="lambertConformalConic">lambertConformalConic</option>
      <option value="naturalEarth">naturalEarth</option>
      <option value="winkelTripel">winkelTripel</option>
    </select>
    <div id="map"></div>
    <script>
      // 3.地图显示
      window.onload = () => {
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 3.1 创建地图实例
        const map = new mapboxgl.Map({
          // 在这个对象中，我们填入一些地图相关的参数设置
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
          center: [114.3, 30.5], //默认注视的坐标点
          zoom: 1, //当前展示的地图级别
          projection: "globe", //地图投影模式
        });

        // 3.2 设置地球的背景颜色
        map.on("style.onload", () => {
          map.setFog({});
        });

        // 3.3 更新地图
        const select = document.getElementById("select");
        select.onchange = (e) => {
          map.setProjection({
            name: e.target.value,
          });
        };
      };
    </script>
  </body>
</html>