从API到矢量图层openlayers JSON

时间:2017-04-06 07:41:11

标签: json maps openlayers

如果要将系统中的json文件导入矢量图层,可以像以下一样简单:

    var restaurantsold = new ol.layer.Vector({
    title: 'b_layer',
    source: new ol.source.Vector({
        url: 'restaurantjson.geojson',

        format: new ol.format.GeoJSON()
    }),
});

我可以直接将该图层添加到地图中。但是,如果我尝试调用API,我无法在地图中显示它,我最好的尝试就是这样:

var restaurants;
    $.ajax({
        type: "GET",
        url: "http://tour-pedia.org/api/getPlaces?category=restaurant&location=Berlin&name=La+Dolce+Vita",
        dataType:"json",
        success:function(data){
            console.log(data)
            restaurants = data;
            $(restaurants).each(function(index, value) {

                console.log(value.address);
            });
            }
    });
    var resta2 = new ol.layer.Vector({
        title : "Resta2",
        source: new ol.source.Vector(restaurants)
    });

我无法在任何地方找到合适的解决方案,谢谢你的帮助!

编辑: 最后问题是它获得了一个JSON文件,而openlayers想要一个GeoJSON文件..我解决它的方法是将它转换为GeoJSON: https://gis.stackexchange.com/questions/73756/is-it-possible-to-convert-regular-json-to-geojson

1 个答案:

答案 0 :(得分:3)

在您创建向量图层时,可能无法使用Restaurant数据,因为您正在进行Ajax调用。

因此,使用ol.Feature ol.format.GeoJSON方法将GeoJSON转换为readFeatures()个对象的集合。然后使用addFeatures()方法添加它的矢量源。

修复:

var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON()
    })

 var restaurantsold = new ol.layer.Vector({
    title: 'b_layer',
    source : vectorSource
});

 $.ajax({
        type: "GET",
        url: "http://tour-pedia.org/api/getPlaces?category=restaurant&location=Berlin&name=La+Dolce+Vita",
        dataType:"json",
        success:function(data){
            // If response is valid
            var geojsonFormat = new ol.format.GeoJSON();

            // reads and converts GeoJSon to Feature Object
            var features = geojsonFormat.readFeatures(data);
            vectorSource.addFeatures(features);
        }
    });