Fatal编程技术网
  • javascript/
  • Javascript 查询点特征弹出窗口

Javascript 查询点特征弹出窗口

javascript html

Javascript 查询点特征弹出窗口,javascript,html,arcgis,arcgis-js-api,Javascript,Html,Arcgis,Arcgis Js Api,我正在运行一个查询任务，以便在地图上选择dynamicMapServiceLayers。我能够为我的校园建筑弹出一个窗口，但似乎无法让公交车站层返回任何东西。我试图重新配置点图层本身，但在here或arcGIS online上未找到任何结果。我看过大量的示例代码，但还没有看到任何改变点特性的具体内容。我是否缺少返回点功能巴士站弹出窗口的内容 <!DOCTYPE html> <html> <head> <meta http-equiv="Content

我正在运行一个查询任务，以便在地图上选择dynamicMapServiceLayers。我能够为我的校园建筑弹出一个窗口，但似乎无法让公交车站层返回任何东西。我试图重新配置点图层本身，但在here或arcGIS online上未找到任何结果。我看过大量的示例代码，但还没有看到任何改变点特性的具体内容。我是否缺少返回点功能巴士站弹出窗口的内容

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Updating the legend to display visible layers</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>

  <script src="http://js.arcgis.com/3.11/"></script>
  <script>

    dojo.require("esri.tasks.query"); 
    dojo.require("esri.dijit.Popup");
    dojo.require("esri.tasks.find");
    dojo.require("");


    var map, queryTask, query;
    var symbol, markerSymbol, infoTemplate;

    require([
      "esri/map",
      "esri/arcgis/utils",
      "esri/dijit/Legend",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "dojo/dom",
      "dojo/dom-construct",
      "dojo/parser",
      "dojo/_base/array",
      "dijit/form/CheckBox",
      "dijit/layout/AccordionContainer",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ],
      function (
        Map, utils, Legend, ArcGISDynamicMapServiceLayer, dom, domConstruct,
        parser, arrayUtils, CheckBox
      ) {

        parser.parse();

        var legendLayers = [];

        map = new Map("map", {
          basemap: "topo",
          center: [-80.556, 37.1367],
          zoom: 16
        });

        var buildingLayer = new ArcGISDynamicMapServiceLayer("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer", {
          id: 'ruRestServices'
        });

        legendLayers.push({ layer: buildingLayer, title: 'RU Rest Services' });


        map.on('layers-add-result', function () {
          var legend = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legendDiv");
          legend.startup();
        });
        map.addLayers([ buildingLayer ]);

        map.on('layers-add-result', function () {
          //add check boxes
          arrayUtils.forEach(legendLayers, function (layer) {
            var layerName = layer.title;
            var checkBox = new CheckBox({
              name: "checkBox" + layer.layer.id,
              value: layer.layer.id,
              checked: layer.layer.visible
            });
            checkBox.on("change", function () {
              var targetLayer = map.getLayer(this.value);
              targetLayer.setVisibility(!targetLayer.visible);
              this.checked = targetLayer.visible;
            });

            //add the check box and label to the toc
            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
            var checkLabel = domConstruct.create('label', {
                'for': checkBox.name,
                innerHTML: layerName
              }, checkBox.domNode, "after");
            domConstruct.place("<br />", checkLabel, "after");
          });
        });


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


        queryTask = new esri.tasks.QueryTask("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer/6");
        queryTask2 = new esri.tasks.QueryTask("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer/4");  

        query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["BLDGNAME", "OBJECTID", "NAME", "SHAPE_AREA" ];

        query2 = new esri.tasks.Query();
        query.returnGeometry = true;
        query2.outFields = ["OBJECTID"];

       infoTemplate = new esri.InfoTemplate("${BLDGNAME}", "Object ID: ${OBJECTID}<br />Name: ${Name}");
       infoTemplate2 = new esri.InfoTemplate("${OBJECTID}", "Object ID: ${OBJECTID}" );

      markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
      polygonSymbol =  new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
      });

      function executeQueryTask(evt) {
       query.geometry = evt.mapPoint; 
       queryTask.execute(query, showResults);
      }

      function executeQueryTask2(evt) {
        query2.geometry = evt.mapPoint;
        queryTask2.execute(query2, showResults2);
      }

      function showResults(featureSet) {

        map.graphics.clear();

        dojo.forEach(featureSet.features,function(feature){
          var graphic = feature;
          switch (graphic.geometry.type){
            case "point":
              graphic.setSymbol(markerSymbol);
              break;
            case "polygon":
              graphic.setSymbol(polygonSymbol);
              break;
          }
        //  graphic.setSymbol(symbol);


          graphic.setInfoTemplate(infoTemplate);
          graphic.setInfoTemplate(infoTemplate2);



          map.graphics.add(graphic);

        });
      }


  </script>
</head>

<body class="claro">
 Click on a Radford University Building to get more info.  When Building is highlighted, click building again to get info window.

<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">

        <div id="legendDiv"></div>

      </div>

      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'RU Layers'">

        <span style="padding:10px 0;">Click to toggle the RU Rest API Service Layers</span>

        <div id="toggle" style="padding: 2px 2px;"></div>

      </div>
    </div>
  </div>
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
  </div>
</div>

</body>
</html>
非常感谢您的帮助。

您的代码中有多个错误。 最重要的是，查询点图层时，应将范围构建为过滤几何图形，而不是点。该范围必须包含您要查询的点。以下是修复方法：

//dojo.connect(map, "onClick", executeQueryTask); WRONG
dojo.connect(map, "onClick", executeQueryTask2);


query2 = new esri.tasks.Query();
//query.returnGeometry = true;  WRONG
query2.returnGeometry = true;
query2.outFields = ["OBJECTID"];

 function executeQueryTask(evt) {
  // clear goes here so that it clears only before first query
   map.graphics.clear();


   query.geometry = evt.mapPoint; 
   queryTask.execute(query, showResults);
  }

 function executeQueryTask2(evt) {
    // query2.geometry = evt.mapPoint; WRONG
    var ext = new esri.geometry.Extent(evt.mapPoint.x - 50, evt.mapPoint.y - 50 , evt.mapPoint.x + 50, evt.mapPoint.y + 50, evt.mapPoint.spatialReference)
    query2.geometry = ext;
    queryTask2.execute(query2, showResults);
  }



  function showResults(featureSet) {

    dojo.forEach(featureSet.features,function(feature){
      var graphic = feature;
      switch (graphic.geometry.type){
        case "point":
          graphic.setSymbol(markerSymbol);
         // set info template for points
          graphic.setInfoTemplate(infoTemplate2);
          break;
        case "polygon":
          graphic.setSymbol(polygonSymbol);
         // set info template for polygons
          graphic.setInfoTemplate(infoTemplate);
          break;
      }
      map.graphics.add(graphic);

    });
  }