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}必须由dojo而不是JSTL Spring解决....

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

希望这会对您有所帮助：）

Dojo $ {}和Spring $ {}引用冲突

1 个答案: