来自外部 JSON 文件的 Ammap 线模拟答案

【问题标题】：Ammap lines Simulation from external JSON file来自外部 JSON 文件的 Ammap 线模拟
【发布时间】：2017-12-06 08:40:53
【问题描述】：

我正在尝试使用 dataLoader 将外部 JSON 数据插入我的 ammap，并使用这些数据为 ammap 地图中 postProcess 上的线条设置动画

 var map = AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "light",
    "dataLoader": {
        "url": "/directory_to_json_file/json_file.json",
        "postProcess": function(data) {
            var dataProvider = {
                "map": "worldLow"
            };
        }
    },
...
}

我想在加载worldLow地图后插入json文件，并从外部json文件中添加经纬度线和动画。

json_file

{
 map: "worldLow",
  getAreasFromMap: true,
  linkToObject: "london",
  images: [{
    id: "london",
    color: "#000000",
    type: "circle",
    title: "London",
    latitude: 51.5002,
    longitude: -0.1262,
    scale: 1.5,
    zoomLevel: 1.74,
    lines: [{
      latitudes: [51.5002, 37.483577],
      longitudes: [-0.1262, -89.824219]
    }]
  },
    {
      svgPath: pcSVG,
      title: "London",
      latitude: 51.5002,
      longitude: -0.1262
    },
    {
      svgPath: pcSVG,
      title: "Prague",
      latitude: 37.483577,
      longitude: -89.824219
    }

  ]
}

它会提示错误。

【问题讨论】：

这不是有效的 JSON。所有属性名称必须用双引号括起来，例如 { "map": "worldLow" }
我确实用双引号更改了属性，但仍然无法正常工作
您可以编辑您在问题中遇到的实际错误吗？
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。

标签： javascript php ajax amcharts

【解决方案1】：

除了引用您的属性外，您不能将变量传递到您的 JSON 中。您需要扩展变量所代表的 SVG 字符串 pcSVG 的实例。使用来自animation across lines demo的目标SVG：

{
        "map": "worldLow",
        "getAreasFromMap": true,
        "linkToObject": "london",
        "images": [{
                "id": "london",
                "color": "#000000",
                "type": "circle",
                "title": "London",
                "latitude": 51.5002,
                "longitude": -0.1262,
                "scale": 1.5,
                "zoomLevel": 1.74,
                "lines": [{
                        "latitudes": [51.5002, 37.483577],
                        "longitudes": [-0.1262, -89.824219]
                }]
        }, {
                "svgPath": "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z",
                "title": "London",
                "latitude": 51.5002,
                "longitude": -0.1262
        }, {
                "svgPath": "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z",
                "title": "Prague",
                "latitude": 37.483577,
                "longitude": -89.824219
        }]
}

Demo

另外请注意，如果您返回正确的地图 dataProvider 对象，则不需要 postProcess 回调。 postProcess 仅在您返回不兼容的内容并且需要将您的数据转换为地图库可以理解的内容时才需要，因此您的postProcess 调用是不必要的。

【讨论】：