聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程

  • A+
所属分类:地图服务
广告也精彩

Create and style clusters|Mapbox GL JSTutorial你在地图上查找租房信息,或二手房信息时,肯定见过很多这样的可视化效果吧?聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程来源:链家网还有在很多可视化项目中,例如今年二月份发布的疫情地图, 你也可以在之中发现点聚合的身影。聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程访问链接:https://www.mapbox.cn/coronavirusmap让我们选中集合图层, 缩放地图,看看是什么效果!你会发现当我们把地图缩小到国家级别,整个国家的数据聚合在一起显示;当把地图放大到行政省级状态时,数据又会重新聚合显示。这就是聚合图,作为数据可视化的一种,它简单而有效, 它把地图上的多个点聚合在一起,可视化为群集的效果——通过不同大小颜色的圈就能清楚的表达出一个区域的具体数值。聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程:那请问这个聚合图的效果如何实现呢?大部分情况下我们需要在不同的缩放级别去手动的计算聚合后的数据,然后再展示。但是!重点来啦!在 Mapbox 中我们的数据有一个很神奇的 cluster 参数,用这个参数就可以轻松实现这个聚合效果~现在就让我 Max 来教大家如何用 Mapbox GL JS 中的 cluster 参数轻松实现地图上的聚合图吧!初步介绍在这个教程中,我们以美国的地震数据为例,将从 12/22/2015 to 1/21/2016 发生 M1.0 (里氏震级1.0)以上的地震数量进行聚类的可视化。数据来源:数据来自于 USGS 美国地质调查局, 格式为 Geojson,链接在这????点击这里在线查看 Mapbox 官网上的代码与作品(最好用电脑哦)展示效果如下:聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程如果你对 Mapbox Gl Js 有点陌生, 请查看以下教程熟悉一下:中文视频教程 | 如何使用 Mapbox GL JS 把标记添加到地图上(含字幕)35 个你不知道却特好用的 Mapbox GL JS 插件 #GoGlobal Web WeekMapbox GL JS 又更新了?v1.10.0 四大亮点不可错过!第1步:确定底图这次我们直接使用 Mapbox 模板样式mapbox://styles/mapbox/dark-v10(当然,你也可以使用属于自己的地图样式), 然后使用你的 accesss token, 创建一个地图页面。部分代码如下:mapboxgl.accessToken = 'pk.eyJ1IjoiaXJpc2ppYXFpc2hpIiwiYSI6ImNqbTk1cm8zdDA1djMza21vMGVkbDRjcnQifQ.rl3QYFhlM3ra9Rb6lcJFDA';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/dark-v10',center: [-103.59179687498357, 40.66995747013945],zoom: 3});第2步:添加地震数据源在最前面, 我们已经处理好了地震数据,并且是 GeoJSON 格式的。现在,我们添加地震数据源,类型为 GeoJSON ,并将 "cluster "选项设置为true。GL-JS会将 point_count 属性添加到你的源数据中。设置聚类点的最大缩放度为 14,默认半径为 50。map.on('load', function() {// Add a new source from our GeoJSON data and// set the 'cluster' option to true. GL-JS will// add the point_count property to your source data.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://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',cluster: true,clusterMaxZoom: 14, // Max zoom to cluster points onclusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)});};第3步:添加 Cluster 图层现在,我们要添加 Cluster 所在的图层,数据来源为上方的 earthquake。在这里我们要将代表不同数量的聚类点,显示为不同颜色,不同大小。这就意味着, 当你缩放地图时,聚类点会随之改变并呈现不同的可视化效果。在这里,我们使用 Step Expression, 设置 3个范围来实现三种不同类型的圆圈:聚类点里的数量小于100时,显示为蓝色的半径为 20px 的圆圈。当点数在100和750之间时,为黄色的 30px 的圆圈。数量大于或等于750时,用粉红色的 40px 的圆圈表示。聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程代码如下:map.addLayer({id: 'clusters',type: 'circle',source: 'earthquakes',filter: ['has', 'point_count'],paint: {// Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)// with three steps to implement three types of circles:// * Blue, 20px circles when point count is less than 100// * Yellow, 30px circles when point count is between 100 and 750// * Pink, 40px circles when point count is greater than or equal to 750'circle-color': ['step',['get', 'point_count'],'#51bbd6',100,'#f1f075',750,'#f28cb1'],'circle-radius': ['step',['get', 'point_count'],20,100,30,750,40]}});第4步:添加 Cluster 显示的数字你还需要显示出聚类点代表的具体数量,可以用 Symbol 来表示。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}});第5步:显示地震发生地的信息,并实现与聚类点的交互当使用者对某个聚类点产生兴趣, 并前往探索时, 这个功能就很必要了。首先我们会添加所有地震点的信息。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'}});然后还要实现的是当用户点击某个聚类,地图会放大,最终以显示每个地震的发生地。// inspect a cluster on clickmap.on('click', 'clusters', function(e) {var features = map.queryRenderedFeatures(e.point, {layers: ['clusters']});var clusterId = features[0].properties.cluster_id;map.getSource('earthquakes').getClusterExpansionZoom(clusterId,function(err, zoom) {if (err) return; map.easeTo({center: features[0].geometry.coordinates,zoom: zoom});});});并且,当你单独点击每个单独的地震发生地,会弹出一个 Pop up, 显示具体的地震级数数据与是否发生海啸。聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程代码如下:// When a click event occurs on a feature in// the unclustered-point layer, open a popup at// the location of the feature, with// description HTML from its properties.map.on('click', 'unclustered-point', function(e) {var coordinates = e.features[0].geometry.coordinates.slice();var mag = e.features[0].properties.mag;var tsunami; if (e.features[0].properties.tsunami === 1) {tsunami = 'yes';} else {tsunami = 'no';} // Ensure that if the map is zoomed out such that// multiple copies of the feature are visible, the// popup appears over the copy being pointed to.while (Math.abs(e.lngLat.lng - coordinates[0]) 180) {coordinates[0] += e.lngLat.lng coordinates[0] ? 360 : -360;} new mapboxgl.Popup().setLngLat(coordinates).setHTML('magnitude: ' + mag + 'Was there a tsunami?: ' + tsunami).addTo(map);}); map.on('mouseenter', 'clusters', function() {map.getCanvas().style.cursor = 'pointer';});map.on('mouseleave', 'clusters', function() {map.getCanvas().style.cursor = '';});这样一个地震信息可视化的聚类交互地图就完成了!全部代码请前往官网查看 Mapbox GL JS 教程:Create and style clusters还有更多关于 Cluster 的教程请查看下方哦!Mapbox Sources ClusterMapbox circle Layer聚合图怎么实现?10分钟用一个案例说清楚!MapboxGLJS教程福利彩蛋你正在制作属于你的可视化项目吗?继续关注 Mapbox 公众号,获取更多教程与设计灵感!想与我们分享你的可视化作品,可以直接在下方评论或者微信后台留言给我们哦。欢迎您进入 Mapbox.cn 留下你的问题、建议、产品想法等,我们会在 1- 3 个工作日内回复你哦!
点击查看详情

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩
avatar

发表评论

您必须登录才能发表评论!