【MAPBOX基础功能】16、mapbox叠加图片图层到地图上

原创已于 2022-06-23 09:32:43 修改 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#MAPBOX

于 2022-06-23 09:31:52 首次发布

MAPBOX基础功能专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何使用Mapbox GL JS库在网页地图上添加、隐藏、显示、修改透明度以及删除图片图层。通过设置源和图层，实现了图片在地图上的覆盖，并提供了交互式的按钮进行操作控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

官网指引，生成accesstoken，下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501)
本文使用官网accesstoken，请自行生成私人token
mapbox叠加图片图层到地图上

前置图片

效果

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>16、添加图片图层到地图</title>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #map {
        width: 100%;
        height: 100%;
      }
      .btn-list {
        position: fixed;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <ul class="btn-list">
      <li>
        <button onclick="add()">添加</button>
      </li>
      <li>
        <button onclick="hide()">隐藏</button>
      </li>
      <li>
        <button onclick="show()">显示</button>
      </li>
      <li>
        <button onclick="editOpacity()">修改透明度</button>
      </li>
      <li>
        <button onclick="deleteLayer()">删除</button>
      </li>
    </ul>
    <script>
      mapboxgl.accessToken =
        'pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'
      const map = new mapboxgl.Map({
        container: 'map', // 容器 id
        style: 'mapbox://styles/mapbox/streets-v11', // mapbox底图
        center: [108, 35], // 初始化中心点
        zoom: 2, // 初始化层级
      })
      // 添加
      function add() {
        if (map.getSource('image')) {
          map.removeLayer('image')
          map.removeSource('image')
        }
        map.addSource('image', {
          type: 'image',
          url: './img/temperature.png',
          coordinates: [
            // 图片覆盖地图的四至点
            [73.47656249999999, 53.592504809039376], // 左上
            [135.1112921875038, 53.592504809039376], // 右上
            [135.1112921875038, 18.312810846425442], // 右下
            [73.47656249999999, 18.312810846425442], // 左下
          ],
        })
        map.addLayer({
          id: 'image',
          type: 'raster',
          source: 'image',
          paint: {
            'raster-opacity': 1,
          },
        })
      }
      // 隐藏
      function hide() {
        if (!map.getSource('image')) {
          return alert('请先添加')
        }
        map.setLayoutProperty('image', 'visibility', 'none')
      }
      // 显示
      function show() {
        if (!map.getSource('image')) {
          return alert('请先添加')
        }
        map.setLayoutProperty('image', 'visibility', 'visible')
      }
      // 修改透明度
      function editOpacity() {
        if (!map.getSource('image')) {
          return alert('请先添加')
        }
        map.setPaintProperty('image', 'raster-opacity', 0.5)
      }
      // 删除图层
      function deleteLayer() {
        if (map.getSource('image')) {
          map.removeLayer('image')
          map.removeSource('image')
        }
      }
    </script>
  </body>
</html>