无效的 Geojson 对象 Angularjs &Leafletjs [英] Invalid Geojson Object Angularjs &Leafletjs

问题描述

在我的项目中，我尝试将过滤器与显示在表格和地图上的 geojson 同步.为了实现这一点，我使用了 angular 和以前的 angular-leaflet-directive，但是对于我的目的来说性能很慢，所以我决定为 Leaflet.js 制定我自己的指令.

In my project i try to synchronize filters with geojson displayed in table and on map. To achieve this i used angular and previously angular-leaflet-directive, but performance was to slow for my purposes so i decide to make my own directive for leaflet.js.

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

In my case i can pass data from controller to my directive, but it makes map static, when i try to pass data after filtering in order to make my map dynamic, map is not showing any markers and i get Error from leaflet, Invalid Geojson Object.

这里是 Fiddler 的例子:http://jsfiddle.net/ior88/5ea8yxwo/4/

Here Fiddler with my example: http://jsfiddle.net/ior88/5ea8yxwo/4/

 $scope.FilteredGeojson = function () {

    var result;

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

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

如果您查看那里的控制台，您会看到错误.

If you will look into console there you will see error.

我不明白，因为当我在 {{}} 中显示 geojson 或 geojson_watch 时，它看起来与数据中的 geojson 相同，所以假设这里的问题是过滤?我会非常感谢有人告诉我我哪里出错了

I don't get it because when i display geojson or geojson_watch in {{}} it looks the same as geojson in data, So assume the problem here is filtering? I will be really thankful to somebody who will tell me where i make errors

推荐答案

首先，您显示的不是 GeoJSON 对象.那个 Leaflet 的 L.GeoJSON 只接受一个特征数组，并没有使它成为一个有效的 GeoJSON 对象，所以你不应该把它称为 GeoJSON 对象.它是一组 GeoJSON 特征对象.在有效的 GeoJSON 特征集合对象中，特征数组包含如下:

First off, what you are showing is not a GeoJSON object. That Leaflet's L.GeoJSON accepts just an array of features, doesn't make it a valid GeoJSON object, so you shouldn't call it a GeoJSON object. It's an array of GeoJSON feature objects. In a valid GeoJSON featurecollection object the feature array is contained like this:

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

接下来，您试图以一种不起作用的方式过滤一些复杂的对象.下面是 $filter('filter') 的工作原理:

Next, you're trying to filter some complex objects in a way that doesn't work. Here is how $filter('filter') works:

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

Example on 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

Example on Plunker: http://plnkr.co/edit/rUtseKWCeyLiewDxnDDn?p=preview

为什么?因为数组中的对象没有名为 name 的属性.它们只有一个名为 properties 的属性，它包含一个对象并且确实有一个 name 属性.在找到 name 属性之前，您不能期望过滤器递归地搜索您的对象.它没有.只有当你明确告诉它这样做时它才会这样做:

Why? Because the objects in the array do not have a property called name. They only have a property called properties, that contains an object and that does have a name property. You can't expect the filter to recursivily go searching through your object untill it finds a name property. It doesn't. It only does when you explictly tell it to do so:

$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

Example on Plunker: http://plnkr.co/edit/LpOvr7Zxw5C5A3Tt5umQ?p=preview

所以你需要设置你的逻辑有点不同，假设你想搜索两个属性，id 和 name 在你的范围内，你会有:

So you'll need to setup your logic a bit different, say you want to search for two properties, id and name In your scope you would have:

$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 方法中监视数据对象.在那里，您可以使用新数据更新图层:

Now everytime you use one of the inputs, the watch on the search property gets fired, which filters the source and updates the data. To reflect that change in your directive also, you've also got to put a watch on the data object in the link method of your directive. In there you can update the layer with the new data:

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

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

Entire code in a working example on Plunker: http://plnkr.co/edit/CmfBdmt7BYKPmE22HLvl?p=preview

这篇关于无效的 Geojson 对象 Angularjs &Leafletjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！