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

问题描述

在我的项目中，我尝试将过滤器与表和地图上显示的geojson进行同步.为了达到这个目的，我使用了angular和以前的angular-leaflet指令，但是出于我的目的，性能降低了，因此我决定为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.

这里有我的例子的提琴手: 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 Featurecollection对象中，要素数组包含如下:

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

柱塞示例: http://plnkr.co/edit/rUtseKWCeyLiewDxnDDn?p=preview

为什么?因为数组中的对象没有名为 name 的属性.它们仅具有一个称为 properties 的属性，该属性包含一个对象，并且确实具有 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屋！