使用Mapbox GL JS中内置函数来将点集合成簇
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A';
var map = new mapboxgl.Map({
container: 'map', /*放置地图的div容器 */
style: 'mapbox://styles/mapbox/dark-v9', /* 地图风格 */
center: [-103.59179687498357, 40.66995747013945],
zoom: 3
});
map.on('load', function() { /*on()为事件添加监听器 */
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true.
map.addSource("earthquakes", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson", /* 指向GEOJSON文件的url路径 */
cluster: true, /* 如果数据是一系列特征的点的集合,将cluster属性设置为true可以根据半径将点聚集成组 */
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
// Use the earthquakes source to create five layers:
// One for unclustered points, three for each cluster category,
// and one for cluster labels.
map.addLayer({
"id": "unclustered-points",
"type": "symbol",
"source": "earthquakes",
"filter": ["!has", "point_count"], /* ["!has", key] 表示feature[key] does not exist,filter属性表示只有满足条件的特征才会显示出来*/
"layout": {
"icon-image": "marker-15"
}
});
// Display the earthquake data in three layers, each filtered to a range of
// count values. Each range gets a different fill color.
var layers = [
[150, '#f28cb1'],
[20, '#f1f075'],
[0, '#51bbd6']
];
layers.forEach(function (layer, i) { /* forEach遍历数组,第一个参数是回调函数,对于每一个元素,forEach都会执行一下这个回调函数,回调函数中第一个参数是数组元素的值,第二个参数是数组元素的索引 */
map.addLayer({
"id": "cluster-" + i,
"type": "circle", /* circle 类型layer,七种layer中的一种,layer类型见 https://www.mapbox.com/mapbox-gl-style-spec/#layers */
"source": "earthquakes", /* 使用的source名称,即前面使用addSource()添加的source*/
"paint": {
"circle-color": layer[1],
"circle-radius": 18 /* circle半径,单位是像素 */
},
"filter": i === 0 ?
[">=", "point_count", layer[0]] : /* [">=", key, value]的含义是: greater than or equal: feature[key] ≥ value */
["all", /* ["all", f0, ..., fn] 的含义是:logical AND: f0 ∧ ... ∧ fn */
[">=", "point_count", layer[0]],
["<", "point_count", layers[i - 1][0]]] /* */
});
});
// Add a layer for the clusters' count labels
map.addLayer({
"id": "cluster-count",
"type": "symbol", /* symbol类型Layer */
"source": "earthquakes",
"layout": {
"text-field": "{point_count}", /* 该属性表示文本label种使用到的值 */
"text-font": [
"DIN Offc Pro Medium",
"Arial Unicode MS Bold"
],
"text-size": 12 /* 该属性表示字体大小 */
}
});
});
</script>
</body>
</html>