console
var map = new mapboxgl.Map({
container: 'map',
zoom: 2,
center: [119.3, 29.7],
pitch: 0,
bearing: 0,
style: 'https://openmap.tech/styles/streets.json',
hash: true
});
map.on('load', function () {
map.addSource('earthquakes', {
type: 'geojson',
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'earthquakes',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'earthquakes',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'earthquakes',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 4,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
});
<div id="map"></div>
<select name="select" id="select">
<option value="streets" selected>标准</option>
<option value="terrain"">地形</option>
<option value="img"">影像</option>
</select>
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: -1;
}
select {
position: absolute;
right: 10px;
top: 10px;
}
.panel {
position: absolute;
left: 10px;
top: 10px;
z-index: 1111;
color: white;
background: gray;
padding: 3px 6px;
}