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/...