美文网首页
ArcGIS API for JavaScript 之查询功能

ArcGIS API for JavaScript 之查询功能

作者: 依旧丶森 | 来源:发表于2018-09-28 17:40 被阅读99次

    在ArcGIS API中查询功能是经常使用的,常用的三个查询分别是FindTask,QueryTask,IdentifyTask。它们各自都有自己的特点。

    查询功能分为属性查询和空间查询

    * 属性查询 空间和属性 识别查询(图)
    单图层 * QueryTask *
    多图层 FindTask * IdentifyTask

    1. FindTask

    官方文档
    对一个地图服务的多个图层对象(全部或指定几个ID索引)做属性查询。

    • 有两个相关联的属性:

    FindParameters:属性查找的设定,包含图层,文本搜索,字段搜索,指定返回几何数据的精度,允许返回几何图形的最大偏移量等。根据需求设定。
    FindResult:搜索返回的数据。根据需求处理数据。

    • 简单属性搜索
          //创建搜索的地图服务和指定图层
         var find = new FindTask({
                 url: "http://*********/MapServer" });
         var params = new FindParameters({
                 layerIds: [0], });
       //js获取点击事件,执行查找函数
     document.getElementById("findBtn").addEventListener("click", doFind);
         function doFind() {
                //设定搜索为文本搜索并获取搜索关键字
                params.searchText =document.getElementById("inputTxt").value;
                //按参数设定执行查找
                find.execute(params)
                    .then(showResults)//正确返回执行函数
                    .catch(rejectedPromise);//错误返回执行函数
         }
         //获取表格要显示的地方
         var resultsTable = document.getElementById("tbl");
         //正确请求,处理返回结果
         function showResults(response) {
                //得到搜索结果,清空上次搜索显示结果
                var results = response.results;
                resultsTable.innerHTML = "";
                //判断本次搜索返回是不是空
                if (results.length === 0) {
                     resultsTable.innerHTML = "<i>未搜索到结果</i>";
                     return;
                }
              // 设定表格的列数和列名
              var topRow = resultsTable.insertRow(0);
                    var cell1 = topRow.insertCell(0);
                    cell1.innerHTML = "<b>名称</b>";
              //forEach遍历搜索结果
              results.forEach(function(findResult, i) {
                    // 通过findResult.feature.attributes取出对应字段属性
                    var state = findResult.feature.attributes[
                            "名称"];
                    // 将获取的属性插入表格
                    var row = resultsTable.insertRow(i + 1);
                    var cell1 = row.insertCell(0);
                    cell1.innerHTML = state;
              });
         }
          //请求失败,打印错误信息
         function rejectedPromise(error) {
                console.error("msg: ", error.message);
         }
    //至于HTML标签input、button、和显示结果的table不写了,自行补全。
    

    2. QueryTask

    官方文档
    只能针对一个图层进行空间或属性查询。

    • 有四个相关属性
    名称 作用
    Query 普通查询,一般常用的查询
    AttachmentQuery 翻译为附件查询,具体看官方文档
    RelationshipQuery 关系查询,具体看官方文档
    FeatureSet 特征复位,搜索返回的特性集合,包含每个搜索结果的属性和空间
    • QueryTask有好几种执行查询的方法,不同的方法对应不同的查询:
    名称 返回格式 作用
    execute() Promise<FeatureSet> 常用查询,返回满足查询的对象属性和空间
    executeAttachmentQuery() Promise<AttachmentInfo[]> **
    executeForCount() Promise<Number> 返回满足输入查询的特征数
    executeForExtent() Promise<[Object]> 一个对象,包含满足的范围和计数
    executeForIds() Promise<Number[]> 对url指定的layer层查询,返回的是满足查询的对象ID数组
    executeRelationshipQuery() Promise<FeatureSet> 关系查询RelationshipQuery使用
    • 查询Query也有许多设定,此处就不一一讲解了,需要的话,看官方文档,这里只说两个常用方法。

    where:根据字段查询
       query.where = "NAME = '" + stateName + "'";
       query.where = "POP04 > " + population;
    text:文本查询,查询使用的是服务器显示的字段,
       是使用“like”的WHERE子句的缩写。
       query.text = "山 ";

    • 查询结果
      QueryTask查询的返回结果是FeatureSet,FeatureSet也有自己的属性,一般常用的就是features,格式为Graphic[],将其添加到GraphicsLayer中,再添加到map即可在图层显示
      参考教程上说明:(QueryTask进行查询的地图服务并不必项加载到Map中进行显示。)

    查询定位实现代码:

        var Url = "http://****/MapServer/0";  //指定图层
        // 结果使用的渲染模板,使用了模板语法具体设定看官方文档
        var popupTemplate = { 
                 title: "{名称}",
                 fieldInfos: [{
                       fieldName: "OBJECTID",
                       label: "OBJECTID",
                       format: {
                            places: 0,
                            digitSeperator: true
                        }
                 }],
                 content: "<br><b>OBJECTID:</b> {OBJECTID}" 
        };
        //设定点的symbol,实现标注地点效果
        var mtnSymbol = {
                type: "simple-marker", 
                style: "square",
                color: "blue",
                size: "8px",  
                outline: {  
                      color: [ 255, 255, 0 ],
                      width: 3  // points
                }
        };
        //创建layer,为了将搜索结果渲染在map上
        var resultsLayer = new GraphicsLayer();
        map.add(resultsLayer);
        //新建查询,设定链接和参数
        var qTask = new QueryTask({url: Url});
        var params = new Query({
               //是否返回几何
               returnGeometry: true,
               //要查询的字段,全字段查询
               outFields: ["*"]
        });
        //执行查询函数
        function doQuery() {
              //获取输入内容,设定查询参数方式,移除上一次的结果
              var value = document.getElementById("inputTxt").value;
              resultsLayer.removeAll();
              params.text=value;
              //查询
              qTask.execute(params)
                   .then(getResults)
                   .catch(promiseRejected);
        }
    
        function getResults(response) {
               var peakResults = arrayUtils.map(response.features,   
                      function(feature) {
                            //设定搜索结果的symbol和popupTemplate。
                            feature.symbol =mtnSymbol;
                            feature.popupTemplate = popupTemplate;
                            return feature;
                      }
               );
               //将搜索结果添加到Graphiclayer上
               resultsLayer.addMany(peakResults);
               //点击实现视图跳转到结果layer上
               view.goTo(peakResults).then(function() {
                      //将其中一个标签显示出来
                      view.popup.open({
                            features: peakResults,
                            featureMenuOpen: true,
                            updateLocationEnabled: true
                      });
               });
              dom.byId("printResults").innerHTML = 
                    "找到"+peakResults.length +"个结果 !";
        }
        function promiseRejected(error) {
              console.error("msg: ", error.message);
        }         
        //执行查找功能
        document.getElementById("doBtn").addEventListener("click", doQuery);
    
        //将搜索框添加到view中显示
        view.when(function () {
               view.ui.add("optionsDiv", "bottom-right");
        }
    
    
    HTML标签:
    <div class="esri-widget" id="optionsDiv">
        <h5>输入关键词查询</h5>
        <input type="text" id="inputTxt" size="25" value="**" />
        <button class="esri-widget" id="doBtn">查找</button>
        <br><p><span id="printResults"></span></p>
    </div>
    

    3.IdentifyTask

    • 相关属性
      IdentifyParameters   参数设定
      IdentifyResult     结果

    是一个在地图服务中识别要素的功能类。当用户在客户端使用Draw工具绘制了一个几何对象以后,这个几何对象就可以作为IdentifyTask的参数収送到服务器迕行识别,满足条件的要素将会被输出,返回要素都可以作为Graphic被添加到地图上。

    具体实现目前没做,可参考官方文档。

    不足之处,欢迎指正。

    相关文章

      网友评论

          本文标题:ArcGIS API for JavaScript 之查询功能

          本文链接:https://www.haomeiwen.com/subject/qexpoftx.html