用Mapmost聚类图分析天下

聚类地图是一种数据可视化工具，能够帮助用户在地图上直观地显示大量地理数据点。当数据点过多时，单独显示每个点会使地图变得紊乱，而聚类地图通过将相近的数据点聚集在一起，淘汰了视觉复杂性，便于分析和理解。聚类地图广泛应用于都会规划、市场分析等领域，而Mapmost提供了便捷的接口可以帮助用户快速生成一份聚类分析地图。
1. 根据分析目的获取数据集

起首根据要分析的对象，获取数据集并将其组织成GeoJson的格式，以2024年7月份的全国房价数据为例（数据泉源于统计公报等网络公开信息），组织后的部门数据如下所示。

1. {
2.   "type": "FeatureCollection",
3.   "features": [
4.     {
5.       "type": "Feature",
6.       "properties": {
7.         "city": "上海",
8.         "price": 59992
9.       },
10.       "geometry": {
11.         "type": "Point",
12.         "coordinates": [
13.           121.473667,
14.           31.230525
15.         ]
16.       }
17.     },
18.     {
19.       "type": "Feature",
20.       "properties": {
21.         "city": "深圳",
22.         "price": 59855
23.       },
24.       "geometry": {
25.         "type": "Point",
26.         "coordinates": [
27.           114.057939,
28.           22.543527
29.         ]
30.       }
31.     },
32.     //......
33.   ]
34. }

复制代码

2. 加载聚类图层

2.1. 加载数据

通过GeoJSON格式加载数据，并将其添加到地图中：

1. map.on('load', () => {
2.   map.addSource('clusters', {
3.     type: 'geojson',
4.     data: 'data.geojson',          // 数据路径
5.     cluster: true,                                        // 是否聚类
6.     clusterMaxZoom: 14,                 //最大聚合层级，低于该层级不再聚合
7.     clusterRadius: 50,                         // 点聚合半径
8.     clusterProperties: {    // 聚类后的点的属性
9.       sum: ['+', ['get', 'price']],
10.       count: ['+', 1],
11.     }
12.   });
13. });

复制代码

如上所示，聚类图层必要在加载数据源的时候打开聚类设置，聚类后点的属性由clusterProperties指定，其对应的值会由指定表达式累积计算。
2.2. 设置聚类图层样式

对添加的数据设置图层样式以可视化聚类结果：

1. map.addLayer({
2.   id: "clusters-single",
3.   type: "circle",
4.   source: "clusters",
5.   filter: ["!", ["has", "point_count"]],
6.   paint: {
7.     "circle-color": "#21984c",
8.     'circle-stroke-width': 6,
9.     'circle-stroke-color': 'rgba(33,152,76,0.4)',
10.     "circle-radius": 5,
11.   }
12. });
13. map.addLayer({
14.   id: 'cluster-single-text',
15.   type: 'symbol',
16.   source: 'clusters',
17.   filter: ['!', ['has', 'point_count']],
18.   layout: {
19.     "text-field": ['get', 'price'],
20.     'text-size': 12
21.   },
22.   paint: {
23.     "text-color": "#fff",
24.     "text-halo-color": "#333",
25.     "text-halo-width": 1,
26.   }
27. });
28. map.addLayer({
29.   id: "clusters",
30.   type: "circle",
31.   source: "clusters",
32.   filter: ["has", "point_count"],
33.   paint: {
34.     "circle-color": [
35.       "step", ["get", "point_count"],
36.       "#21984c", 50,
37.       "#e27530", 120,
38.       "#e61f16"
39.     ],
40.     'circle-stroke-width': 6,
41.     'circle-stroke-color': [
42.       'step', ['get', 'point_count'],
43.       'rgba(33,152,76,0.4)', 50,
44.       'rgba(226,117,84,0.4)', 120,
45.       'rgba(230,31,22,0.4)',
46.     ],
47.     "circle-radius": [
48.       "step", ["get", "point_count"],
49.       10, 20,
50.       20, 75,
51.       25, 150,
52.       30
53.     ],
54.   }
55. });
56. map.addLayer({
57.   id: "cluster-text",
58.   type: "symbol",
59.   source: "clusters",
60.   filter: ["has", "point_count"],
61.   layout: {
62.     "text-field": [
63.       'number-format',
64.       ['/', ['get', 'sum'], ['get', 'point_count']],
65.       { 'min-fraction-digits': 0, 'max-fraction-digits': 2 }
66.     ],
67.     "text-size": [
68.       'step', ['get', 'point_count'],
69.       10, 8,
70.       20, 14,
71.       25, 18,
72.       20
73.     ],
74.   },
75.   paint: {
76.     "text-color": "#fff",
77.     "text-halo-color": "#333",
78.     "text-halo-width": 1,
79.   }
80. });

复制代码

如上所示，通过point_count属性可以区分当前渲染点是否是聚类点，对于聚类点和非聚类点我们可以采取不同的设置进行显示。对于非聚类点，我们直接显示出其对应价格，并设置一个默认的颜色。对于聚类点，我们可以通过point_count属性获取到当前聚类点是有多少个点聚合而成的，同时根据我们之前设定的聚类属性可以获取到其对应点簇的房价总和，进而计算出平均房价，通过这些值我们就可以很好的将一个地区附近的房价数据自动聚合计算。最终效果如下图所示：

3. 结语

聚类地图是一种有效的数据可视化工具，通过Mapmost的强大功能，我们可以轻松创建和展示聚类地图。这种地图的优势在于它能将复杂的数据以直观的方式呈现，使得用户能够快速理解数据分布环境。将来，我们可以进一步扩展聚类地图的功能，比方添加交互效果、过滤功能等，以满足更复杂的需求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。