从 API 到矢量图层 openlayers JSON

Posted 2023-02-23

【中文标题】从 API 到矢量图层 openlayers JSON

【英文标题】：From API to vector layer openlayers JSON

【发布时间】：2017-04-06 07:41:11

【问题描述】：

如果要将系统中的 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】：

创建矢量图层时，餐厅数据可能根本不可用，因为您正在进行 Ajax 调用。

因此，使用 ol.format.GeoJSON readFeatures() 方法将 GeoJSON 转换为 ol.Feature 对象的集合。然后使用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);
        
    );

【讨论】：

你是对的！我完全忘记在回调中进行尝试，buuut，您的解决方案也不起作用:(控制台没有显示任何错误，我可以做些什么来尝试跟踪错误吗？

检查 AJAX 调用返回的数据。数据应为 GeoJSON 格式，否则数据可能包含一些包含 GeoJSON 响应的对象。

我有一个控制台日志显示我的第一个代码中的结果，结构是 Array [ Object, Object, Object ]，每个对象都有名称、lat、lng、id 等属性...对我来说看起来很漂亮。

我已应用此解决方案下注层未显示在地图中！