mapbox+three做3D可视化

Posted 2023-04-11

参考技术A   前段时间不算太忙，于是开展了一下基于mapbox+three的3D可视化效果的探究，之前看过阿里双11的大屏可视化和腾讯光启元基于unity的一些渲染效果，心向往之，总想着可以使用mapbox来实现。
  于是在threebox的帮助下，通过使用three.js实现了以下的一些效果：

  具体实现，等抽个空来写，只是初步实现了，后期还有些优化的工作。

PowerBI复杂地图可视化MapBox

参考技术A

先来看一个效果：（动画大小：3M）

随着鼠标滚动，一群密集粘连的热力地图逐渐被展开成大小不一的色点，这满足了一个从宏观到微观的展示效果。

效果说明：

整个过程平滑过渡，完美显示了整个地图。

这里需要使用Power BI的自定义视觉对象：MapBox。这是个很强大地图可视化工具，本文以该实际案例为背景来说明MapBox与之结合的使用。

案例背景：考虑一个奶茶店连锁品牌在全国甚至全球有线下店（点），并形成销售额，那么如何使用地图可视化来反映。
案例难点：看看用默认可视化的效果：

问题很明显，由于奶茶店几乎可以分布在全国的每一个城市，甚至是三级县级市，而且可能一个城市就有N家，所以这样的效果是无法接收的。

所以，我们考虑一种 渐进式的地图结构 。这类似于网页的布局，当用户在WEB页面查看是大型布局，当逐渐缩窄浏览器窗口时，布局自动缩放到合适的布局。这要求做到两点：

我们请出地图可视化领域的神器：MapBox。

可以在： https://www.mapbox.com/ 注册一个自己的帐号。
由于这个是专业级产品，它考虑全球的地图，当然是 收费 产品，但其价格模式还算厚道，提供了 50000次/月 的免费阶段，也就是如果地图被用户查看的频率不超过这个量级，就是免费的。此后按照使用量收费。

相信具有刚刚所说的全国奶茶店连锁的企业如果需要专业的地图可视化，也可以可以考虑的，对于中小型企业，例如：APP活跃用户点，运营部来查看的话，那几乎是可以在免费区域的。

注册好，如下：

这里有一个Access tokens，这个token与您的帐号对应，显然是用来计算收费的。所以：不要把你的帐号token给其他人哦。

MapBox在PowerBI中是自定义视觉对象，从市场获取如下：

在Power BI Desktop中，使用如下：

这要求数据包括：经纬度以及数值，当然可以使用扩展的一些字段，如颜色分类等。

只需要：

效果如下：

打开热力图效果：

对于一般的可视化也就可以了，但这距离预期效果还有差异。

MapBox在Power BI中的效果主要包括：

对其自定义设置，体现在 缩放到不同级别来显示不同的模式 。由于缩放是通过滚动鼠标滚轮体现的，也就是说，当鼠标滚轮滑动放大的一定程度的时候应该显示或大小，或热力，或集群的模式，当然也可以同时显示。由于大小，热力与集群是三种不同的模式，如果同时显示会让地图变得混乱，当然这也是默认的效果，如下：

所以，应该按照整体设置，大小，热力与集群依次设置地图，以下分别说明。

注意：这里先关闭 大小，热力与集群 随后依次打开进行设置。

选择一种喜欢的风格。这里值得注意的是，可以选择自定义的效果，这里稍后介绍，这个自定义也是MapBox真正强大的地方所在。

在上一步选择一个浅色的地图，并对其设置如下：

设置包括：

值得强调的是，这样的设置可以制作很多互相重叠却易于区分的小气泡，气泡的密集度可以通过放大因子控制。最重要的一个属性这里单独介绍，那就是：Min Zoom 与 Max Zoom。这两个属性指示从 在哪个缩放区间 按这种模式显示。

可以看出，缩放区间有从0到22级，也就是说，滚动鼠标滚轮可以依次放大缩放22次，这里在不同的放大状态下也就对应了不同的Zoom，Min Zoom与Max Zoom就表示这个区间。为了让整个地图有流畅显示。一般可以这样设置：

这样，就成了一套带层级的显示效果。具体到这个案例，如下：

也就是实现从热力到集群到大小的三阶层级，现在正在设置大小，因此设置为Min Zoom = 5, Max Zoom = 22。提示：一旦设置完成，会发现地图的气泡突然消失了，因为当前缩放未达到5，所以不会显示。

启用热力模式，并设置为Min Zoom = 0, Max Zoom = 3

启用集群模式，并设置为Min Zoom = 3, Max Zoom = 5

此时效果如下：（动画大小：3M）

对于群集，需要说明几个重要属性：

至于调整颜色之类的属性就不再说明。

至此，已经可以设置整个MapBox地图了。细心的伙伴会发现，这和文章开始的地图有两大差异： 1）没有显示中文；2）没有中国地图轮廓 。

实现中文以及设置中国地图轮廓，则必须使用更高级的玩法：MapBox Studio。这是用来设置自定义地图的，感兴趣的伙伴可以在MapBox网站打开Studio自己研究如何设计地图，这里提供了强大的设计功能，如下：

可以看到，这里可以对地图的所有缩放级别进行设置，在本例中可以看出已经使用黑色粗线描绘了国家边境线，已经用红色线描绘了城市边界，并设置了中文显示。

还可以直接通过图层来定义城市，建筑以及河流的颜色等信息。MapBox提供了强大的缩放级别，通过自定义的设置可以简化地图，使地图更适合来显示信息，如下：

当所有的街道都用淡色显示后，特别容易在PowerBI中凸显可视化效果，如下：

关于如何详细使用MapBox Studio请参考其官方文档。

MapBox 给地图可视化提供了强大功能支持。其优势包括：

赶快自己尝试吧。