Ammap 线模拟来自外部 JSON 文件

debugcn 发表于 Dev

菲沃斯

我正在尝试使用 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
    }

  ]
}

它警告错误。

xorspark

除了引用您的属性之外，您还不能将变量传递到您的 JSON 中。您需要展开pcSVG变量所代表的 SVG 字符串的实例。使用跨行动画演示中的目标 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
        }]
}

演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。