threejs使用geojson绘制中国地图的小坑【内蒙古丢啦?】

2,229 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情

最近尝试使用threejs做一些地图相关内容的开发,遇到不少的困难,感觉threejs的文档看着比较痛苦,版本间的差异也比较大,今天分享记录下一个小坑。

问题描述

我在使用geoJson配合threejs绘制中国地图的时候,出现了如下的报错信息:

image.png

作为threejs菜鸟的我真是一脸懵。

一顿上网查询无果,各种文章也说不出个所以然,当时真的是听崩溃的,出师不利啊。

发现问题所在

我是如何发现问题的?

正当我苦思问题原因时,我发现这个中国地图似乎有点不对劲,我发现怎么山东,辽宁的位置,只有这么点领土?

image.png

于是我找到整个中国地图,一比较发现,整个内蒙古是缺失的!!!

image.png

image.png

既然发现了问题,那就去找找问题所在把。

问题解决

问题原因很容易被想到,是不是geojson数据的问题?内蒙古的数据和其他身份不同?

我使用同一个遍历方式,去获取json数据,那一定是内蒙古的数据存在问题!!!

image.png

如上所示,数据分为三层,注意下面的格式,这是正常的格式:

image.png

我们再看看内蒙古的格式:

image.png

如上所示,内蒙古的类型是Polygon,所以坐标的数组少了一层,导致解释json错误,内蒙古无法展示。

所以只需要在解析数据的时候进行判断,并修改内蒙的数据结构即可,方案如下:

image.png

我们看看修改后的结果:

image.png

如上所示,地图已经完整展示,且报错已经没有了,整体的流畅度也正常了。


到此为止,问题解决。