自定义样式

TIP

mapbox gl draw 画出来的图形是多个图层的组合，要想彻底重定义样式，可以根据需求修改theme.js源码，然后传入构造函数。

示例

Choose Mode：

示例源码

vue

<template>
  <div class="actions">
    Choose Mode：
    <select v-model="mode" style="width: 250px" @change="changeMode">
      <optgroup label="文本(Text)">
        <option value="draw_text">文本(Text)</option>
      </optgroup>
      <optgroup label="线状(Line)">
        <option value="draw_line_string">折线(Line)</option>
        <option value="draw_curve">曲线(Curve)</option>
        <option value="draw_arc">弧线(Arc)</option>
      </optgroup>
      <optgroup label="面状(Area)">
        <option value="draw_polygon">多边形(Polygon)</option>
        <option value="draw_circle">圆(Circle)</option>
        <option value="draw_ellipse">椭圆(Ellipse)</option>
        <option value="draw_rectangle">矩形(Rectange)</option>
        <option value="draw_sector">扇形(Sector)</option>
        <option value="draw_lune">弓形(Lune)</option>
        <option value="draw_closed_curve">闭合曲面(Closed Curve)</option>
      </optgroup>
      <optgroup label="箭头(Arrow)">
        <option value="draw_fine_arrow">细直箭头(Fine Arrow)</option>
        <option value="draw_assault_direction">
          突击方向(Assault Direction)
        </option>
        <option value="draw_double_arrow">钳击(Double Arrow)</option>
        <option value="draw_attack_arrow">进攻箭头(Attack Arrow)</option>
        <option value="draw_tailed_attack_arrow">
          燕尾进攻箭头(Tailed Attack Arrow)
        </option>
        <option value="draw_squad_combat">战斗小队(Squad Combat)</option>
      </optgroup>
      <optgroup label="图片(Image)">
        <option value="draw_image">图片(Image)</option>
      </optgroup>
    </select>
  </div>
  <div class="map-container black">
    <mb-map :zoom="8" :center="[116.3466, 39.8704]" @created="createdHandler" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MapboxDraw from '@mapbox-web/draw'
import customTheme from './custom-theme'
import type { Map } from 'mapbox-gl'

const mode = ref('')

let draw: MapboxDraw

const createdHandler = (map: Map) => {
  draw = new MapboxDraw(map, {
    userProperties: true,
    styles: customTheme,
  })
}
const changeMode = () => {
  if (mode.value === 'draw_text') {
    draw.changeMode(mode.value, {
      text: 'Text',
      'text-color': 'white',
      'text-size': 20,
    })
  } else if (mode.value === 'draw_image') {
    draw.changeMode(mode.value, { imageId: 'logo', imageUrl: '/logo.png' })
  } else {
    draw.changeMode(mode.value)
  }
}
</script>
<style>
.actions {
  margin-bottom: 5px;
}
</style>

自定义样式源码

export default [
  {
    'id': 'gl-draw-symbol-inactive',
    'type': 'symbol',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'user_display-type', 'symbol'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'text-color': ['get', 'user_text-color'],
    },
    'layout': {
      'text-allow-overlap': true,
      'icon-allow-overlap': true,
      'text-size': ['get', 'user_text-size'],
      'icon-image': ['get', 'user_image-id'],
      'icon-size': ['get', 'user_icon-size'],
      'text-field': ['get', 'user_text'],
      'text-font': ['Open Sans Regular']
    }
  },
  {
    'id': 'gl-draw-symbol-active',
    'type': 'symbol',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'user_display-type', 'symbol'],
      ['==', '$type', 'Point'],
      ['==', 'active', 'true'],
      ['==', 'meta', 'feature']
    ],
    'paint': {
      'text-color': ['get', 'user_text-color'],
    },
    'layout': {
      'text-allow-overlap': true,
      'icon-allow-overlap': true,
      'text-size': ['get', 'user_text-size'],
      'icon-image': ['get', 'user_image-id'],
      'icon-size': ['get', 'user_icon-size'],
      'text-field': ['get', 'user_text'],
      'text-font': ['Open Sans Regular']
    }
  },
  {
    'id': 'gl-draw-polygon-fill-inactive',
    'type': 'fill',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'Polygon'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'fill-color': ['get', 'user_fill-color'],
      'fill-outline-color': ['get', 'user_line-color'],
      'fill-opacity': ['get', 'user_opacity']
    },
  },
  {
    'id': 'gl-draw-polygon-fill-active',
    'type': 'fill',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
    'paint': {
      'fill-color': ['get', 'user_fill-color'],
      'fill-outline-color': ['get', 'user_line-color'],
      'fill-opacity': ['get', 'user_opacity']
    },
  },
  {
    'id': 'gl-draw-polygon-midpoint',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'midpoint']],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-inactive',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'Polygon'],
      ['!=', 'mode', 'static']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-active',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-dasharray': [0.2, 2],
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-line-inactive',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'LineString'],
      ['!=', 'mode', 'static']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-width': ['get', 'user_line-width'],
      'line-opacity': ['get', 'user_opacity'],
    }
  },
  {
    'id': 'gl-draw-line-active',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'LineString'],
      ['==', 'active', 'true']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-dasharray': [0.2, 2],
      'line-color': ['get', 'user_line-color'],
      'line-width': 5,
      'line-opacity': 1,
    }
  },
  {
    'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'meta', 'vertex'],
      ['==', '$type', 'Point'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-polygon-and-line-vertex-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'meta', 'vertex'],
      ['==', '$type', 'Point'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-point-point-stroke-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['!has', 'user_display-type'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 5,
      'circle-opacity': 1,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-point-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['!has', 'user_display-type'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#3bb2d0'
    }
  },
  {
    'id': 'gl-draw-point-stroke-active',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['==', 'active', 'true'],
      ['!=', 'meta', 'midpoint']
    ],
    'paint': {
      'circle-radius': 7,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-point-active',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['!=', 'meta', 'midpoint'],
      ['==', 'active', 'true']],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-polygon-fill-static',
    'type': 'fill',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
    'paint': {
      'fill-color': '#404040',
      'fill-outline-color': '#404040',
      'fill-opacity': 0.1
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-static',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': '#404040',
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-line-static',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': '#404040',
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-point-static',
    'type': 'circle',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Point']],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#404040'
    }
  },
];

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289

默认样式源码

export default [
  {
    'id': 'gl-draw-symbol-inactive',
    'type': 'symbol',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'user_display-type', 'symbol'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'text-color': ['get', 'user_text-color'],
    },
    'layout': {
      'text-allow-overlap': true,
      'icon-allow-overlap': true,
      'text-size': ['get', 'user_text-size'],
      'icon-image': ['get', 'user_image-id'],
      'icon-size': ['get', 'user_icon-size'],
      'text-field': ['get', 'user_text'],
      'text-font': ['Open Sans Regular']
    }
  },
  {
    'id': 'gl-draw-symbol-active',
    'type': 'symbol',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'user_display-type', 'symbol'],
      ['==', '$type', 'Point'],
      ['==', 'active', 'true'],
      ['==', 'meta', 'feature']
    ],
    'paint': {
      'text-color': ['get', 'user_text-color'],
    },
    'layout': {
      'text-allow-overlap': true,
      'icon-allow-overlap': true,
      'text-size': ['get', 'user_text-size'],
      'icon-image': ['get', 'user_image-id'],
      'icon-size': ['get', 'user_icon-size'],
      'text-field': ['get', 'user_text'],
      'text-font': ['Open Sans Regular']
    }
  },
  {
    'id': 'gl-draw-polygon-fill-inactive',
    'type': 'fill',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'Polygon'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'fill-color': ['get', 'user_fill-color'],
      'fill-outline-color': ['get', 'user_line-color'],
      'fill-opacity': ['get', 'user_opacity']
    },
  },
  {
    'id': 'gl-draw-polygon-fill-active',
    'type': 'fill',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
    'paint': {
      'fill-color': ['get', 'user_fill-color'],
      'fill-outline-color': ['get', 'user_line-color'],
      'fill-opacity': ['get', 'user_opacity']
    },
  },
  {
    'id': 'gl-draw-polygon-midpoint',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'midpoint']],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-inactive',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'Polygon'],
      ['!=', 'mode', 'static']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-active',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-dasharray': [0.2, 2],
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-line-inactive',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'active', 'false'],
      ['==', '$type', 'LineString'],
      ['!=', 'mode', 'static']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': ['get', 'user_line-color'],
      'line-width': ['get', 'user_line-width'],
      'line-opacity': ['get', 'user_opacity'],
    }
  },
  {
    'id': 'gl-draw-line-active',
    'type': 'line',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'LineString'],
      ['==', 'active', 'true']
    ],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-dasharray': [0.2, 2],
      'line-color': ['get', 'user_line-color'],
      'line-width': 2,
      'line-opacity': 1,
    }
  },
  {
    'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'meta', 'vertex'],
      ['==', '$type', 'Point'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-polygon-and-line-vertex-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', 'meta', 'vertex'],
      ['==', '$type', 'Point'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-point-point-stroke-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['!has', 'user_display-type'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 5,
      'circle-opacity': 1,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-point-inactive',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['!has', 'user_display-type'],
      ['==', 'active', 'false'],
      ['==', '$type', 'Point'],
      ['==', 'meta', 'feature'],
      ['!=', 'mode', 'static']
    ],
    'paint': {
      'circle-radius': 3,
      'circle-color': '#3bb2d0'
    }
  },
  {
    'id': 'gl-draw-point-stroke-active',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['==', 'active', 'true'],
      ['!=', 'meta', 'midpoint']
    ],
    'paint': {
      'circle-radius': 7,
      'circle-color': '#fff'
    }
  },
  {
    'id': 'gl-draw-point-active',
    'type': 'circle',
    'filter': ['all',
      ['!=', 'user_visible', false],
      ['==', '$type', 'Point'],
      ['!=', 'meta', 'midpoint'],
      ['==', 'active', 'true']],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#fbb03b'
    }
  },
  {
    'id': 'gl-draw-polygon-fill-static',
    'type': 'fill',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
    'paint': {
      'fill-color': '#404040',
      'fill-outline-color': '#404040',
      'fill-opacity': 0.1
    }
  },
  {
    'id': 'gl-draw-polygon-stroke-static',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': '#404040',
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-line-static',
    'type': 'line',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
    'layout': {
      'line-cap': 'round',
      'line-join': 'round'
    },
    'paint': {
      'line-color': '#404040',
      'line-width': 2
    }
  },
  {
    'id': 'gl-draw-point-static',
    'type': 'circle',
    'filter': ['all', ['!=', 'user_visible', false], ['==', 'mode', 'static'], ['==', '$type', 'Point']],
    'paint': {
      'circle-radius': 5,
      'circle-color': '#404040'
    }
  },
];

core

缓冲区（Buffer）

图片加载器（ImageLoader）

地图控件（Control）

env-layers

utils

超图iclient插件

3D模型文件

特效

3D模型文件

特效

自定义样式

示例

缓冲区（Buffer）

图片加载器（ImageLoader）

地图控件（Control）

自定义样式 ​

示例 Play ​

自定义样式

示例