10年地理可视化牛马体验百度地图JSAPI Three

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 601 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化 #前端

前端专栏收录该内容

6 篇文章

订阅专栏

这些库做一些打点、飞线、热力还行，效果都差不多，但是有时候我们想往上面整点更酷炫的效果的时候，比如一些酷炫的模型，这些库都会有瓶颈。一般情况下，他们的解决方案都是：提供一个Threejs的插件类，让你用Threejs去加载模型，实现效果，再扔到他们的可视化图层里，但是效果往往不怎么理想。

最近关注到百度地图又出了新东西叫 JSAPI Three，说是他们直接基于Threejs做了一套地图引擎，我搜了下好像没有别的厂商这么做的，然后看了下他们有个案例的网站 https://lbsyun.baidu.com/jsapithree/showcase/ ，感觉基本上常用的可视化效果都有了。
请添加图片描述
尤其是这个案例，和我之前做的一个园区可视化项目很像，所以今天我用这个引擎试一下看看能不能还原一下这个场景。

搭建框架

首先，我们按文档里一步步来，配置好vite.config.js和index.html的全局变量配置之后，基本上项目就不会报错了。尤其是html里的这个MAPV_BASE_URL，这个路径还得根据copy-plugin复制的文件位置来写，得对应上才行。
请添加图片描述

本以为完成搭建之后，按照文档的HelloWorld来写，就能得到一个基础的地图场景了，但是遇到了报错 Access to fetch at ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
请添加图片描述

这里查了一下，发现是默认还需要配置百度地图的AK，配置完成之后，地图正常出现了
请添加图片描述

设置深色环境

但是我们目标是做一个上面那种深色的场景，这个地图样式显然不符合我们的需求。这里我通过provider属性设置为null，直接把默认的百度地图给去掉了。并且蓝色的天空也太亮了，也通过sky属性设置为null，给天空去掉了，后面我们自己手动加深色的天空。
在这里插入图片描述

注意，这里传颜色的时候，居然可以直接用THREE.Color类，怪不得说是基于Three.js开发的，这样的话像颜色这种类就可以直接传Threejs的内置类型了。

另外，这里要设置rendering.sky为null，否则浏览器会报warning。设置完之后，我的地图就变成这种深色主题的了。
在这里插入图片描述

添加模型

这里我直接从network上把JSAPI Three官方showcase里的模型给下载下来了，不知道会不会被律师函哈哈哈，不管了先添加到地图的场景里看看效果
在这里插入图片描述

他们案例里的这个钻石我以为是贴图，但没想到也是模型，我也下载下来，随机在附近生成一些经纬度，添加到场景里。

这里我用的都是mapvthree.SimpleModel方法加载的，有模型文件路径和经纬度就能直接上图。说实话，确实还挺方便的。
在这里插入图片描述

但是这样看起来比较干燥，啥也没有，主要是我没有路网数据，也没有旁边的楼块数据，正常情况下有路网和普通楼块，效果应该会更好。这里我只能再加一些普通的可视化元素，比如波纹点、飞线之类的，让场景更丰富一点。

增加点缀

由于没有真实数据，这里我都随机生成了，包括在刚刚的点数据上加一些波纹效果；再生成一些线数据，制造飞线效果。
在这里插入图片描述
请添加图片描述

但是这里的线有点暗，我想让他有那种发光的炫酷效果，根据文档，我找到了配置炫光的方式，除了开启全局开关engine.rendering.features.bloom.enabled = true之外，竟然只需要把颜色值突破0~255范围就可以了。。。这样设置完酷炫多了！
在这里插入图片描述

总结

初步体验之后，我觉得JSAPI Three这个还真挺强，比mapvgl、L7那些能力确实牛不少，主要是能直接用threejs里的类，这个设计还挺新颖的。
这次其实用的比较浅，只涉及到了一些初级功能，我看还有什么投影之类的概念那些都还没看。不过对于地理可视化项目，这个库挺好的，他的优势在于只用这一个就行了，不需要用别的好几个库叠加了。
其实这里我受限制于没有数据，否则我感觉还能做更多效果，后面有机会我再研究下吧。