ArcGIS API for JavaScript点击point cluster缩放至对应点位功能实现问题

ArcGIS API for JavaScript 点击聚合点缩放实现方案 #

原代码问题 #

• 冗余语句pointLayer.event.graphic无实际作用
• 未区分API版本的事件绑定规则，4.x版本不支持直接给图层绑定click事件
• 聚合点返回的graphic为聚合要素，直接用其geometry定位不符合预期，需先提取聚合包含的实际点位

3.x版本实现代码 #

map.add(pointLayer);

// 绑定图层点击事件
pointLayer.on("click", function (event) {
    // 校验是否为聚合要素
    if (event.graphic.attributes.clusterCount) {
        // 提取聚合内所有点位的几何范围
        var features = event.graphic.getFeature();
        var extent = null;
        features.forEach(function(feature) {
            if (!extent) {
                extent = feature.geometry.getExtent();
            } else {
                extent = extent.union(feature.geometry.getExtent());
            }
        });
        // 缩放到聚合范围，留20%的边距
        map.setExtent(extent.expand(1.2));
    } else {
        // 非聚合单点直接缩放
        map.centerAndZoom(event.graphic.geometry, 4);
    }
});

4.x版本实现代码 #

// 4.x版本事件绑定在MapView实例上，此处view为你初始化的MapView对象
view.on("click", function(event) {
    // 点击位置执行图层查询
    view.hitTest(event).then(function(response) {
        // 筛选pointLayer的返回结果
        var result = response.results.filter(function(res) {
            return res.graphic.layer === pointLayer;
        })[0];
        if (!result) return;
        
        var graphic = result.graphic;
        // 校验是否为聚合要素
        if (graphic.layer.featureReduction && graphic.layer.featureReduction.type === "cluster") {
            // 聚合要素查询包含的所有点位
            graphic.queryAggregatedFeatures().then(function(features) {
                if (features.length === 1) {
                    // 单个点位直接定位缩放
                    view.goTo({
                        target: features[0].geometry,
                        zoom: 4
                    });
                } else {
                    // 多个点位缩放到所有点的外接范围
                    var extent = features.reduce(function(prev, curr) {
                        return prev ? prev.union(curr.geometry.extent) : curr.geometry.extent;
                    }, null);
                    view.goTo(extent.expand(1.2));
                }
            });
        } else {
            // 非聚合单点直接定位
            view.goTo({
                target: graphic.geometry,
                zoom: 4
            });
        }
    });
});

内容的提问来源于stack exchange，提问作者Developer