Dojo $ {}とSpring $ {}の参照が競合します

Question

私は、ArcGisフィーチャレイヤとinfoTemplateを統合しています。しかし同じページには、SpringからのJSTL変数もあります。このdojo変数のため、$ {}は解決されません。

これを修正する方法を教えてもらえますか？

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春の道場によって解決する必要があります....

Answer 1

さて、以下は

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

あなたはそれのためのjsフィドルやサンプルを作成...またはフィーチャレイヤの作成のようないくつかの詳細を追加することができ、これはあなたを助ける:)