ArcGIS api for javascript——顯示多個查詢結果


描述

本例展示了在重疊的多邊形處理查詢的一種方式。單擊一個石油和天然氣的字段來查看地圖上的高亮顯示。如果僅僅點擊一個要素,能夠在單擊一次來查看包含一些屬性的InfoWindow。如果偶然單擊到重疊的要素,將看到到一個要素列表,為下一次單擊顯示哪個要素的信息提供幫助。

注意本例使用一個InfoTemplate來定義信息窗口的文本格式。能夠通過使用語法為${attributeName}包含某一屬性的實際值。例如:${PROD_GAS}。

下面的代碼根據用戶單擊要素的個數確定處理方式:

queryTask.execute(query, function(fset) {
          if (fset.features.length === 1) {
            showFeature(fset.features[0],evt);
          } else if (fset.features.length !== 0) {
            showFeatureSet(fset,evt);
          }
        });

如果用戶單擊一個要素,函數showFeature被調用。這個函數使用圖形的 SimpleFillSymbol來強調這個要素。默認情況下信息窗口不會顯示,直到用戶再次單擊這個加亮的要素,信息窗口才會顯示。

如果用戶點擊重疊的要素,函數showFeatureSet被調用。這個函數循環訪問每個要素並將要素名稱和一個超鏈接加入信息窗口。用戶能夠使用這個要素超鏈接的列表選擇要素。然后用戶能夠通過單擊加亮的要素顯示信息窗口。

注意查詢任務的結果始終是一個FeatureSet。在本例中,結果集中唯一一個項目被傳遞給showFeature函數,而全部的結果集被傳遞給showFeatureSet函數。 

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>QueryTask with geometry, queries with multiple results at the same location are displayed in an InfoWindow</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      var map, queryTask, query,featureSet;
      //初始化函數
      function init() {
        //開始范圍:地理坐標系wiid:4326
        var startExtent = new esri.geometry.Extent(-100.7, 36.8, -95.8, 40.2, new esri.SpatialReference({wkid:4326}));

        //創建地圖
        map = new esri.Map("mapDiv", {extent:startExtent});
        //切片層並加載到地圖中
        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(tiledLayer);

        //創建並增加一個動態層
        var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");
        map.addLayer(dynamicLayer);

        //注冊一個監聽click事件,當用戶點擊地圖時執行executeQueryTask方法
        dojo.connect(map, "onClick", executeQueryTask);

        //注冊一個監聽信息窗口的onHide事件
        dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});


        //建立查詢任務
        queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");

        //監聽onComplete事件的處理結果,使用queryTask.execute方法回調
        //dojo.connect(queryTask, "onComplete", showResults);

        //建立查詢過濾器
        query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["FIELD_NAME",
        "FIELD_KID", "PROD_GAS", "PROD_OIL", "STATUS"];
      }

      function executeQueryTask(evt) {
        map.infoWindow.hide();
        map.graphics.clear();
        featureSet = null;

        //用戶點擊onClick事件返回地圖上EVT點.
        //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素點).
        //設置查詢幾何等於evt.mapPoint
        //執行任務和完成showResults
        queryTask.execute(query, function(fset) {
          if (fset.features.length === 1) {
            showFeature(fset.features[0],evt);
          } else if (fset.features.length !== 0) {
            showFeatureSet(fset,evt);
          }
        });
      }

      function showFeature(feature,evt) {
        map.graphics.clear();

        //設置標記點
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.
        SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol
        (esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2),
        new dojo.Color([255,255,0,0.5]));
        feature.setSymbol(symbol);

        //構建信息窗口的標題和內容
        var attr = feature.attributes;
        var title = attr.FIELD_NAME;
        var content = "Field ID : " + attr.FIELD_KID
                    + "<br />Produces Gas : " + attr.PROD_GAS
                    + "<br />Produces Oil : " + attr.PROD_OIL
                    + "<br />Status : " + attr.STATUS;
        map.graphics.add(feature);

        map.infoWindow.setTitle(title);
        map.infoWindow.setContent(content);
        (evt) ? map.infoWindow.show(evt.screenPoint,
        map.getInfoWindowAnchor(evt.screenPoint)) : null;
      }

      function showFeatureSet(fset,evt) {
        //刪除地圖上所有的圖形層
        map.graphics.clear();
        var screenPoint = evt.screenPoint;

        featureSet = fset;

        var numFeatures = featureSet.features.length;

        //QueryTask返回featureSet類型.通過featureSet的循環把他們添加到信息窗口
        var title = "You have selected " + numFeatures + " fields.";
        var content = "Please select desired field from the list below.<br />";

        for (var i=0; i<numFeatures; i++) {
          var graphic = featureSet.features[i];
          content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
        }
        map.infoWindow.setTitle(title);
        map.infoWindow.setContent(content);
        map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Click on a petrolueum field to get more info.<br>
    If mulitple fields are selected then you can select the field to display.
    <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>
  </body>
</html> 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM