一.前言

        由于最近在学习three.js,所以观摩了一下掘金，csdn等网站上的有关这部分的内容，刚好看到一个带你入门three.js——从0到1实现一个3d可视化地图 - 掘金 (juejin.cn)，再加上我的专业属性是地理相关，可以说是专业对口，但文章已经是三年以前写的，而且没有在框架底下完成，有关three的很多API也发生了更改，所以我的思路是来自该篇文章，我进行了模仿和相应的修改，但是大致没有发生改变，可以说是站在前人的肩膀上。

二.预览

 

三.实现

         首先就是开启一个vue项目，再npm install --save three，再引入一下d3就可以了，配置方面没有什么好配置的，这方面大家应该是没问题的。将代码写在子组件里，再引入到App.vue中展示就可以了。需要注意用到的全国的json数据来自DataV.GeoAtlas地理小工具系列 (aliyun.com)

子组件xx.vue对应代码

注意在用JSON数据生成地图集合体时分两种情况是因为:

不同省份数据数组嵌套的层数不一样，类似于下面这两地

 

四.总结

        共勉，如果对于实现的步骤还有疑惑，可以转至我在前言分享的那篇文章 ，它对于实现步骤更详细，可以结合着看。

 

参考链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：