首页 / 浏览问题 / 三维GIS / 问题详情
webgl点击事件解绑问题
216EXP 2019年04月29日

1.需要获取场景中的管线属性信息,去查属性表,在一个函数中用了viewer.pickEvent.addEventListener调用属性查询接口

//设置监听事件
        var url = URL_CONFIG.queryApiUrl + '/cjpl/getCjPlById?';
        viewer.pickEvent.addEventListener(
            function (feature) {
                var entity = viewer.selectedEntity;
                if (feature.PLPTNO !== undefined) {
                    axios.get(url + 'plptno=' + feature.PLPTNO + '&mntpcd=' + feature.MNTPCD)
                        .then(function (response) {
                            let res = response.data.data;
                            _this.rightDrawerOpen(res);
                        })
                        .catch(function (error) {
                            alert(error + url + "服务未启动!");
                        })
                        .then(function () {
                            // always executed
                        });
                } else {
                    axios.get(url + 'plid=' + feature.PLID + '&mntpcd=' + feature.MNTPCD)
                        .then(function (response) {
                            let res = response.data.data;
                            _this.rightDrawerOpen(res);
                        })
                        .catch(function (error) {
                            alert(error + url + "服务未启动!");
                        })
                        .then(function () {
                            // always executed
                        });
                }
                // _this.viewer.scene.layers.getSelectedLayer().refresh();
            });

2.需要获取场景中的管线缺陷信息,需要去查缺陷表,在一个函数中用了viewer.pickEvent.addEventListener调用属性查询接口

var url = URL_CONFIG.queryApiUrl + '/pipeline/byPldeId?';
        viewer.pickEvent.addEventListener(
            function (feature) {
                var entity = viewer.selectedEntity;
                //TODO:区别2:只有管线,没有管点
                if (feature.PLID !== undefined) {
                    //TODO:区别3:此接口可以查询单多条管线数据
                    axios.get(url + 'pldeid=' + feature.PLID)
                        .then(function (response) {
                            let res = response.data.data;
                            _this.defectRightDrawerOpen(res);
                        })
                        .catch(function (error) {
                            alert(error + url + "服务未启动!");
                        })
                        .then(function () {
                            // always executed
                        });
                }
                // _this.viewer.scene.layers.getSelectedLayer().refresh();
            });

这两个需求一个是查属性表,一个是查缺陷表,接口不一样,但是都会用到点击模型事件,但是用viewer.pickEvent.addEventListener添加绑定事件后,二者会出现冲突,这个怎么解决???

1个回答

这两个点击事件点击的模型是同一个管线模型么?同一个点击事件您写了两个功能吗?
6,215EXP 2019年04月30日

两个点击事件是同一个管线模型。

同一个管线模型需要查询管线属性信息和管线缺陷信息,一根管线对应的有属性信息和缺陷信息。

所以同一个点击事件需要调用不同的后台接口分别查询属性信息和缺陷信息。

viewer.pickEvent.removeEventListener(query0);
        viewer.pickEvent.removeEventListener(query1);
        debugger;
        if(type==0){
            viewer.pickEvent.addEventListener(query0,"query0");
        }else if(type==1){
            //TODO:区别1:设置监听事件
            viewer.pickEvent.addEventListener(query1,"query1");
        }

        function query0(feature){
            var entity = viewer.selectedEntity;
            var url = URL_CONFIG.queryApiUrl + '/cjpl/getCjPlById?';
            if (feature.PLPTNO !== undefined) {
                axios.get(url + 'plptno=' + feature.PLPTNO + '&mntpcd=' + feature.MNTPCD)
                    .then(function (response) {
                        let res = response.data.data;
                        _this.rightDrawerOpen(res);
                    })
                    .catch(function (error) {
                        alert(error + url + "服务未启动!");
                    })
                    .then(function () {
                        // always executed
                    });
            } else {
                axios.get(url + 'plid=' + feature.PLID + '&mntpcd=' + feature.MNTPCD)
                    .then(function (response) {
                        let res = response.data.data;
                        _this.rightDrawerOpen(res);
                    })
                    .catch(function (error) {
                        alert(error + url + "服务未启动!");
                    })
                    .then(function () {
                        // always executed
                    });
            }
        }

        function query1(feature) {
            var url = URL_CONFIG.queryApiUrl + '/pipeline/byPldeId?';
            var entity = viewer.selectedEntity;
            //TODO:区别2:只有管线,没有管点
            if (feature.PLID !== undefined) {
                //TODO:区别3:此接口可以查询单多条管线数据
                axios.get(url + 'pldeid=' + feature.PLID)
                    .then(function (response) {
                        let res = response.data.data;
                        _this.defectRightDrawerOpen(res[0]);
                    })
                    .catch(function (error) {
                        alert(error + url + "服务未启动!");
                    })
                    .then(function () {
                        // always executed
                    });
            }
        }

这个viewer.pickEvent.removeEventListener函数是SuperMap自带的吧,我用代码
viewer.pickEvent.removeEventListener(query0);
viewer.pickEvent.removeEventListener(query1);

解除绑定不了,那么就像图片中的示例一样,

viewer.pickEvent中的_Listener数组中的事件会越来越多越来越多!

请问是我写的解除绑定函数错误吗?否则为什么解除绑定不了呢???

你单独写一个小的pick和remove事件试一下,没有问题

例如

<!--StartFragment -->

 viewer.pickEvent.addEventListener(test);
           

            function test(){
                console.log(3);
                viewer.pickEvent.removeEventListener (test);
            }

如果remove成功,无论点击多少次 只打印一次3,如果失败,则会打印多次3

yesyesyes

厉害了, viewer.pickEvent.removeEventListener (test);的解绑事件写到函数的最后可以,但是写到函数的外面就解绑不了了。

...