在vue框架中实现要素识别功能

　　在WebGIS中，要素识别指获取点击处的要素的相关属性信息并将其打印出来。

　　在这个项目里，我使用了公司改编过的leaflet API。

　　现阶段网上与要素识别有关的代码不太多。

思路：

1. 首先判定是否勾选图层，如勾选，获取点击点坐标，以及图层节点。

2. 然后，第一次进入query1()函数，并在其中构造查询所需参数，然后查询。

3. 在查询成功的goodfunc()函数中，获得查询结果，并在未查完之时继续进入query1()查下面的图层。若查完，则将数据传到factorInformation.vue，并清空相关变量。

4. 在factorInformation.vue中，监测数据变化，并将传过来的数据按照组件展示需要的结构做转换。

5. 构造树控件需要的数据，先构造子节点，把子节点push()到父节点的children中去，然后构造父节点，并push()到树控件所需的数据中去（需声明一个中间变量，以便清空）。

6. 展示表格控件所需数据，须通过树节点的on-select-change触发事件。事件中，构造表格所需数据。

   （无论构造什么数据，都要注意数据类型）

    

获取点击处坐标

核心代码就第一句。

 this.point.push(e.latlng.lng, e.latlng.lat);
            console.log('点击点' + this.point);

获取图层

首先要创建一个options对象，用来存储用来查询的数据，比如点坐标、图层ID等等。然后获取当前激活的图层。

查询

这里我直接用的公司给的后台服务，把相关信息查了出来。

弹出框

        自己再另写一个弹出框组件。在这个组件里使用iView样式设计弹出框。

这是初期草稿，还不大好看。

打印

最后，设置一个全局变量，将查询到的值赋给全局变量，再传给弹出框组件。最后打印出来就好了。

---