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

前言

官网指引，生成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绘制面图层并进行添加、删除、更新、显隐等操作
1
2
3

效果

在这里插入图片描述

代码实现

<!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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

相关阅读:
sqlserver问题
 Jenkins技术概述与开发实战
 （附源码）spring boot大学毕业设计管理系统毕业设计 030945
分享几个Google Chrome谷歌浏览器历史版本下载网站
 手撸二叉树——二叉查找树
 JAVA的jdk1.8中文文档
 Springboot 打印接口耗时
 同一篇文章版权被同一公司反复起诉
 Linux系统中搭建DNS服务器
 vue表格中的内容换行与导出Excel换行
原文地址：https://blog.csdn.net/weixin_44402694/article/details/125415753