[发明专利]一种基于Vue的WebGIS的可视化配置方法和系统

权利要求书

1.一种基于Vue的WebGIS的可视化配置方法，其特征在于，包括如下步骤：

步骤1，基于Vue实现地图适配器，通过地图适配器的对WebGIS前端框架进行适配；

步骤2，模块管理器ModuleManager对不同WebGIS框架的API的模块进行的按需加载；

步骤3，界面管理器UIMananger对组件进行加载管理；

步骤4，图层管理器对地图的图层进行加载管理，包括瓦片服务、要素服务、wms服务、wfs服务以及覆盖物图层，所有图层采用http协议请求服务数据和加载，判断图层为TileLayer、FeatureLayer、WMSLayer、WFSLayer或GraphicLayer中的一种或多种时，根据所述地图适配器所适配的WebGIS API采用对应的图层加载API对图层进行实例化，通过Map对象的addLayer方法加载在地图上，其中，所述覆盖物图层包括点、线、面，所述TileLayer表示瓦片图层，所述FeatureLayer表示要素图层，所述WMSLayer表示WMS图层，所述WFSLayer表示WFS图层，所述GraphicLayer表示覆盖层；

步骤5，通过定义地图、图层、组件的JSON Schema，对地图、图层、组件的JSON配置进行验证；分别定义地图、图层、组件的JSON Schema的type、required、properties，其中地图的properties详细定义maptype、xmin、ymin、xmax、ymax、wkid属性，图层的properties详细定义id、layertype、url、title、visible、token、xmin、ymin、xmax、ymax属性，组件的id、name、type、position、index、templete、config属性；properties的每个属性定义type来约定是String、Number还是Object类型，并定义minLength、maxLength、maximum、minimum、pattern来约定具体的规则，并采用Aju.validate方法对已定义的JSON Schema规则进行验证，其中，所述minLength表示最小长度，所述maxLength表示最大长度，所述maximum表示最大数值，所述minimum表示最小数值，所述pattern表示正则表达式，Aju为开源的JSON Schema验证器；

步骤6，通过JSON配置及可视化解析WebGIS应用的地图、图层、组件，形成WebGIS的应用；

步骤7，采用Vue的component动态加载的方式对地图、组件、图层进行加载，并对地图的初始化位置、地图比例尺、坐标系统基本进行配置可视化渲染，对组件的界面位置进行配置可视化渲染，对图层的初始化可见性、图层范围、图层覆盖物的符号化进行配置可视化渲染，渲染后输出Html生成WebGIS应用，其中，当识别地图JSON配置时，Vue component实例化并mount加载mapContainer的DOM节点；当识别组件的JSON配置时,循环遍历配置数组的组件类型，Vue component实例化并mount形成DOM，通过document.getElementById('component')的appendChild方法加载到界面相应的DOM节点上；当识别图层的JSON配置，循环遍历配置数组的图层类型，通过Vue component实例化后，采用图层管理器中Map对象的addLayer方法进行加载，其中，Vue component的实例化时通过propsData属性进行参数传递，对地图、组件、图层属性初始化配置。

2.如权利要求1所述的一种基于Vue的WebGIS的可视化配置方法，其特征在于，所述步骤1进一步包括：通过使用npm(node.js包管理工具)安装各种WebGIS API框架，以多页面应用模式MPA(Mutil-page Application)来兼容保证各个API互不干扰。

3.如权利要求1所述的一种基于Vue的WebGIS的可视化配置方法，其特征在于，所述步骤2进一步包括：使用AMD(Asynchronous Module Definition异步模块定义)与vue-router配置路由结合的方式进行按需加载，其中，所述AMD负责对WebGIS API框架按需加载，而vue-router对页面进行按需加载。