You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ArcGIS JS API 3.9加载JSON地理点数据失败问题排查求助

嘿,我来帮你排查下为什么JSON里的点数据加载不出来。结合你用的ArcGIS JS API 3.9和Dojo框架,我整理了几个最可能的原因和对应的解决办法:

1. JSON数据格式是否符合ArcGIS可识别的规范?

ArcGIS JS API不会自动识别任意结构的JSON,得是GeoJSON或者你手动转成API能处理的Graphic对象。如果你的JSON是自定义结构(比如自己存的经纬度数组),那用Dojo的dojo/request拿到数据后,必须手动遍历创建点图形:

举个实际代码例子,假设你的JSON结构是这样的:

{
"locations": [
{"lon": 116.397, "lat": 39.908, "name": "北京"},
{"lon": 121.473, "lat": 31.230, "name": "上海"}
]
}

那加载并渲染的代码应该是这样:

require([
  "esri/map", 
  "esri/layers/GraphicsLayer", 
  "esri/geometry/Point", 
  "esri/graphic", 
  "dojo/request", 
  "dojo/domReady!"
], function(Map, GraphicsLayer, Point, Graphic, request) {
  // 初始化地图
  var map = new Map("map", {
    basemap: "streets",
    center: [118, 35],
    zoom: 4
  });

  // 创建图形图层并添加到地图
  var graphicsLayer = new GraphicsLayer();
  map.addLayer(graphicsLayer);

  // 加载本地JSON文件
  request("./your-points.json", {
    handleAs: "json" // 告诉Dojo把响应解析成JSON
  }).then(function(data) {
    // 遍历每个点数据,创建Graphic并添加到图层
    data.locations.forEach(function(item) {
      // 创建点对象(注意坐标顺序:先经度后纬度)
      var point = new Point(item.lon, item.lat);
      // 创建图形对象
      var graphic = new Graphic(point);
      // 添加到图层
      graphicsLayer.add(graphic);
    });
  }, function(error) {
    // 打印加载错误,方便排查
    console.error("JSON加载失败:", error);
  });
});
2. 跨域问题阻止了JSON加载?

如果是直接双击HTML文件用file://协议打开,浏览器的同源策略会阻止Dojo加载本地JSON文件。解决办法有两个:

  • 把HTML和JSON放到本地服务器上运行,比如用Python的python -m http.server(Python3),或者用XAMPP这类工具,然后通过http://localhost访问你的页面。
  • 临时给浏览器加启动参数(比如Chrome加--allow-file-access-from-files),但这个只适合本地调试,生产环境绝对不能用。
3. 坐标系统不匹配导致点显示在“看不见的地方”?

ArcGIS JS API默认使用Web Mercator投影(WKID: 102100),如果你的JSON里的坐标是WGS84经纬度(WKID: 4326),需要手动转换坐标,否则点会跑到地图的角落外:

// 记得引入投影转换模块
require([
  // ...其他模块
  "esri/geometry/webMercatorUtils",
  "esri/SpatialReference"
], function(/* ...其他模块 */, webMercatorUtils, SpatialReference) {
  // 创建WGS84坐标系的点
  var wgsPoint = new Point(item.lon, item.lat, new SpatialReference({wkid: 4326}));
  // 转换成Web Mercator坐标
  var webMercatorPoint = webMercatorUtils.geographicToWebMercator(wgsPoint);
  var graphic = new Graphic(webMercatorPoint);
  graphicsLayer.add(graphic);
});
4. 模块依赖或文件路径写错了?

先检查这两处:

  • ArcGIS API的引入是否正确:
<script src="https://js.arcgis.com/3.9/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.9/esri/css/esri.css">
  • JSON文件路径是否正确:比如你写的./points.json,要确保这个文件和HTML在同一个文件夹里;如果在子目录,要写成./data/points.json
5. 查看浏览器控制台的错误日志!

按F12打开浏览器开发者工具,切换到Console标签,看看有没有报错:

  • 如果是404 Not Found:JSON文件路径错了,赶紧检查路径。
  • 如果是Access-Control-Allow-Origin相关错误:就是跨域问题,按上面的方法解决。
  • 如果是Cannot read property 'xxx' of undefined:可能是JSON结构和你代码里的遍历逻辑不匹配,比如你代码里取data.points,但JSON里是data.locations

内容的提问来源于stack exchange,提问作者Tudoctrine

火山引擎 最新活动