无效的Geojson对象Angularjs& Leafletjs

时间:2015-02-12 14:36:17

标签: angularjs leaflet geojson angularjs-filter

在我的项目中,我尝试将过滤器与表格和地图上显示的geojson同步。为了达到这个目的,我使用了angular和之前的angular-leaflet-directive,但性能因为我的目的而减慢,所以我决定为leaflet.js制作自己的指令。

在我的情况下,我可以将数据从控制器传递到我的指令,但它使地图静态,当我尝试在过滤后传递数据,以使我的地图动态,地图没有显示任何标记,我从传单得到错误,无效的Geojson对象。

这里有小提琴手我的例子:http://jsfiddle.net/ior88/5ea8yxwo/4/

 $scope.FilteredGeojson = function () {

    var result;

    result = $filter('filter')($scope.data, $scope.search);

    $scope.geojson = result;
    return result;
};

如果您在那里查看控制台,您将看到错误。

我没有得到它,因为当我在{{}}中显示geojson或geojson_watch时,它看起来与数据中的geojson相同,所以假设这里的问题是过滤?我会非常感谢有人会告诉我我在哪里犯错误

2 个答案:

答案 0 :(得分:3)

首先,你所展示的不是GeoJSON对象。 Leaflet的L.GeoJSON仅接受一系列功能,并不能使其成为有效的GeoJSON对象,因此您不应将其称为GeoJSON对象。它是一组GeoJSON要素对象。在有效的GeoJSON featurecollection对象中,要素数组包含如下:

{
    "type": "FeatureCollection",
    "features": [
        // The features
    ]
}

接下来,您尝试以不起作用的方式过滤某些复杂对象。以下是$filter('filter')的工作原理:

var simpleArray = [{
  'name': 'Foo'
}, {
  'name': 'Bar'
}];

$filter('filter')(simpleArray, {'name': 'Foo'}); // Returns array with Foo object
$filter('filter')(simpleArray, {'name': 'Bar'}); // Returns array with Bar object
$filter('filter')(simpleArray, {'name': 'Foobar'}); // Returns empty array

关于Plunker的示例:http://plnkr.co/edit/I7OGfoJLwaCz0XibcTDB?p=preview

您尝试使用$filter('filter')

var complexArray = [{
  'properties': {
    'name': 'Foo'
  }
}, {
  'properties': { 
     'name': 'Bar'
  }
}];

$filter('filter')(complexArray, {'name': 'Foo'}); // Returns empty array
$filter('filter')(complexArray, {'name': 'Bar'}); // Returns empty array
$filter('filter')(complexArray, {'name': 'Foobar'}); //Returns empty array

关于Plunker的示例:http://plnkr.co/edit/rUtseKWCeyLiewDxnDDn?p=preview

为什么呢?因为数组中的对象没有名为name的属性。它们只有一个名为properties的属性,它包含一个对象,并且具有name属性。您不能期望过滤器以递归的方式搜索您的对象,直到找到名称属性。它没有。只有当你明确告诉它这样做时才会这样做:

$filter('filter')(complexArray, {'properties': {'name': 'Foo'}}); // Returns with Foo
$filter('filter')(complexArray, {'properties': {'name': 'Bar'}}); // Returns with Bar
$filter('filter')(complexArray, {'properties': {'name': 'Foobar'}}); // Returns empty

关于Plunker的示例:http://plnkr.co/edit/LpOvr7Zxw5C5A3Tt5umQ?p=preview

因此,您需要将逻辑设置略有不同,比如想要搜索两个属性,idname在您的范围内,您将拥有:

$scope.search = {
  'properties': {}
};

$scope.$watch('search', function (newVal, oldVal) {
  if (newVal !== oldVal) {
    $scope.data = $filter('filter')($scope.source, $scope.search);
  }
}, true);

在你的模板中:

<input ng-model="search.properties.id" placeholder="ID" />
<input ng-model="search.properties.name" placeholder="Name" />

现在,每次使用其中一个输入时,搜索属性上的监视都会被触发,从而过滤源并更新数据。为了反映您的指令中的更改,您还必须在指令的link方法中监视数据对象。在那里,您可以使用新数据更新图层:

scope.$watch('data', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        geojsonLayer.clearLayers();
        geojsonLayer.addData(scope.data);
    }
}, true);

Plunker上的工作示例中的完整代码:http://plnkr.co/edit/CmfBdmt7BYKPmE22HLvl?p=preview

答案 1 :(得分:0)

此错误来自Leaflet代码中的here,表示GeoJSON包含没有有效type属性的Geometry对象。您需要调查代码生成此类对象的原因。