ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-07-24 00:31:12  阅读:198  来源: 互联网

标签:geometry FeatureLayer featureLayer results API result query JS


一、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指定属性查询的时候,就有所区别了。

view

标签:geometry,FeatureLayer,featureLayer,results,API,result,query,JS
来源: https://www.cnblogs.com/echohye/p/16513689.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有