2016-09-28 74 views
0

我将ArcGis要素图层与infoTemplate集成在一起。但是在同一页面上,我也有Spring的JSTL变量。由于这个dojo变量refernces $ {}没有解决。

任何人都可以告诉我如何解决这个问题。

var content2 = '<b>Location</b>: ${LOCATION}' 
      + '<br><b>Timing</b>: ${FRIDAY_STATUS}' 
      + '<br><b>Friday</b>: ${PUBLIC_HOLIDAY_STATUS}'; 

    var infoTemplate2 = new InfoTemplate(); 
    infoTemplate2.setTitle('Customer Care Centre Details'); 
    //infoTemplate2.setContent(content2); 

${LOCATION}, ${FRIDAY_STATUS}, ${PUBLIC_HOLIDAY_STATUS}必须由道场,而不是JSTL春天来解决....

+0

您可以创建一个js小提琴或样品为它...或添加类似功能层创造一些细节,并结合它的信息模板..然后只有我们将能够告诉你什么你错过了... –

回答

0

好吧,下面是你正在尝试以上达到同样的样品...

var map, compare, compare2; 
 

 
     require([ 
 
     "esri/map", 
 
     "esri/InfoTemplate", 
 
     "esri/layers/FeatureLayer", 
 
     "esri/renderers/SimpleRenderer", 
 
     "esri/symbols/SimpleFillSymbol", 
 
     "esri/symbols/SimpleLineSymbol", 
 
     "dojo/dom", 
 
     "dojo/number", 
 
     "dojo/on", 
 
     "dojo/parser", 
 
     "esri/Color", 
 
     "dijit/layout/BorderContainer", 
 
     "dijit/layout/ContentPane", 
 
     "dojox/layout/ExpandoPane", 
 
     "dojo/domReady!" 
 
     ], 
 
     function (
 
      Map, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol, 
 
      SimpleLineSymbol, dom, number, on, parser, Color 
 
    ) { 
 

 
      parser.parse(); 
 

 
      map = new Map("mapDiv", { 
 
      basemap: "streets", 
 
      center: [-86.796, 47.13], 
 
      zoom: 7 
 
      }); 
 

 
      var infoTemplate = new InfoTemplate(); 
 
      infoTemplate.setTitle("Population in ${NAME}"); 
 
      infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" + 
 
            "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" + 
 
            "<b>2000: </b>${POP2000:NumberFormat}<br/>" + 
 
            "<b>2000 density: </b>${POP00_SQMI:NumberFormat}"); 
 

 
      var counties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", { 
 
      mode: FeatureLayer.MODE_SNAPSHOT, 
 
      infoTemplate: infoTemplate, 
 
      outFields: [ 
 
       "NAME", "POP2000", "POP2007", "POP00_SQMI", 
 
       "POP07_SQMI" 
 
      ] 
 
      }); 
 

 
      counties.setDefinitionExpression("STATE_NAME = 'Michigan'"); 
 

 
      //apply a renderer 
 
      var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
 
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 
 
       new Color([255, 255, 255, 0.35]), 1), 
 
      new Color([109, 146, 155, 0.35])); 
 
      counties.setRenderer(new SimpleRenderer(symbol)); 
 

 
      map.addLayer(counties); 
 

 
      on(dom.byId("chkT1"), "click", changeInfoTemplate); 
 
      on(dom.byId("chkT2"), "click", changeInfoTemplate); 
 

 
      dom.byId("chkT1").checked = true; 
 

 
      compare = function (value, key, data) { 
 
      var result = "", diff, pctChange; 
 

 
      switch (key) { 
 
       case "POP2007": 
 
       result = value > data.POP2000 ? "images/up.png" : "images/down.png"; 
 
       diff = data.POP2007 - data.POP2000; 
 
       pctChange = (diff * 100)/data.POP2000; 
 
       break; 
 

 
       case "POP07_SQMI": 
 
       result = value > data.POP00_SQMI ? "images/up.png" : "images/down.png"; 
 
       diff = data.POP07_SQMI - data.POP00_SQMI; 
 
       pctChange = (diff * 100)/data.POP00_SQMI; 
 
       break; 
 
      } 
 

 
      return number.format(value) + 
 
        "&nbsp;&nbsp; <img src='" + result + "'/>" + 
 
        "&nbsp;&nbsp;<span style='color: " + 
 
        (pctChange < 0 ? "red" : "green") + ";'>" 
 
        + number.format(pctChange, { places: 3 }) + 
 
        "%</span>"; 
 
      }; 
 

 
      compare2 = function (value, key, data) { 
 
      var diff = data.POP2007 - data.POP2000; 
 
      var result = diff > 0 ? "images/up.png" : "images/down.png"; 
 
      var pctChange = (diff * 100)/data.POP2000; 
 

 
      return "<img src='" + result + "'/>" + 
 
        "&nbsp;&nbsp;<span style='color: " + 
 
        (pctChange < 0 ? "red" : "green") + ";'>" 
 
        + number.format(pctChange, { places: 3 }) + 
 
        "%</span>"; 
 
      }; 
 

 
      function changeInfoTemplate() { 
 
      console.log("changed"); 
 
      map.infoWindow.hide(); 
 

 
      var t1Checked = dom.byId("chkT1").checked; 
 
      var t2Checked = dom.byId("chkT2").checked; 
 
      var templateContent = ""; 
 

 
      if (t1Checked) { 
 
       templateContent = "<b>2007: </b>${POP2007:compare}<br/>" + 
 
           "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" + 
 
           "<b>2000: </b>${POP2000:NumberFormat}<br/>" + 
 
           "<b>2000 density: </b>${POP00_SQMI:NumberFormat}"; 
 
      } 
 
      else if (t2Checked) { 
 
       templateContent = "<b>2007: </b>${POP2007}<br/>" + 
 
           "<b>2007 density: </b>${POP07_SQMI}<br/><br/>" + 
 
           "<b>2000: </b>${POP2000:NumberFormat}<br/>" + 
 
           "<b>2000 density: </b>${POP00_SQMI:NumberFormat}<br/><br/>" + 
 
           "Diff: ${DIFF:compare2}"; 
 
      } 
 

 
      counties.infoTemplate.setContent(templateContent); 
 
      } 
 
     });
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/soria/soria.css"> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css"> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css"> 
 
    <script src="https://js.arcgis.com/3.18/"></script> 
 
<body class="soria"> 
 
    <div data-dojo-type="dijit/layout/BorderContainer" 
 
     data-dojo-props="design:'headline', gutters:true" 
 
     style="width: 100%; height: 100%; margin: 0;"> 
 

 
     <div data-dojo-type="dojox/layout/ExpandoPane" 
 
      data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'" 
 
      style="width:220px;"> 
 
     <p> 
 
      Click a county to view the population change between 2000 and 2007.<br/> <br/> 
 
      <b>Change the info template:</b> Template 1 displays the percentage growth (or decline) in population. The values are color-coded green for population increase and red for decline in population. Template 2 creates a new calculated field called diff that displays the population difference. <br/> 
 
      <input id="chkT1" name="template" type="radio"/> 
 
      <label for="chkT1">Template 1</label> 
 
      <br /> 
 
      <input id="chkT2" name="template" type="radio"/> 
 
      <label for="chkT2">Template 2</label> 
 
     </p> 
 
     </div> 
 
     <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> 
 
    </div> 
 
    </body>

随意拍你的进一步查询..

运行示例它 - https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=widget_formatInfoWindow

希望这将帮助你:)

+0

亲爱的开发者... 这里的问题是变量冲突... –