ArcGIS api for javascript——加載查詢結果，懸停顯示信息窗口

時間 2019-11-29

標籤 arcgis api javascript 加載查詢結果懸停顯示信息窗口欄目 JavaScript 简体版

原文原文鏈接

轉自原文 ArcGIS api for javascript——加載查詢結果，懸停顯示信息窗口javascript

描述

本例在開始和地圖交互前執行一個查詢任務並加在查詢結果。這容許用戶鼠標懸停在任意郡縣時當即見到InfoWindow。本例改變了信息窗口的默認行爲，僅在鼠標單擊時顯示信息窗口。css

QueryTask構造函數接受被查詢的圖層，即 ESRI sample server上ESRI_Census_USA服務的郡縣圖層（索引號是3）。注意這和地圖使用的不是一個服務。地圖使用來自 ArcGIS Online的ESRI_StreetMap_World_2D服務。經過這種方式可以使用在視覺上匹配的不一樣服務做爲地圖和查詢任務的服務。注意本例中，街道地圖被顯示在沒有郡縣可見的比例，避免查詢任務返回結果和郡縣要素視覺衝突的可能性。html

查詢的where clause限制告終果是在美國南卡羅來納州的郡縣。還要注意 returnGeometry被設置爲true以便要素可以被顯示在地圖上。java

//build query filter

var query = new esri.tasks.Query();

query.returnGeometry = true;

query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];

query.where = "STATE_NAME = 'South Carolina'";

InfoTemplate定義了在信息窗口中屬性信息如何被格式化。注意在信息模板內容中能使用HTML。一樣，能使用語法${fieldName} 來顯示給出記錄的字段的值。例如: ${POP2000}.api

查詢任務返回一個FeatureSet，要素集合是一個包含每一個郡縣圖形的數組。下面的循環給每一個圖形分配一個 Symbol和信息模板，而後把圖形增長到地圖上:數組

for (var i=0, il=featureSet.features.length; i<il; i++) {

 var graphic = featureSet.features[i];

 graphic.setSymbol(symbol);

 graphic.setInfoTemplate(infoTemplate);

 map.graphics.add(graphic);

當鼠標懸停在圖形上時，下面的事件監聽器顯示信息窗口而且修改符號:ide

dojo.connect(map.graphics, "onMouseOver", function(evt) {

...

  evt.graphic.setSymbol(highlightSymbol);

  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

});

最後，當鼠標移出圖形時，這個監聽器是須要刪除圖形:函數

dojo.connect(map.graphics, "onMouseOut", function(evt) {

   map.infoWindow.hide();

   evt.graphic.setSymbol(symbol);

});

<%@ 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, results as an InfoWindow onHover</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");

      function init() {
        var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28,
        new esri.SpatialReference({wkid:4326}));
        //建立地圖
        var map = new esri.Map("mapDiv",{extent:startExtent});
        //加載地圖添加查詢功能
        dojo.connect(map, "onLoad", initFunctionality);

        //建立並添加層
        var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        map.addLayer(layer);
      }

      function initFunctionality(map) {
        //創建查詢任務
        var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

        //建立查詢過濾器
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["NAME", "POP2000",
        "POP2007", "POP00_SQMI", "POP07_SQMI"];
        query.where = "STATE_NAME = 'South Carolina'";

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("${NAME}");
        infoTemplate.setContent("<b>2000 Population: </b>${POP2000}<br/>"
                             + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"
                             + "<b>2007 Population: </b>${POP2007}<br/>"
                             + "<b>2007 Population per Sq. Mi.:</b>${POP07_SQMI}");

        map.infoWindow.resize(245,125);

        //監聽onComplete事件的處理結果，使用queryTask.execute方法回調
        dojo.connect(queryTask, "onComplete", function(featureSet) {
              map.graphics.clear();
              var highlightSymbol = new esri.symbol.SimpleFillSymbol(
                  esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                  new dojo.Color([255,0,0]), 3), 
                  new dojo.Color([125,125,125,0.35])
              );
          //var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
          var symbol = new esri.symbol.SimpleFillSymbol(
                  esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                    new esri.symbol.SimpleLineSymbol(
                        esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
                        new dojo.Color([255,255,255,0.35]), 
                        1),
                new dojo.Color([125,125,125,0.35])
                );

          var countiesGraphicsLayer = new esri.layers.GraphicsLayer();
          //QueryTask返回featureSet類型.經過featureSet的循環把他們添加到信息窗口
          for (var i=0, il=featureSet.features.length; i<il; i++) {
            //從featureSet中獲得當前實例.
            //從當前實例賦值給graphic
            var graphic = featureSet.features[i];
            graphic.setSymbol(symbol);
            graphic.setInfoTemplate(infoTemplate);

            //添加當前這個圖形到地圖圖層中.
            countiesGraphicsLayer.add(graphic);
          }
          map.addLayer(countiesGraphicsLayer);
          map.graphics.enableMouseEvents();
          //監聽onMouseOver事件執行countiesGraphicsLayer
          //監聽onMouseOver事件並建立一個新的幾何圖形event.graphic到地圖圖形層
          dojo.connect(countiesGraphicsLayer, "onMouseOver", function(evt) {
            map.graphics.clear();  //使用地圖圖形層
            var content = evt.graphic.getContent();
            map.infoWindow.setContent(content);
            var title = evt.graphic.getTitle();
            map.infoWindow.setTitle(title);
            var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
            map.graphics.add(highlightGraphic);
            map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
          });

          //監聽map.graphics onMouseOut事件時，清除顯示的圖形
          //隱藏信息窗口
          dojo.connect(map.graphics, "onMouseOut", function(evt) {
            map.graphics.clear();
            map.infoWindow.hide();
          });
        });

        queryTask.execute(query);
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Hover over a county in South Carolina to get more information.
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
  </body>
</html>

View Code

相關標籤/搜索

每日一句

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