arcgis学习系列-6查询FeatureLayer

最新推荐文章于 2025-05-07 14:32:41 发布

naturessdfsafagf

最新推荐文章于 2025-05-07 14:32:41 发布

阅读量549

点赞数

分类专栏： arcgis 文章标签： query FeatureLayer 查询图层

原文链接：https://developers.arcgis.com/javascript/latest/guide/query-a-feature-layer/

版权

arcgis 专栏收录该内容

10 篇文章

订阅专栏

概述

本文你将学习：如何对feature图层进行查询并添加图层到地图中。
使用arcgis for javascript 你可以查询feature layer为你的应用程序检索一个子数据集。在这个方案中图层被引用但是没有加载到地图中。查询可以包含一个sql的where子句，几何特征和空间关系。创建Query之后，将其传递给Query Task，以便从feature层检索数据。
当features返回之后，你可以将它们添加到map，或者进行其他操作。

在这篇练习中，你会创建一条sql查询，筛选所有"Backbone" 路，并将他们添加到地图中。

步骤

创建一个地图应用程序。
在require中添加Query, QueryTask and Graphic模块

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/tasks/support/Query",
      "esri/tasks/QueryTask",
      "esri/Graphic"
], function(Map, MapView, Query, QueryTask, Graphic) {}

在主函数中创建一个Query对象，设置where属性为筛选出"TRL_NAME like ‘%backbone%’"所有的主路，设置这个对象返回的子数据集包含所有字段，并且设置返回的结果中包含几何信息。最后创建一个QueryTask 指向小路图层，并执行查询。

// Define query SQL expression
      var query = new Query();
      query.where = "TRL_NAME like '%backbone%'"
      query.outFields = ["*"];
      query.returnGeometry = true;

      // Define the query task
      var queryTask = new QueryTask({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
      });

      // Execute the query
      queryTask.execute(query)
        .then(function(result){
          console.log(result.features.length)
        })
        .otherwise(function(e){
          console.log(e);
        });

运行代码，查看控制台确保feature返回了。

添加features到地图
5. 在主函数中循环遍历features，为每一个feature创建一个Graphic并把它添加到view的graphics 属性中。

 // Execute the query
      queryTask.execute(query)
        .then(function(result){
          //console.log(result.features.length)

          //*** ADD ***//
          result.features.forEach(function(item){
             var g = new Graphic({
               geometry: item.geometry,
               attributes: item.attributes,
               symbol: {
                 type: "simple-line",
                 color: "black",
                 width: 1.2,
                 style: "short-dot"
               },
               popupTemplate: {
                 title: "{TRL_NAME}",
                 content: "{*}"  // All of the fields
               }
             });
             view.graphics.add(g);
          });

          // Zoom to the data returned
          view.when(function(){
            view.goTo({
              target: view.graphics.toArray()
            });
          });
         })
        .otherwise(function(e){
          console.log(e);
        });

运行代码，恭喜。

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
    <style>
        body {
        }

        #mapView {
            width: 1000px;
            height: 800px;
        }
    </style>
    <script src="../Scripts/jquery-3.3.1.min.js"></script>
    <script src="https://js.arcgis.com/4.11/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/tasks/support/Query",
            "esri/tasks/QueryTask",
            "esri/Graphic"
        ], function (Map, MapView, FeatureLayer, Query, QueryTask, Graphic) {

            var map = new Map({
                basemap: "topo-vector"
            });
            var mv = new MapView({
                container: "mapView",
                map: map,
                center: [-118.71511, 34.09042],
                zoom: 11
            });
            var query = new Query();
            query.where = "TRL_NAME like '%backbone%'";
            query.outFields = ["*"];
            query.returnGeometry = true;

            var qt = new QueryTask({
                url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
            });
            qt.execute(query).then(function (result) {
                console.log(result.features.length);
                result.features.forEach(function (feature) {
                    var g = new Graphic({
                        geometry: feature.geometry,
                        attributes: feature.attributes,
                        symbol: {
                            type: "simple-line",
                            color: "#000",
                            width: "1.2",
                            style: "short-dot"
                        },
                        popupTemplate: {
                            title: "{TRL_NAME}",
                            content: "{*}"
                        }
                    });

                    mv.graphics.add(g);
                });

                mv.when(function () {
                    mv.goTo({
                        target: mv.graphics.toArray()
                    });
                });


            }).otherwise(function (e) {
                console.log(e);
            });

        });
    </script>
</head>
<body>
    <div id="mapView">

    </div>
</body>
</html>