当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 ArcGIS API for JavaScript中要素图层查询（地图外搜索点击查询）的方法总结

荐 ArcGIS API for JavaScript中要素图层查询（地图外搜索点击查询）的方法总结

2020年07月11日  | 移动技术网IT编程  | 我要评论

1.Arcgis API for JavaScript中常见的三种查询方式

在Arcgis API for JavaScript中常见的属性查询有三种方式：QueryTask，FindTask,IdentifyTask.【具体用法请参考官网示例】

  1. QueryTask:只可在要素服务（featurelayer）或者某个地图服务（MapImageLayer）的某个子图层进行查询(如下图，你发布的地图服务必须要可以支持query才可以，发布服务如果为featurelayer其本身就支持，如果发布为MapImageLayer则需要访问其子图层才可以)，它查询的地图服务并不必须加载到Map中进行显示，执行QueryTask需要两个先决条件：1.需要查询的图层的url ，精确到layerId；2.查询的过滤条件
  2. FindTask：在某个地图服务中进行属性查询的功能类，FindTask以FindParameters对象为参数，能查询同一个地图服务的一个或多个图层，并且可以在多个字段中进行查询，FindTask仅仅用于属性信息的查询，在FindTask执行结束后，可以从其返回结果中获取查询的对象来自哪个图层和哪个字段
  3. IdentifyTask:在某个地图服务中进行空间查询，IdentifyTask以IdentifyParameters对象作为参数，能查询同一个地图服务的一个或者多个图层，IdentifyTask仅仅用于空间信息查询

 2.要素图层查询的过程

 2.1数据源：

这个数据可以发布到Portal上也可以发布到Online上，笔者将全国矢量数据发布到了Portal中并使用要素图层的“全国矢量1”数据作为数据源，如下图：

 2.1编写代码：

引入全国矢量数据的URL地址（portal或online上的数据），无论部署到IIS还是Tomcat，只要找到对应的FeatureServer，并选择你要的图层索引即可。

 var china =
          "https://*********/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";

 设置popup弹出模板，{nl_name_1}为字段值，选择你要展示的若干字段，不要用别名（如下图）

var popupTemplate = {
          title: "{nl_name_1},{nl_name_2},{nl_name_3}", //全国矢量（省、市、县）
          fieldInfos: [
            {
              fieldName: "nl_name_3",
              label: "Elevation (feet)",
            }
          ],
          content: "<br><b>县级行政区:</b> {nl_name_3} ft "
        };

创建用于显示查询结果的图形层和符号，并允许在地图/视图中显示结果 ，最后向地图中添加此图层

//创建用于显示查询结果的图形层和符号
        var resultsLayer = new GraphicsLayer();

        /*****************************************************************
         * 特征服务的地址
         *****************************************************************/
        var qTask = new QueryTask({
          url: china //全国矢量
        });

        /******************************************************************
         * 设置查询参数以始终返回几何图形和所有字段。
         * 返回几何图形允许我们在地图/视图中显示结果
         ******************************************************************/
        var params = new Query({
          returnGeometry: true,
          outFields: ["*"]
        });

        var map = new Map({
          basemap: "osm",
          layers: [resultsLayer] // 向地图添加绘图图层
        });

根据你要查询的字段值编写正确的SQL语句，笔者根据底图编写了根据县级行政区进行模糊查询的SQL语句


        //每次按钮点击时执行的函数
        function doQuery() {
          // 清除以前图层的查询
          resultsLayer.removeAll();

          //拼写查询全国矢量的 SQL语句（设置的只针对县进行检索）
          params.where = "nl_name_3 like '" + value.value + "%'";

          //成功执行查询并调用getresult方法，
          //查询失败调用promiserejected方法
          qTask
            .execute(params)
            .then(getResults)
            .catch(promiseRejected);
        }

对编写SQL语句的正确性，可以使用此工具校验

 

以上就是关键的几个点，下面附上源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>QueryTask - 4.15</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #optionsDiv {
        background-color: dimgray;
        color: white;
        padding: 10px;
        width: 350px;
      }
      .esri-popup .esri-popup-header .esri-title {
        font-size: 18px;
        font-weight: bolder;
      }
      .esri-popup .esri-popup-body .esri-popup-content {
        font-size: 14px;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>
    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "esri/Map",
        "esri/views/MapView",
        "esri/Basemap"
      ], function(
        Map,
        SceneView,
        GraphicsLayer,
        QueryTask,
        Query,
        Map,
        MapView,
        Basemap
      ) {
        //全国矢量数据的URL地址（portal或online上的数据）
        var china =         "https://**************/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";
        // 为每一个结果定义弹出框，设置弹出模板
        var popupTemplate = {
          title: "{nl_name_1},{nl_name_2},{nl_name_3}", //全国矢量（省、市、县）
          fieldInfos: [
            {
              fieldName: "nl_name_3",
              label: "Elevation (feet)",
            }
          ],
          content: "<br><b>县级行政区:</b> {nl_name_3} ft "
        };
        //创建用于显示查询结果的图形层和符号
        var resultsLayer = new GraphicsLayer();
        //特征服务的地址
        var qTask = new QueryTask({
          url: china //全国矢量
        });
       //设置查询参数以始终返回几何图形和所有字段。
       //返回几何图形允许我们在地图/视图中显示结果
        var params = new Query({
          returnGeometry: true,
          outFields: ["*"]
        });
        var map = new Map({
          basemap: "osm",
          layers: [resultsLayer] // 向地图添加绘图图层
        });
        //添加二维（全国矢量）
        var view = new MapView({
          map: map,
          container: "viewDiv",
          zoom: 4,
          center: [108, 33],
          popup: {
            dockEnabled: true,
            dockOptions: {
              position: "top-right",
              breakpoint: false
            }
          }
        });
        // 当按钮点击的时候执行doquery方法
        view.when(function() {
          //对button不做设置，其在地图外面
          document.getElementById("doBtn").addEventListener("click", doQuery);
        });
        var value = document.getElementById("valSelect"); //获取输入值
        //每次按钮点击时执行的函数
        function doQuery() {
          // 清除以前图层的查询
          resultsLayer.removeAll();
          //拼写查询全国矢量的 SQL语句（设置的只针对县进行检索）
          params.where = "nl_name_3 like '" + value.value + "%'";
          //成功执行查询并调用getresult方法，
          //查询失败调用promiserejected方法
          qTask
            .execute(params)
            .then(getResults)
            .catch(promiseRejected);
        }
        // 成功调用时执行的方法
        function getResults(response) {
          // 循环每一个结果并标记符号和弹出框模板
          // 并使它们每一个都在地图上显示出来
          var peakResults = response.features.map(function(feature) {
            feature.popupTemplate = popupTemplate;
            return feature;
          });
          //向结果图层中添加刚找到的全部特征要素图层
          resultsLayer.addMany(peakResults);
          //将图形添加到地图上之后展示弹框
          view
            .goTo(peakResults)
            .then(function() {
              view.popup.open({
                features: peakResults,
                updateLocationEnabled: true
              });
            })
            .catch(function(error) {
              if (error.name != "AbortError") {
                console.error(error);
              }
            });
          // 打印结果数量返回给使用者
          document.getElementById("printResults").innerHTML =
            peakResults.length + " results found!";
        }
        // 访问失败时候执行
        function promiseRejected(error) {
          console.error("Promise rejected: ", error.message);
        }
      });
    </script>
  </head>
  <body>
    <div class="esri-widget" id="optionsDiv">
      <!--手动输入要找的县级行政区-->
      <input id="valSelect" placeholder="请输入" value="" />
      <button class="esri-widget" id="doBtn">点击查询</button> <br />
      <p><span id="printResults"></span></p>
    </div>
    <div id="viewDiv"></div>
  </body>
</html>

执行完效果图（根据模糊查询“大”，共匹配28个符合要求的数据，点击缩放可分别查看）

 

 前端美化后如下：

参考链接：

popup使用:https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#fieldInfos

querytask沙盒样板: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=tasks-query

querytask使用：https://developers.arcgis.com/javascript/latest/api-reference/esri-tasks-QueryTask.html

 

如果有遗漏，和描述错误的地方，欢迎留言私信指正 

 

 

本文地址：https://blog.csdn.net/qq_42539194/article/details/107244982

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网