ArcGIS JavaScript for API（007）featurelayer 要素查询，查询指定范围内包含要素featurelayer .queryFeatures。

最新推荐文章于 2024-06-13 11:14:03 发布

王建博09

最新推荐文章于 2024-06-13 11:14:03 发布

阅读量1.9k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/wangjianbo09/article/details/124682412

版权

我们在做系统开发时，经常会遇到，要查询指定范围内包含的要素。原理很简单就是面内包含的要素。

arcgis featurelayer 可以实现这个功能。使用到的接口是featurelayer .queryFeatures（options），返回结果是FeatureSet。

我实现了一个以鼠标点击点为中心，指定为半径范围内包含的要素。

layer.queryFeatures({
                    geometry:  geo,  // 查询中心点
                    distance: distance,//半径
                    units: units,  //半径的距离单位  英里
                    spatialRelationship: "intersects", // 地理关系 相交，
                    returnGeometry: false, //   是否范围序号要素的地理信息
                    returnQueryGeometry: true,
                    outFields: ["*"],//查询属性表中哪个字段  “*”的意思是全部字段
                })

全部代码如下：

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Basic Querying in FeatureLayer | Sample | ArcGIS API for JavaScript 4.23</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>

    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #optionsDiv {
            background-color: white;
            color: black;
            padding: 6px;
            max-width: 400px;
        }
    </style>
    <script>
      
        require([
            "esri/Map",
            "esri/Graphic",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Legend",
            "esri/geometry/Circle"
        ], (Map, Graphic, MapView, FeatureLayer, Legend,Circle) => {
            // Crime in SF
            const layer = new FeatureLayer({
                // autocasts as new PortalItem()
                url: "https://192.168.1.30:6443/arcgis/rest/services/test/population/FeatureServer/0",
            });

            const map = new Map({
                basemap: "gray-vector",
                layers: [layer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                popup: {
                    autoOpenEnabled: false,
                    dockEnabled: true,
                    dockOptions: {
                        // dock popup at bottom-right side of view
                        buttonEnabled: false,
                        breakpoint: false,
                        position: "bottom-right"
                    }
                }
            });


            view.ui.add("optionsDiv", "top-right");

            // additional query fields initially set to null for basic query
            let distance = 1000;
            let units = "miles";

            //create graphic for mouse point click
            const pointGraphic = new Graphic({
                symbol: {
                    type: "simple-fill", // autocasts as new SimpleFillSymbol()
                    color: [173, 216, 230, 0.2],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [0, 0, 255],
                        width: 1
                    }
                }
            });

            // Create graphic for distance buffer
            const bufferGraphic = new Graphic({
                symbol: {
                    type: "simple-fill", // autocasts as new SimpleFillSymbol()
                    color: [173, 216, 230, 0.2],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                }
            });

            // when query type changes, set appropriate values
            const queryOpts = document.getElementById("query-type");

            queryOpts.addEventListener("change", () => {
                console.log(queryOpts.value)
                switch (queryOpts.value) {
                    
                    // values set for distance query
                    case "1英里":
                        distance = 1;
                        break;
                    case "10英里":
                        distance = 10;
                        break;
                    case "100英里":
                        distance = 100;
                        break;
                    case "1000英里":
                        distance = 1000;
                        break;
                    default:
                        // Default set to basic query
                        distance = 1;
                }
            })
            layer.load()
                .then(() => {
                    // Set the view extent to the data extent
                    view.extent = layer.fullExtent;
                    layer.popupTemplate = layer.createPopupTemplate();
                });

            view.on("click", (event) => {
                view.graphics.remove(pointGraphic);
                if (view.graphics.includes(bufferGraphic)) {
                    view.graphics.remove(bufferGraphic);
                }
                queryFeatures(event);
            });

            function queryFeatures(screenPoint) {
                const point = view.toMap(screenPoint);
                var circleGeometry = new Circle({
                    center: point, // 圆心
                    // numberOfPoints: 60, // 圆返回点个数
                    radius: distance, // 半径大小
                    radiusUnit: 'miles' // 半径单位
                })

                layer.queryFeatures({
                    geometry:  point,  // 查询中心点
                    distance: distance,//半径
                    units: units,  //半径的距离单位  英里
                    spatialRelationship: "intersects", // 地理关系 相交，
                    returnGeometry: false, //   是否范围序号要素的地理信息
                    returnQueryGeometry: true,
                    outFields: ["*"],//查询属性表中哪个字段  “*”的意思是全部字段
                })
                    .then((featureSet) => {
                        console.log(featureSet.queryGeometry)
                        // set graphic location to mouse pointer and add to mapview
                        pointGraphic.geometry = circleGeometry;
                        view.graphics.add(pointGraphic);
                        // open popup of query result
                        view.popup.open({
                            location: point,
                            features: featureSet.features,
                            featureMenuOpen: true
                        });
                        if (featureSet.queryGeometry) {
                            bufferGraphic.geometry = featureSet.queryGeometry;
                            view.graphics.add(bufferGraphic);
                        }
                    });
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="optionsDiv" class="esri-widget">
        <p>Select a query type and click a point on the map to view the results.</p>
        <select id="query-type" class="esri-widget">
            <option value="1英里">1英里</option>
            <option value="10英里">10英里</option>
            <option value="100英里">100英里</option>
            <option value="1000英里">1000英里</option>
        </select>
    </div>
</body>

</html>

实例中我使用了自己发布的featurelayer地图，featurelayer地图发布教程地址：CSDN

也可以使用arcgis官网的一个url ：

const layer = new FeatureLayer({
// autocasts as new PortalItem()
portalItem: {
id: "234d2e3f6f554e0e84757662469c26d3"
},
outFields: ["*"]
});

注意：queryFeatures方法是个异步操作，使用then 或者 await 接受 featureset 结果，异步相关只是可以参考：CSDN

效果展示：

王建博09

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
5
评论
ArcGIS JavaScript for API（007）featurelayer 要素查询，查询指定范围内包含要素featurelayer .queryFeatures。

我们在做系统开发时，经常会遇到，要查询指定范围内包含的要素。原理很简单就是面内包含的要素。arcgis featurelayer 可以实现这个功能。使用到的接口是featurelayer .queryFeatures（options），返回结果是FeatureSet。我实现了一个以鼠标点击点为中心，指定为半径范围内包含的要素。layer.queryFeatures({ geometry: geo, // 查询中心点
复制链接

扫一扫