加载geojson面数据_three.js加载geojson

three.js可以加载geojson来绘制面，再根据绘制的面拉伸成体。

效果图：

预览地址：

vue3+TS​123.56.85.24

vue3项目中集成three.js可以看这篇文章:

清风皓月：three.js实践指南​zhuanlan.zhihu.com

一.Geojson是什么？

GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征（百度百科）

• Points（点）

 {
    
         "type": "Point",
         "coordinates": [100.0, 0.0]
     }

• LineStrings(线)

  {
    
         "type": "LineString",
         "coordinates": [
             [100.0, 0.0],
             [101.0, 1.0]
         ]
     }

• Polygons（多边形，首尾两点重合）

     {
    
         "type": "Polygon",
         "coordinates": [
             [
                 [100.0, 0.0],
                 [101.0, 0.0],
                 [101.0, 1.0],
                 [100.0, 1.0],
                 [100.0, 0.0]
             ]
         ]
     }

• MultiPoints（多点）

     {
    
         "type