Question

我想使用ArgGIS JavaScript API将JSON文件中的地理信息加载到地图中。现在，只显示地图本身。我无法确定为什么JSON文件中的这些点没有加载到地图中。我一直主要使用构建ArgGIS JavaScript API的Dojo。 ArgGIS JavaScript API版本为3.9。

这是JSON文件：

{
  "identifier": "id",
  "label": "street",
  "items": [
    {
      "id": "1",
      "street": "24 Willie Mays Plz",
      "city": "San Francisco",
      "name": "AT&T Park",
      "state": "CA",
      "url": "http://sanfrancisco.giants.mlb.com/sf/ballpark/giantsenterprises/index.html",
      "x": -122.401029,
      "y": 37.770945,
      "zip": "94107"
    },
    {
      "id": "13",
      "street": "1 Zoo Rd",
      "city": "San Francisco",
      "name": "San Francisco Zoo",
      "state": "CA",
      "url": "http://www.sfzoo.org/",
      "x": -122.49956197,
      "y": 37.7314876600001,
      "zip": "94132"
    }
  ]
}

这是HTML文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Info Template</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"/> 
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"/>
  <style>
    html, body, #mapDiv {
      padding: 0; 
      margin: 0;
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="http://js.arcgis.com/3.9/"></script>
  <script type="text/javascript">
    var map;
    require([
      "dojo/parser",
      "esri/geometry/Extent",
      "esri/Color",
      "esri/map",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/geometry/Point",
      "esri/SpatialReference",
      "esri/graphic",
      "esri/InfoTemplate",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/store/JsonRest",
      "dojo/domReady!"
    ], function (
      parser, 
      Extent,
      Color,
      Map,
      ArcGISTiledMapServiceLayer,
      Point,
      SpatialReference,
      Graphic,
      InfoTemplate,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      JsonRest
    ) {
      parser.parse();
      // set map attribute
      var extent = new Extent({
        "xmin": -122.53154754638672, "ymin" : 37.68379211425781,
        "xmax": -122.32555389404297, "ymax" : 37.82112121582031,
        "spatialReference": {"wkid": 4326}
      });
      //add map
      map = new Map ("mapDiv", {
        extent:extent
      });
      //add layer
      var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
      var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
      map.addLayer(agoLayer);
      //set info tag
      var infoTemplate = new InfoTemplate ("${name}", "${url}");
      //set symbol attribute 
      var symbol = new SimpleMarkerSymbol (SimpleMarkerSymbol.STYLE_CIRCLE, 15,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color ([0, 0, 255, 0.5]),8), new Color ([0, 0, 255]));

      function addPointGraphics() {
        var store = new JsonRest ({
          target: "Data/PointData.json"
        });
        store.query({id:"*"}).then(function (result,request) {
          var items = result.items;
          for (var i=0; i< items.length; i++) {
            var attr = {
              "name": items[i].name,
              "url":items[i].url
            };
            var loc = new Point(
              items[i].x,
              items[i].y,
              new SpatialReference({wkid:4326})
            );
            var graphic = new Graphic(loc, symbol, attr, infoTemplate);
            map.graphics.add(graphic);
          }
        });
      }
    });
  </script>
</head>
<body class="claro">
  <div id = "mapDiv"></div>
</body>
</html>

Answer 1

只需添加map.on('load', addPointGraphics);即可在地图准备好后添加图片

点未添加到地图中

1 个答案: