ArcGIS API for JavaScript 之查询功能

在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被添加到地图上。

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

不足之处,欢迎指正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354