[发明专利]一种基于leaflet地图渲染geoJson地图边界数据的方法、装置及应用

说明书

本发明提供一种基于leaflet地图渲染geoJson地图边界数据的方法、装置及应用，包括以下步骤：在主功能页引入地图组件页并注册vue组件，地图组件页中通过leaflet加载地图基本形态；发送geoJson数据请求并获取对应的geoJson数据；通过vue组件的ref属性调用地图组件页的addGeo方法，利用leaflet的L.geoJson方法加载geoJson数据中的geoJson边界数据，使用L.layerGroup方法把geoJson边界数据存入设置的全局变量allLayerGeo或全局变量layerGeo；通过vue组件的ref属性调用地图组件页的方法对全局变量allLayerGeo或全局变量layerGeo遍历配置显示、隐藏或清除的至少一种功能，本方案将geoJson边界数据以边界图层的方式进行显示或隐藏，进而解决了变化地图时需要重复渲染导致的浏览器奔溃的问题。

技术领域

本申请涉及地图渲染领域，特别是涉及一种基于leaflet地图渲染geoJson地图边界数据的方法、装置及应用。

背景技术

leaflet是业界比较流行的JS开源交互式地图包，它支持直接调用OpenStreetMap,Mapbox,and CartoDB等主流地图数据作为辅助图层来进行地理信息数据的可视化操作.除了这些在线地图素材之外，它对于shapefile格式和json格式以及sp包的空间数据格式的地图数据都有着很好的支持，在图层函数中涵盖了点标记、线条和多边形等常用地理信息可视化图形要素,故其在地图渲染场景下有着比较广泛的应用。

GeoJSON是一种对各种地理数据结构进行编码的格式，是一种基于Javascript对象表示法的可以表示几何、特征或者特征集合的地理空间信息数据交换格式。目前通过leaflet在加载geoJson地理数据的边界信息时，若存在来回切换城市、街道等边界并且每个边界数据庞大的情况，leaflet每次加载时都需要重新绘制边界，这导致了浏览器负担很重，很容易造成浏览器奔溃或浏览器内存溢出，而这种切换地图时边界数据变化的情况又经常出现，故亟需可以在leaflet渲染地图时出现的地图的边界数据变化引起的浏览器奔溃的方案。

发明内容

本申请实施例提供了一种基于leaflet地图渲染geoJson地图边界数据的方法、装置及应用，借助leaflet地图的L.layerGroup方法实现大数据量的geoJson数据的隐藏和显示，在切换地图时不需要每次都重新渲染地图边界，避免出现浏览器页面崩溃和内存溢出的问题。

第一方面，本申请实施例提供了一种基于leaflet地图渲染geoJson地图边界数据的方法，包括以下步骤：

在主功能页引入地图组件页并注册vue组件，所述地图组件页中通过leaflet加载地图基本形态；

发送geoJson数据请求并获取对应的geoJson数据；

通过vue组件的ref属性调用地图组件页的addGeo方法，利用leaflet的L.geoJson方法加载geoJson数据中的geoJson边界数据，通过主功能页中ref属性调用地图组件页的addGeo方法的使用参数，基于所述使用参数判断geoJson边界数据使用L.layerGroup方法把geoJson边界数据存入设置的全局变量allLayerGeo或全局变量layerGeo中；

通过vue组件的ref属性调用地图组件页的方法对全局变量allLayerGeo或全局变量layerGeo遍历配置显示、隐藏或清除的至少一种功能。

第二方面，本申请实施例提供了一种基于leaflet地图渲染geoJson地图边界数据的装置，包括：

地图组件页，所述地图组件页中通过leaflet加载地图基本形态；