【MAPBOX基础功能】10、mapbox绘制面图层并进行添加、删除、更新、显隐等操作

本文链接：https://blog.csdn.net/weixin_44402694/article/details/125415753

该博客介绍了如何使用Mapbox GL JS库进行面图层的添加、更新、隐藏、显示、颜色修改及删除操作。通过示例代码展示了具体的实现步骤，并提供了详细的官方指南链接以获取accesstoken和相关依赖。

摘要生成于 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>10、上图面图层相关操作</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="update()">更新数据</button>
      </li>
      <li>
        <button onclick="hide()">隐藏</button>
      </li>
      <li>
        <button onclick="show()">显示</button>
      </li>
      <li>
        <button onclick="editPolygonColor()">修改面颜色</button>
      </li>
      <li>
        <button onclick="editOutlineColor()">修改面边界颜色</button>
      </li>
      <li>
        <button onclick="deleteLayer()">删除</button>
      </li>
    </ul>
    <script>
      let marker = null
      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 && map.getSource('surface')) {
          map.removeLayer('surface')
          map.removeSource('surface')
        }
        map.addSource('surface', {
          type: 'geojson',
          data: {
            type: 'Feature',
            properties: {
              color: 'red',
            },
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [120, 30],
                  [124, 32],
                  [126, 34],
                  [130, 30],
                  [128, 28],
                  [120, 30],
                ],
              ],
            },
          },
        })
        map.addLayer({
          id: 'surface',
          type: 'fill',
          source: 'surface',
          paint: {
            'fill-color': ['get', 'color'],
            'fill-opacity': 1,
            'fill-outline-color': ['get', 'color'],
          },
        })
      }

      // 更新数据源
      function update() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.getSource('surface').setData({
          type: 'Feature',
          properties: {
            color: 'green',
          },
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [110.10937500000074, 36.285607744174015],
                [146.84765624999983, 35.71678108829262],
                [146.14453125000034, 12.003498241279189],
                [112.0429687500008, 13.546316937477897],
              ],
            ],
          },
        })
      }

      // 隐藏
      function hide() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.setLayoutProperty('surface', 'visibility', 'none')
      }

      // 显示
      function show() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.setLayoutProperty('surface', 'visibility', 'visible')
      }

      // 修改面颜色
      function editPolygonColor() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.setPaintProperty('surface', 'fill-color', 'blue')
      }

      // 修改边框颜色
      function editOutlineColor() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.setPaintProperty('surface', 'fill-outline-color', 'blue')
      }

      // 删除点位
      function deleteLayer() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.removeLayer('surface')
        map.removeSource('surface')
      }
    </script>
  </body>
</html>