【MAPBOX基础功能】14、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>14、filter - 高亮面图层中指定的面</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="highlight()">高亮id=2的要素</button>
      </li>
      <li>
        <button onclick="removeHighlight()">移除高亮</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.removeLayer('surface-highlight')
          map.removeSource('surface')
        }
        map.addSource('surface', {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {
                  id: '1',
                  color: 'green',
                },
                geometry: {
                  type: 'Polygon',
                  coordinates: [
                    [
                      [120, 30],
                      [124, 32],
                      [126, 34],
                      [130, 30],
                      [128, 28],
                      [120, 30],
                    ],
                  ],
                },
              },
              {
                type: 'Feature',
                properties: {
                  id: '2',
                  color: 'green',
                },
                geometry: {
                  type: 'Polygon',
                  coordinates: [
                    [
                      [100, 28],
                      [108, 32],
                      [112, 34],
                      [118, 30],
                      [100, 28],
                    ],
                  ],
                },
              },
            ],
          },
        })
        map.addLayer({
          id: 'surface',
          type: 'fill',
          source: 'surface',
          paint: {
            'fill-color': ['get', 'color'],
            'fill-opacity': 1,
            'fill-outline-color': ['get', 'color'],
          },
        })
        map.addLayer({
          id: 'surface-highlight',
          type: 'fill',
          source: 'surface',
          paint: {
            'fill-color': 'red',
            'fill-opacity': 1,
            'fill-outline-color': 'red',
          },
          filter: ['in', 'id', '-10000'],
        })
      }
      // 高亮指定id的要素
      function highlight() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.setFilter('surface-highlight', [
          '==',
          ['string', ['get', 'id']],
          '2',
        ])
      }
      // 移除高亮
      function removeHighlight() {
        if (!map.getSource('surface')) {
          return alert('请先添加')
        }
        map.setFilter('surface-highlight', [
          '==',
          ['string', ['get', 'id']],
          '-10000',
        ])
      }
      map.on('click', 'surface', (e) => {
        const features = map.queryRenderedFeatures(e.point)
        if (features.length > 0) {
          map.setFilter('surface-highlight', [
            '==',
            ['string', ['get', 'id']],
            features[0].properties.id,
          ])
        }
      })
    </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

相关阅读:
Vue学习笔记之搭建环境 (一)
股票交易sdk接口源码分享
 设计模式学习笔记 - 面向对象 - 1.面向对象到底讨论的是什么
 Thumbs.db文件取消自动生成及删除方法
 【计算机网络】第六章：应用层
 C++修炼之路之继承＜二＞
大学管理学期末重点复习
 Android音视频开发-AudioTrack
Workfine新手入门：日期间隔函数
 Docker compose
原文地址：https://blog.csdn.net/weixin_44402694/article/details/125420705