使用Json文件在Geotemco上显示数据

时间:2014-02-04 16:50:45

标签: javascript html json geolocation

我有一个简单的json文件“example.json”,其条目采用以下格式:

{ 
    "id": 122,
    "name" : Wearable,
    "description": someDescription,
    "lon" : 11.581981, 
    "lat" : 48.135125,
    "place" : Munich,
    "time" : 2013-11-20,
    "tableContent": someValuesList
}

我想在名为Geotemco(http://www.informatik.uni-leipzig.de:8080/geotemco/

的可视化程序中显示此信息

我能够显示地图,但无法显示此json文件中的信息。 loader.html文件如下所示:

    <!DOCTYPE html>
    <html>

      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>GeoTemCo</title>
        <link rel="stylesheet" href="css/geotemco.css" type="text/css"/>
        <script src="geotemco-min.js"></script>
        <script src="js/Util/Publisher.js"></script>
        <script src="js/Build/Loader/DynaJsLoader.js"></script>
        <script src="js/Build/Loader/Loader.js"></script>
      </head>

      <body>

        <div id="mapContainerDiv" style="position:relative;"></div>
        <div id="plotContainerDiv" style="position:relative;"></div>
        <div id="tableContainerDiv" style="position:relative;"></div>

        <script>
            var datasets = [];
            var mapDiv = document.getElementById("mapContainerDiv");
            var map = new WidgetWrapper();
            var mapWidget = new MapWidget(map,mapDiv);
            var timeDiv = document.getElementById("plotContainerDiv");
            var time = new WidgetWrapper();
            var timeWidget = new TimeWidget(time,timeDiv);
            var tableDiv = document.getElementById("tableContainerDiv");
            var table = new WidgetWrapper();
            var tableWidget = new TableWidget(table,tableDiv);
        //  var jsonFile = GeoTemConfid.getJson('data/example.json');
        //  var jsonData = GeoTemConfig.loadJson(jsonFile);
        //  var dataset = new Dataset([{"name" : "Wearable","lon" : "11.0","lat" : "48.0","place" : "USA/New York/New York City/Liberty Island","time" : "2013","tableContent": "someValuesList"}],'Events');
        //  datasets.push(dataset);

datasets.push(new Dataset(GeoTemConfig.loadJson(GeoTemConfig.getJson('/data/example.json')),'Events'));

            map.display(datasets);
            time.display(datasets);
            table.display(datasets);

        </script>

      </body>

    </html>

我尝试了所有方法但无法在地图上的任何位置显示事件。它总是只加载地图: Geotemco Map

请帮我解决这个问题。 非常感谢提前

1 个答案:

答案 0 :(得分:1)

您的json文件内容错误。它应该是这样的:

[
    { 
        "id": 122,
        "name": 'Wearable',
        "description": 'someDescription',
        "lon" : 11.582, 
        "lat" : 48.135,
        "place" : 'Munich',
        "time" : '2013-11-20',
        "tableContent":  {'a': '111', 'b': '222'}
    }
]

请参阅GeoTemco网站的tutorialtops.json