arcgis api for js 4.11 点击查询知识点

let highlight, currentId;
// 单击查询。
view2d.on("click", function (event) {
    console.log("event:", event);

    // 判断查询开关是否打开。
    if(identifying_2d){
        // 从与指定屏幕坐标相交的每个层,返回最顶层的feature。
        // 如果在相交特性上命中,下面的层类型将返回结果: GraphicsLayer, FeatureLayer, CSVLayer, GeoRSSLayer, KMLLayer, and StreamLayer.
        view2d.hitTest(event).then(function (response) {
            if (response.results.length) {
                console.log("response:", response);

                const graphic = response.results[0].graphic;
                // console.log("graphic:", graphic);
                const attributes = graphic.attributes;
                const id = attributes.OBJECTID;
                // 以下要对查询到的feature,在视图中高亮显示。
                view2d.whenLayerView(graphic.layer).then(function(layerView) {
                    // layerView, 该层的层视图。
                    if( highlight && currentId !== id){
                        highlight.remove();
                        highlight = null;
                    }
                    const query = layerView.layer.createQuery();
                    query.where = "OBJECTID = " + id;
                    layerView.queryObjectIds(query).then(function(ids) {
                        // console.log("ids:", ids);
                        highlight = layerView.highlight(ids);
                        currentId = id;
                    });
                });
                // 以下要构造弹窗要素。
                // 获取在视图上单击的坐标。
                var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
                // view2d.popup.autoOpenEnabled = false;
                var content = "<div style='font-size: 16px;'>";
                // 以下要判断配置文件中的该图层,是否有字段转译。
                // 有,进行字段转译,且只显示转译过的字段。
                if(graphic.layer.fieldAliases){
                    for(let attr in attributes){
                        if(attr in graphic.layer.fieldAliases){
                            content += "<b>" + graphic.layer.fieldAliases[attr] + "</b>:" + attributes[attr] + "<br>";
                        }
                    }
                }
                // 没有,显示从服务读取到的所有字段。
                else{
                    for(let attr in attributes){
                        content += "<b>" + attr + "</b> : " + attributes[attr] + "<br>";
                    }
                }
                content += "</div>";
                // 在视图中弹窗。
                view2d.popup.open({
                    title: "<span style='font-size: 16px;'>经纬度: [" + lon + ", " + lat + "]</span>",
                    location: event.mapPoint,
                    content: content
                });
            }
            else {
                // 如果没有从hitTest()返回任何feature,则移除突出显示。
                if(highlight){
                    highlight.remove();
                    highlight = null;
                }
            }
        });
    }
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值