Question

在这里需要一些指导，我有两个可操作的esri js地图，我想要结合使用两个不同的弹出窗口。如果我/我们能够以某种方式找到一种方法来增加人口普查弹出窗口的数量，而不用担心这两个弹出窗口。但我更喜欢在人口统计数据弹出窗口中的人口普查区块组中获得有关人口普查组以及公园以及公园数量的信息。因此，我将添加我已经完成的工作来创建两个工作地图，然后发布我尝试将它们组合起来的工作。非常感谢任何帮助。

第一个例子是位于华盛顿州皮尔斯县的公园，其中有一个带有公园详情的弹出窗口。

http://students.washington.edu/sbuffor/infowindow_w_parkname.html

其次是人口普查区块组的代码，其中包含同一区域的人口统计信息。

http://students.washington.edu/sbuffor/census_vs_parks.html

最后但同样重要的是我尝试将这两件作品结合起来。这包括从两者中添加所有不同的require语句和函数，并且每个代码的大部分代码都删除了重复的部分。我试过移动东西来映射地图渲染没有运气。我想保留用于在此查找地址的locatebutton和搜索栏以及添加的功能。

http://students.washington.edu/sbuffor/combined_census_parks.html

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">


  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <meta name="mobile-web-app-capable" content="yes">
  <title>Pierce County Census Information and Parks Map</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html, body, #map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .esriScalebar {
      padding: 20px 20px;
    }

    .esriPopup.myTheme .titlePane,
    .dj_ie7 .esriPopup.myTheme .titlePane .title {
      background-color: #899752;
      color: #333333;
      font-weight: bold;
    }

    .esriPopup.myTheme .titlePane {
      border-bottom: 1px solid #121310;
    }

    .esriPopup.myTheme a {
      color: #d6e68a;
    }
    .esriPopup.myTheme .pointer.top{
      background-color:#899752;
    }
    .esriPopup.myTheme .outerPointer,  .esriPopup.myTheme .pointer.bottom{
      background-color:#424242;
    }

    .esriPopup.myTheme .contentPane,
    .esriPopup.myTheme .actionsPane {
      border-color: 1px solid #121310;
      background-color: #424242;
      color: #ffffff;
    }

    #ui-esri-dijit-geocoder {
      top:      20px;
      left:     70px;
      position: absolute;
      z-index:  3;
    }

    .esriPopup .titlePane {
      text-shadow: none;
    }

    .esriPopup .titleButton.next {
      right: 40px;
    }

    .esriPopup .titleButton.prev {
      right: 53px;
    }

    .demographicInfoContent {
      padding-top: 10px;
    }

    .demographicInnerSpacing {
      display: inline-block;
      width:   8px;
    }

    .demographicNumericPadding {
      width:      90px;
      display:    inline-block;
      text-align: right;
    }

    #LocateButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;

    require([
      "esri/config",
      "esri/InfoTemplate",
      "esri/map",
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/geometry/Extent",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/GeometryService",
      "esri/tasks/query",
      "dojo/dom-construct",
      "dojo/dom-class",
      "dojo/parser",
      "esri/Color",
      "dojo/_base/lang",
      "dojo/date/locale",
      "esri/dijit/Geocoder",
      "esri/dijit/LocateButton",

      "dojo/domReady!"
    ],
      function (
        esriConfig, InfoTemplate, Map, Popup, PopupTemplate, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer, 
        ArcGISTiledMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
        GeometryService, Query, domConstruct, domClass, parser, Color, lang, locale, Geocoder, LocateButton 
      ) {

        parser.parse();

      var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
      var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

      var popup1 = new Popup1({
        fillSymbol: sfs,
        lineSymbol: null,
        markerSymbol: null
      }, domConstruct.create("div"));




        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
        }, domConstruct.create("div"));

        domClass.add(popup.domNode, "myTheme");

        map = new Map("map", {
          basemap: "topo",
          center: [-122.402, 47],
          zoom: 10,
          infoWindow: popup

        });

        var geocoder = new Geocoder({
        arcgisGeocoder: {
          placeholder: "Search "
        },
        map: map
      }, "ui-esri-dijit-geocoder");

      var _countyCensusInfoTemplate = new InfoTemplate();
      _countyCensusInfoTemplate.setTitle("<b>Census Information</b>");

      var _blockGroupInfoTemplate = new InfoTemplate();
      _blockGroupInfoTemplate.setTitle("<b>Census Information</b>");

      var _censusInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
        "<div class='demographicNumericPadding'>${AGE_18_21:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 18 - 21<br>" +
        "<div class='demographicNumericPadding'>${AGE_22_29:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 22 - 29<br>" +
        "<div class='demographicNumericPadding'>${AGE_30_39:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 30 - 39<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_50_64:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 50 - 64<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";

      _countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
      _blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);



      var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
      var demographicsLayerOptions = {
        "id": "demographicsLayer",
        "opacity": 0.8,
        "showAttribution": false
      };
      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      geocoder.startup();

      var geoLocate = new LocateButton({
      map: map,
      highlightLocation: false
      }, "LocateButton"
      );
      geoLocate.startup();

    });

    var formatNumber = function(value, key, data) {
      var searchText = "" + value;
      var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
      return formattedString;
    };

    var getCounty = function(value, key, data) {
      if (value.toUpperCase() !== "LOUISIANA") {
        return "County";
      } else {
        return "Parish";
      }
    };


        map.on("click", function (event) {
          var query = new Query();
          query.geometry = pointToExtent(map, event.mapPoint, 10);
          var deferred = featureLayer.selectFeatures(query,
            FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        });




      var template = new InfoTemplate();
        template.setContent(getTextContent);

        var featureLayer = new FeatureLayer("https://services3.arcgis.com/J1Locv0GPOt6yBRR/ArcGIS/rest/services/Parks_polygons_Feb2012/FeatureServer/0",
          {

            outFields: ["*"],
            infoTemplate: template
          });

        map.addLayer(featureLayer);

        function getTextContent (graphic) {
          var attributes = graphic.attributes;
          var namepark =
            attributes.ParkName
            .replace('"', "")
            .split("::")
            .map(function (name) {
              return lang.trim(name);
            });
          var parkdata = namepark[0];
          var commonName = namepark[1];
          var parks;

          if (commonName) {
            parks = "<b>" + commonName + "</b><br/>" +
                          "<i>" + parkdata + "</i>";
          }
          else {
            parks = "<i>" + parkdata + "</i>";
          }

          return  parks + "<br>" +
                  attributes.Owner + "<br>" + 
                  attributes.ParkWebLin 
        }



        function pointToExtent (map, point, toleranceInPixel) {
          var pixelWidth = map.extent.getWidth() / map.width;
          var toleranceInMapCoords = toleranceInPixel * pixelWidth;
          return new Extent(point.x - toleranceInMapCoords,
                            point.y - toleranceInMapCoords,
                            point.x + toleranceInMapCoords,
                            point.y + toleranceInMapCoords,
                            map.spatialReference);
        }    

      });
  </script>
</head>

<body class="claro">
  <div id="map">
  <div id="LocateButton"></div>
</div>
<div id="ui-esri-dijit-geocoder"></div>

</body>

</html>

如果您需要更多信息，请随时告诉我们。我还是新手，从这里提供的帮助中学到了很多东西，所以我很高兴能够用这个例子做到这一点。

Answer 1

（这可能应该在评论中，但我没有在这个网站上的代表）

1 - 这个问题可能应该在gis.stackexchange.com上

2 - 在您创建新的LocateButton（第215行）之后，您有一个错误的＆＃34;}）;＆＃34;这会阻止你的代码运行（你使用控制台进行调试，对吧？你使用sublimeText和htmlPrettify，还是类似？

3 - 定义第二个弹出窗口时（＃34; var popup1＆＃34;），该类仍然是Popup，而不是Popup1（第141行 - 你也将这个弹出窗口添加到通用开发 - 你会如何引用它？首先使用dojo附加点创建div？）

这应该让你去。您应该考虑删除并转移到gis.stackexchange。

Esri Javascript API人口普查信息弹出窗口和公园弹出一张地图

1 个答案: