共计 4461 个字符，预计需要花费 12 分钟才能阅读完成。
GeoJSON，一个用于存储地理信息的数据格式。GoeJSON 对象能够示意几何、特色或特色汇合，反对：点、线、面、多点、多线、多面和几何汇合。在基于立体地图，三维地图中都须要用到的一种数据类型。
因为这种格局在三维地图中的优良属性，应用它咱们不仅能够轻松实现地图类性能，更重要的是在 3D 成果展现上也具备不凡的体现。
GeoJSON 数据结构图
念介绍：
- GeoJSON 是一种对各种天文数据结构进行编码的格局。
- GeoJSON 对象能够示意几何（Geometry）、特色（Feature）或者特色汇合（FeatureCollection）。
- GeoJSON 反对上面几何类型：点（Point）、线（LineString）、面（Polygon）多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何汇合（GeometryCollection）。
- GeoJSON 里的特色蕴含一个几何对象和其余属性，特色汇合示意一系列特色。
一个残缺的 GeoJSON 数据结构能够称为一个对象。在 GeoJSON 里，对象由名 / 值对–也称作成员的汇合组成。
理解了概念之后，咱们对 GeoJSON 的神秘面纱更神秘了，它到底能够做什么？下面咱们提到，GeoJSON 就是一个地理信息的数据结构，那么这个数据如何记录的？
接下来给大家具体介绍一下，GeoJSON 的整个数据结构。
一个规范的 GeoJSON 构造：
| { | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [125.6, 10.1] | |
| }, | |
| "properties": {"name": "Dinagat Islands"} | |
| } |
最外层：
- type：”Feature” 示意一个特色因素，”FeatureCollection” 示意为特色因素的汇合
- geometry：存储该特色因素的理论形态形容
- properties：存储该因素的属性
geometry：
- type：存储因素类型（Point(点),LineString,Polygon,MultiPoint(多点),MultiLineString(多线) 和 MultiPolygon(多面)）
- coordinates：坐标（存储图形坐标）
GeoJSON 的根底构造理解分明，接下来就是如何在理论案例中用的。先看看其中的几个实现成果：
动画镜头
贴地点图
飞线
热力求
点图
平面面图
海量点图标
通过以上成果，能够看到基于地图实现十分多并且十分酷炫的显示成果。对于 GeoJSON 的应用领域有了新的理解。而这些个性是基于地图根底之上的。接下来就介绍一下从根底畛域到显示畛域的技术利用。
GeoJSON 的根底利用：地图
GeoJSON 的高级利用：webGL
技术利用解决方案
基于咱们曾经理解的基础知识，GeoJSON 是由点线面组成，因而目前高德地图，百度地图等地图类软件也都推出了对应的 api，用来解析 GeoJSON。做的绝对成熟。
这里就以高德地图为例，介绍一下技术人员基于高德地图利用 GeoJSON 的技术计划。
以上性能基于高德地图的 Loca 数据可视化，是一个基于高德地图 JS API 2.0 的高性能地图数据可视化库。
高级可视化实现
Loca.GeoJSONSource：绑定 geojson 格局的数据源，一个数据源能够给多个图层同时提供数据。一个 geojson 数据源能够同时领有点、线、面的数据类型，每个图层绘制的时候会主动获取 适合的数据类型进行渲染。
显示成果：
示例代码：
| <script> | |
| var map = new AMap.Map('map', {zooms: [4, 8], | |
| zoom: 4.5, | |
| showLabel: false, | |
| viewMode: '3D', | |
| center: [105.425968, 35.882505], | |
| mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979', | |
| }); | |
| var loca = new Loca.Container({ | |
| map, | |
| opacity:0, | |
| }); | |
| var geo = new Loca.GeoJSONSource({url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json',}); | |
| var pl = window.pl = new Loca.PointLayer({ | |
| zIndex: 10, | |
| blend: 'lighter', | |
| }); | |
| var style = { | |
| radius: 3.5, | |
| unit: 'px', | |
| color: '#3C1FA8', | |
| borderWidth: 0, | |
| blurWidth: 3.5, | |
| } | |
| pl.setSource(geo); | |
| pl.setStyle(style); | |
| loca.add(pl); | |
| var dat = new Loca.Dat(); | |
| dat.addLayer(pl); | |
| </script> |
通过示例代码能够看到：解析 GeoJson，只须要调用 Loca. GeoJSONSource 即可，是须要简略几句代码，就能够实现酷炫成果。曾经大大降低了对于底层技术的理解。
接下来再看另一个示例：区域笼罩。
示例代码：
| <script type="text/javascript"> | |
| var map = new AMap.Map('container', {center: [107.943579, 30.131735], | |
| zoom: 7 | |
| }); | |
| ajax('../chongqing.json', function(err, geoJSON) {if (!err) { | |
| var geojson = new AMap.GeoJSON({ | |
| geoJSON: geoJSON, | |
| getPolygon: function(geojson, lnglats) { | |
| return new AMap.Polygon({ | |
| path: lnglats, | |
| fillOpacity: 1, | |
| strokeColor: 'white', | |
| fillColor: 'red' | |
| }); | |
| } | |
| }); | |
| map.add(geojson); | |
| log.success('GeoJSON 数据加载实现') | |
| } else {log.error('GeoJSON 服务申请失败') | |
| } | |
| }) | |
| </script> | |
| 其中加载 GeoJson 要害代码局部为：var geojson = new AMap.GeoJSON({ | |
| geoJSON: geoJSON, | |
| getPolygon: function(geojson, lnglats) { | |
| return new AMap.Polygon({ | |
| path: lnglats, | |
| fillOpacity: 1, // 透明度 | |
| strokeColor: 'white', | |
| fillColor: 'red' | |
| }); | |
| } | |
| }); | |
| map.add(geojson); |
示例中，曾经将代码量降到了最低，只须要理解根底的前端代码，就能够实现。
此案例中所援用的 GeoJson 代码摘取：
| { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "id": "500242", | |
| "name": "酉阳土家族苗族自治县", | |
| "cp": [ | |
| 108.8196, | |
| 28.8666 | |
| ], | |
| "childNum": 1 | |
| }, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [ | |
| [ | |
| [ | |
| 108.3142, | |
| 28.9984 | |
| ], | |
| [ | |
| 108.3252, | |
| 29.0039 | |
| ], | |
| [ | |
| 108.3142, | |
| 28.9984 | |
| ]……………………… | |
| ] | |
| ] | |
| } | |
| } | |
| ] | |
| } |
这段代码的自述：我是一段区域代码，其中包含了好几个子项汇合，作为顶头上司的我，type 为 FeatureCollection，我的小兄弟都在 features 节点中，这里定义着每个人的共性，他们的头标签包含一下几个 type 为 Feature，properties 节点中，有他们的身份证，名称，以及地位信息，当然也包含他们有几个手下。根底地图中的 GeoJson 根本内容就是这么简略。
每个小兄弟的 geometry 节点，为他们的流动区域，type 为 Polygon，coordinates 这里就代表着流动区域。
所以依照办法，绑定 GeoJson，就能够显示在地图中。
地图，是 GeoJson 的战场，目前市面上所有的地图都是基于 GeoJson 的格局来实现的。
通过解析，发现其实 GeoJson 也不是那么神秘。
后面介绍的，都是基于二维层面的地图，接下来介绍一下 GeoJson 的高级用法，带有高度的格局如何实现和利用。
3D 成果示例
代码示例：
| var geo = new Loca.GeoJSONSource({url: 'geo.json',}); | |
| var pl = new Loca.PolygonLayer({ | |
| zIndex: 120, | |
| shininess: 10, | |
| hasSide: true, | |
| cullface: 'back', | |
| depth: true, | |
| }); | |
| pl.setSource(geo); | |
| 对应 GeoJson 格局：{ | |
| "type": "FeatureCollection", | |
| "name": "sh_building_center", | |
| "crs": { | |
| "type": "name", | |
| "properties": {"name": "urn"} | |
| }, | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "mainKey": 50001, | |
| "h": 18 | |
| }, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [ | |
| [ | |
| [ | |
| 121.480519, | |
| 31.250787 | |
| ], | |
| [ | |
| 121.480127, | |
| 31.250616 | |
| ], | |
| [ | |
| 121.480132, | |
| 31.25061 | |
| ], | |
| [ | |
| 121.480374, | |
| 31.25061 | |
| ], | |
| [ | |
| 121.480578, | |
| 31.250707 | |
| ], | |
| [ | |
| 121.480519, | |
| 31.250787 | |
| ] | |
| ] | |
| ] | |
| } | |
| } | |
| ] | |
| } | |
在 features 节点中的 properties
看了代码后，发现 3D 跟立体地图处理过程简直统一，这也从侧面反馈了，其实在目前阶段的 GeoJson 应用中，都是基于地图所凋谢的 api 来实现的。技术的变革，让咱们根底开发者，也能够实现高级的地图利用性能。总是一句话，GeoJson 的诞生，就是为了让地图利用开发更加简略易用。
利用场景
咱们基于 GetJSON 开发地图插件往往不是独立的去显示一个地图动效就完结了，而是须要实现“地图可视化”，将天文数据转换成可视化状态，通过将具备地区特色的数据或者数据分析后果形象地表当初地图上，使得用户能够更加容易了解数据法则和趋势。地图可视化能够将业务数据显示在相干天文数据中，更直白地展现出业务数据。
很多 BI 工具解决数据可视化大屏展现的性能，但在地图可视化展现时提供的原生款式会有很多款式，性能的限度，因而也 BI 工具凋谢了可视化的插件开发，供开发人员基于插件开发机制，来实现满足我的项目需要的可视化插件开发。
此外大家如果感兴趣能够尝试体验在线 demo：
https://www.grapecity.com.cn/…
