ArcGIS api for javascript——查詢，馬上打開信息窗口

時間 2019-11-22

標籤 arcgis api javascript 查詢馬上打開信息窗口欄目 JavaScript 简体版

原文原文鏈接

描述

本例展現了當一個要素被查詢時如何馬上打開一個InfoWindow。信息窗口能被用來將要素的屬性格式化成用戶易讀的格式。javascript

本例中，地圖和查詢任務都使用ESRI sample server上的服務KGS_OilGasFields_Kansas。地圖也使用了來自ArcGIS Online的ESRI_Imagery_World_2D圖層。注意地圖和查詢任務不是必需要使用相同的服務。例如，僅僅想保持來自ArcGIS Online的背景影像並在地圖單擊後顯示要素。css

單擊地圖後，下面的事件監聽器調用函數executeQueryTask:html

dojo.connect(map, "onClick", executeQueryTask);

查詢任務根據用戶單擊的對象（不是多邊形，惟一多邊形或多個重疊的多邊形）提供不一樣地運行:java

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被調用。該函數格式化信息窗口，使用map.graphics.add顯示要素的圖形，並使用map.infoWindow.show方法馬上顯示信息窗口。這覆蓋了圖形第二次單擊顯示信息窗口的默認行爲。api

若是多個要素被單擊，函數showFeatureSet被調用。該函數循環訪問每一個要素並將要素名稱和超連接加到信息窗口中。用戶可以使用這個要素超連接的列表選擇要素。若是用戶單擊一個高亮的要素，圖形的默認行爲是顯示一個信息窗口。ide

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

  1  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3 <html>
  4   <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6     <meta http-equiv="X-UA-Compatible" content="IE=7" />
  7     <title>QueryTask with geometry, queries with multiple results at the same location are displayed in an InfoWindow</title>
  8     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
  9     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
 10     <script type="text/javascript" language="Javascript">
 11       dojo.require("esri.map");
 12       dojo.require("esri.tasks.query");
 13 
 14       var map, queryTask, query,featureSet;
 15       //初始化函數
 16       function init() {
 17         //開始範圍：地理座標系wiid:4326
 18         var startExtent = new esri.geometry.Extent(-100.7, 36.8, -95.8, 40.2, new esri.SpatialReference({wkid:4326}));
 19 
 20         //建立地圖
 21         map = new esri.Map("mapDiv", {extent:startExtent});
 22         //切片層並加載到地圖中
 23         var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
 24         map.addLayer(tiledLayer);
 25 
 26         //建立並增長一個動態層
 27         var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");
 28         map.addLayer(dynamicLayer);
 29 
 30         //註冊一個監聽click事件，當用戶點擊地圖時執行executeQueryTask方法
 31         dojo.connect(map, "onClick", executeQueryTask);
 32 
 33         //註冊一個監聽信息窗口的onHide事件
 34         dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
 35 
 36 
 37         //創建查詢任務
 38         queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");
 39 
 40         //監聽onComplete事件的處理結果，使用queryTask.execute方法回調
 41         //dojo.connect(queryTask, "onComplete", showResults);
 42 
 43         //創建查詢過濾器
 44         query = new esri.tasks.Query();
 45         query.returnGeometry = true;
 46         query.outFields = ["FIELD_NAME",
 47         "FIELD_KID", "PROD_GAS", "PROD_OIL", "STATUS"];
 48       }
 49 
 50       function executeQueryTask(evt) {
 51         map.infoWindow.hide();
 52         map.graphics.clear();
 53         featureSet = null;
 54 
 55         //用戶點擊onClick事件返回地圖上EVT點.
 56         //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素點).
 57         //設置查詢幾何等於evt.mapPoint
 58         //執行任務和完成showResults
 59         queryTask.execute(query, function(fset) {
 60           if (fset.features.length === 1) {
 61             showFeature(fset.features[0],evt);
 62           } else if (fset.features.length !== 0) {
 63             showFeatureSet(fset,evt);
 64           }
 65         });
 66       }
 67 
 68       function showFeature(feature,evt) {
 69         map.graphics.clear();
 70 
 71         //設置標記點
 72         var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.
 73         SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol
 74         (esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2),
 75         new dojo.Color([255,255,0,0.5]));
 76         feature.setSymbol(symbol);
 77 
 78         //構建信息窗口的標題和內容
 79         var attr = feature.attributes;
 80         var title = attr.FIELD_NAME;
 81         var content = "Field ID : " + attr.FIELD_KID
 82                     + "<br />Produces Gas : " + attr.PROD_GAS
 83                     + "<br />Produces Oil : " + attr.PROD_OIL
 84                     + "<br />Status : " + attr.STATUS;
 85         map.graphics.add(feature);
 86 
 87         map.infoWindow.setTitle(title);
 88         map.infoWindow.setContent(content);
 89         (evt) ? map.infoWindow.show(evt.screenPoint,
 90         map.getInfoWindowAnchor(evt.screenPoint)) : null;
 91       }
 92 
 93       function showFeatureSet(fset,evt) {
 94         //刪除地圖上全部的圖形層
 95         map.graphics.clear();
 96         var screenPoint = evt.screenPoint;
 97 
 98         featureSet = fset;
 99 
100         var numFeatures = featureSet.features.length;
101 
102         //QueryTask返回featureSet類型.經過featureSet的循環把他們添加到信息窗口
103         var title = "You have selected " + numFeatures + " fields.";
104         var content = "Please select desired field from the list below.<br />";
105 
106         for (var i=0; i<numFeatures; i++) {
107           var graphic = featureSet.features[i];
108           content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
109         }
110         map.infoWindow.setTitle(title);
111         map.infoWindow.setContent(content);
112         map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
113       }
114 
115       dojo.addOnLoad(init);
116     </script>
117   </head>
118   <body class="tundra">
119     Click on a petrolueum field to get more info.<br>
120     If mulitple fields are selected then you can select the field to display.
121     <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>
122   </body>
123 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。