mapbox控件

🕗 发布于 2024-03-01 11:25 GIS arcgis web WebGIS

本案例主要是介绍定位控件、全屏控件、地图导航控件、地图搜索控件、地图缩放控件、比例尺控件、鹰眼控件、数据来源控件以及汉化控件，还有其他控件可以去 mapbox 官网（mapbox-gl-js）学习。

1. 演示效果

2. 引入 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"
/>

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. 定位控件

在地图上添加位置获取控制（Geolocate Control），以便我们可以通过地理位置服务获取当前位置。

map.addControl(
  new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true,
    },
    // When active the map will receive updates to the device's location as it changes.
    trackUserLocation: true,
    // Draw an arrow next to the location dot to indicate which direction the device is heading.
    showUserHeading: true,
  })
);

5. 全屏控件

在地图可视化界面中添加一个全屏控制（Fullscreen Control），以便于我们可以通过点击页面上的一个按钮来切换地图视图的全屏模式。

// 通过文档我们发现，只有一个参数，用来控制全屏哪个标签
map.addControl(
  new mapboxgl.FullscreenControl({
    container: document.getElementById("map"),
  })
);
// addControl的第二个参数,控制控件显示的位置

6. 地图导航控件

6.1. 引入地图导航插件

<!-- 地图导航的插件 -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
<link
  rel="stylesheet"
  href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css"
  type="text/css"
/>

6.2. 显示地图导航控件

我们可以向地图添加一个基于 Mapbox 导航服务的控制面板。

// 地图导航控件（功能很多，可以多看看）
map.addControl(
  new MapboxDirections({
    accessToken: mapboxgl.accessToken,
  }),
  "top-left"
);

6.3. 实现操作

当我们在地图上选择一个目的地时，这个控制面板会显示导航信息，如距离、方向、时间、交通工具等等。我们还可以点击按钮来触发导航，或者使用触摸设备来在地图上滑动来选择目的地。

缺点：地图导航控件目前还没支持汉化。

7. 地图搜索控件

我们可以在地图上添加一个 Mapbox 地理编码器控件。Mapbox 是一个地理位置搜索和分析工具，Geocoder是一个用于将地理文本（如地址和经纬度）映射到实际地理位置的组件。

7.1. 第一种写法

直接添加。使用map.addControl()方法将控件添加到地图上。

map.addControl(
  new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl,
  }),
  "top-right"
);

7.2. 第二种写法

将它放到一个 div 里面。将MapboxGeocoder添加到地图实例map的domElement中。这里的domElement是指地图容器元素，通过getElementById方法获取了地图容器，并将Geocoder添加到该元素中。

const geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
});
document.getElementById("geocoder").appendChild(geocoder.onAdd(map));

创建 div 元素

<div id="geocoder"></div>

设置样式

#geocoder {
  position: absolute;
  z-index: 3;
  width: 30%;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  display: flex;
  justify-content: center;
}
/* 引入插件比较多，可能会导致样式冲突，我们手动解决冲突问题 */
.mapboxgl-ctrl-geocoder--input {
  padding-left: 30px !important;
}

通过设置样式，我们可以看到搜索框出现在界面的中上。

推荐使用第二种写法，可以设置样式进行调整。

8. 地图缩放控件

这个控制组件通常位于地图的底部或右侧面，可以方便我们进行地图浏览和缩放，自身也附带一个指南针。

const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "bottom-left");

9. 比例尺控件

ScaleControl是一个控制，用于显示地图上范围的缩放比例，我们设置了最大宽度为 80。scale.setUnit方法接受一个单位字符串作为参数，这里的metric表示千米。

const scale = new mapboxgl.ScaleControl({
  maxWidth: 80,
  unit: "imperial",
});
map.addControl(scale);

scale.setUnit("metric");

10. 鹰眼控件

10.1. 引入插件

<!-- 鹰眼插件 -->
<script src="http://aesqe.github.io/mapboxgl-minimap/mapboxgl-control-minimap.js"></script>

<!-- 地图插件 -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link
  rel="stylesheet"
  href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
  type="text/css"
/>

10.2. 添加小地图

mapboxgl.Minimap()：这是 Mapbox GL 中的一个类，用于创建一个最小地图，以便我们可以更好地了解整个地图的范围和位置。

zoomLevels: []：这个属性定义了最小地图的可视化缩放级别。如果用户将鼠标悬停在最小地图上，地图会将鼠标位置所在的缩放级别显示为粗粒度。这个属性可以是数组，包含想要在最小地图中显示的缩放级别。如果这个属性为空，则表示地图会自动设置可视化缩放级别。

map.addControl(
  new mapboxgl.Minimap({
    center: [114.085947, 22.547],
    zoom: 6,
    zoomLevels: [],
  }),
  "top-right"
);

11. 数据来源控件

该控件位于地图右下角，显示地图数据来源的信息和贡献者。

map.addControl(
  new mapboxgl.AttributionControl({
    compact: true,
    customAttribution: ["南宁师范大学", "满分观察网友z"],
  })
);

12. 汉化控件

12.1. 引入插件

<!-- 汉化插件 -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js"></script>

12.2. 添加汉化控件

MapboxLanguage类负责处理语言切换的功能，它提供一个默认的语言设置（我们这里是“zh-Hans”，中文），并在地图上显示相应的语言标签。

map.addControl(
  new MapboxLanguage({
    defaultLanguage: "zh-Hans", //设置默认语言
  })
);

13. 代码实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mapbox控件</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"
    />
    <!-- 地图导航的插件 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
    <link
      rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css"
      type="text/css"
    />
    <!-- 鹰眼插件 -->
    <script src="http://aesqe.github.io/mapboxgl-minimap/mapboxgl-control-minimap.js"></script>

    <!-- 汉化插件 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js"></script>

    <!-- 地图插件 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link
      rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
      type="text/css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
      #geocoder {
        position: absolute;
        z-index: 3;
        width: 30%;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
        display: flex;
        justify-content: center;
      }
      /* 引入插件比较多，可能会导致样式冲突，我们手动解决冲突问题 */
      .mapboxgl-ctrl-geocoder--input {
        padding-left: 30px !important;
      }
    </style>
  </head>
  <body>
    <div id="geocoder"></div>
    <div id="map"></div>
    <script>
      // 2.创建地图实例
      window.onload = () => {
        // 注册token
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 初始化图像
        const map = new mapboxgl.Map({
          // 在这个对象中，我们填入一些地图相关的参数设置
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/streets-v12", //地图风格，底图数据源
          center: [114.085947, 22.547], //默认注视的坐标点
          zoom: 12, //当前展示的地图级别
          projection: "globe", //地图投影模式
        });
        // 3.定位控件
        map.addControl(
          new mapboxgl.GeolocateControl({
            positionOptions: {
              enableHighAccuracy: true,
            },
            // When active the map will receive updates to the device's location as it changes.
            trackUserLocation: true,
            // Draw an arrow next to the location dot to indicate which direction the device is heading.
            showUserHeading: true,
          })
        );
        // 4.全屏控件
        // 通过文档我们发现，只有一个参数，用来控制全屏哪个标签
        map.addControl(
          new mapboxgl.FullscreenControl({
            container: document.getElementById("map"),
          })
        );
        // addControl的第二个参数,控制控件显示的位置

        // 5.地图导航控件（功能很多，可以多看看）
        map.addControl(
          new MapboxDirections({
            accessToken: mapboxgl.accessToken,
          }),
          "top-left"
        );

        // 6.地图搜索控件
        // 第一种写法，直接添加
        // map.addControl(
        // new MapboxGeocoder({
        // accessToken:mapboxgl.accessToken,
        //     mapboxgl:mapboxgl
        // }),
        //   "top-right"
        // );
        // 第二种写法，将它放到一个div里面
        const geocoder = new MapboxGeocoder({
          accessToken: mapboxgl.accessToken,
          mapboxgl: mapboxgl,
        });
        document.getElementById("geocoder").appendChild(geocoder.onAdd(map));

        // 7.地图缩放控件
        const nav = new mapboxgl.NavigationControl();
        map.addControl(nav, "bottom-left");

        // 8.比例尺控件
        const scale = new mapboxgl.ScaleControl({
          maxWidth: 80,
          unit: "imperial",
        });
        map.addControl(scale);

        scale.setUnit("metric");

        // 9.鹰眼控件
        map.addControl(
          new mapboxgl.Minimap({
            center: [114.085947, 22.547],
            zoom: 6,
            zoomLevels: [],
          }),
          "top-right"
        );

        // 10.数据来源显示控件
        map.addControl(
          new mapboxgl.AttributionControl({
            compact: true,
            customAttribution: ["南宁师范大学", "满分观察网友z"],
          })
        );

        // 11.汉化控件
        map.addControl(
          new MapboxLanguage({
            defaultLanguage: "zh-Hans", //设置默认语言
          })
        );
      };
    </script>
  </body>
</html>

原文地址：https://blog.csdn.net/dongxiaod1/article/details/136386595

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：无穷级数法求Π
下一篇：matlab：涉及复杂函数图像的交点求解

春意融融：Spring Boot技术在“衣依”服装销售平台的应用
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性
阅读更多2024-10-04
系统架构设计师教程第13章 13.2 表现层架构设计笔记
UIP 提供了一个扩展的框架，用于简化用户界面与商业逻辑代码的分离的方法，可以用它来写复杂的用户界面导航和工作流处理，并且它能够复用在不同的场景、并可以随着应用的增加而进行扩展。界面定制是对用户界面
阅读更多2024-10-04
论文翻译 | Language Models are Few-Shot Learners 语言模型是少样本学习者（中）
在图3.1中，我们展示了第2节描述的8个模型的训练曲线。对于这个图表，我们还包括了6个额外的超小型模型，参数数量少至100,000。正如[KMH+20]中观察到的，当有效利用训练计算时，语言建模性能遵
阅读更多2024-10-04
c++11~c++20 结构化绑定
结构化帮绑定可以作用于3中类型。
阅读更多2024-10-04
Hive SQL业务场景：连续5天涨幅超过5%股票
现有一张股票价格表 dwd_stock_trade_dtl 有3个字段分别是：股票代码(stock_code),日期(trade_date)，收盘价格(closing_price)。请找出满足连续5天
阅读更多2024-10-04
LeetCode 27 remove element
【代码】LeetCode 27 remove element。
阅读更多2024-10-04
uniapp微信小程序巧用跳转封装鉴权路由
2.引入main.js函数进行使用。4.非常完美，完结撒花。
阅读更多2024-10-04
Python人工智能使用OpenCV进行图片形状的中心检测
我们都知道正方形（长方形）的中心是2条对角线的交点，圆的中心是一个圆的圆心，如何在对象检测以及图片检测与识别领域，判断一个形状的中心，便是计算机视觉领域中的一个基础检测
阅读更多2024-10-04
SQL Server 分页查询的学习文章
SQL Server 分页查询的学习文章
阅读更多2024-10-04
报错 libgomp.so.1, needed by vendor/llama.cpp/ggml/src/libggml.so, not found
安装命令 pip install "xinference[all]"在安装 xinference时报错。
阅读更多2024-10-04