未添加到地图的点
points not added to map
我想使用 ArcGIS JavaScript API 将地理信息从 JSON 文件加载到地图。现在,只显示地图本身。我无法确定为什么 JSON 文件中的那些点没有加载到地图中。
我一直主要使用构建 ArcGIS JavaScript API 的 Dojo。
ArcGIS 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>
只需添加 map.on('load', addPointGraphics);
以便在地图准备就绪时添加您的图形
我想使用 ArcGIS JavaScript API 将地理信息从 JSON 文件加载到地图。现在,只显示地图本身。我无法确定为什么 JSON 文件中的那些点没有加载到地图中。 我一直主要使用构建 ArcGIS JavaScript API 的 Dojo。 ArcGIS 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>
只需添加 map.on('load', addPointGraphics);
以便在地图准备就绪时添加您的图形