JS API模块之FeatureLayer要素点击查询

一、PopupTemplate实现

var featureLayer = new FeatureLayer({
    url: "...",
});

map.add(featureLayer);
featureLayer.when(() => {
    let popupTemplate = {
        title: featureLayer.title,
        outFields: ["*"],
        content: [{
            type: "fields",
            fieldInfos: featureLayer.fields.map(item=>({fieldName:item.name}))
        }]
    };
    // console.log(popupTemplate);
    featureLayer.popupTemplate = popupTemplate;
})

实现效果

二、View实现

var featureLayer = new FeatureLayer({
    url: "...",
});

// 创建一个GraphicLayer,用来绘制查询结果
var graphicsLayer = new GraphicsLayer();

map.add(graphicsLayer);
map.add(featureLayer);

view.on("click", (event)=> {
    view.hitTest(event).then(function (results) {
        console.log("results:",results);
        if (results.results.length) {
            addGraphics(results.results);
        }
    });
});

function addGraphics(result) {
    graphicsLayer.removeAll();
    result.forEach(function (item) {
        if (item.graphic.geometry.type == "point") {
        } else if (item.graphic.geometry.type == "polyline") {

        } else if (item.graphic.geometry.type == "polygon") {
            const fillSymbol = {
                type: "simple-fill",
                color: [227, 139, 79, 0.8],
                outline: {
                    color: [255, 255, 255],
                    width: 1,
                },
            };
            var g = new Graphic({
                geometry: item.graphic.geometry,
                symbol: fillSymbol,
                spatialReference: map.spatialReference
            });
        }
        // console.log(Object.prototype.toString.call(feature));
        graphicsLayer.add(g);
        view.goTo(g);
    });
}

实现效果

三、FeatureLayer实现

var featureLayer = new FeatureLayer({
    url: "...",
});

// 创建一个GraphicLayer,用来绘制查询结果
var graphicsLayer = new GraphicsLayer();

map.add(graphicsLayer);
map.add(featureLayer);
// Set up a click event handler and retrieve the screen point
view.on("click", (event) => {
    // 查询的是attributes的内容
    let query = featureLayer.createQuery();
    query.geometry = event.mapPoint;
    query.spatialRelationship = "intersects";
    featureLayer.queryFeatures(query).then(function (results) {
        // 返回一个要素集合
        console.log("results:", results);
        if(results.features.length>0)
        addGraphics(results.features);
    })
})
function addGraphics(result) {
    graphicsLayer.removeAll();
    result.forEach(function (feature) {
        if (feature.geometry.type == "point") {
        } else if (feature.geometry.type == "polyline") {

        } else if (feature.geometry.type == "polygon") {
            const fillSymbol = {
                type: "simple-fill",
                color: [227, 139, 79, 0.8],
                outline: {
                    color: [255, 255, 255],
                    width: 1,
                },
            };
            var g = new Graphic({
                geometry: feature.geometry,
                symbol: fillSymbol,
                spatialReference: map.spatialReference
            });
        }
        // console.log(Object.prototype.toString.call(feature));
        graphicsLayer.add(g);
        view.goTo(g);
    });
}

实现效果

四、FeatureLayerView实现

var featureLayer = new FeatureLayer({
    url: "...",
});

let highlight;
view.on("click", (event) => {
    view.whenLayerView(featureLayer).then(function (layerView) {
        // 查询的是attributes的内容
        let query = layerView.createQuery();
        query.geometry = event.mapPoint;
        query.spatialRelationship = "intersects";
        layerView.queryFeatures(query).then(function (result) {
            console.log("result:", result);
            if (highlight) {
                highlight.remove();
            }
            if (result.features.length) {
                highlight = layerView.highlight(result.features);
                view.goTo(result.features[0].geometry);
            }

        })
    });
})

实现效果

我们可以看到FeatureLayer和FeatureLayerView查询的返回结果几乎一致，那区别在哪里呢？
FeatureLayer

FeatureLayerView

可以看出，FeatureLayer返回的attributes是属性表所有字段及内容，而FeatureLayerView返回的attributes只含有部分属性表的字段及内容。

所以在使用query.where指定属性查询的时候，就有所区别了。

另外，FeatureLayer的查询会向后台发送请求，而FeatureLayerView不会。

view