在我的项目中,我尝试将过滤器与表和 map 上显示的 geojson 同步。为了实现这一目标,我使用了 Angular 和以前的 Angular-Leaflet-Directive,但性能对于我的目的来说很慢,所以我决定为 Leaflet.js 制定自己的指令。
就我而言,我可以将数据从 Controller 传递到我的指令,但它使 map 静态,当我尝试在过滤后传递数据以使我的 map 动态时, map 没有显示任何标记,并且我从传单中收到错误, 无效的 Geojson 对象。
这里是 Fiddler 我的例子: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 相同,所以假设这里的问题是过滤?我将非常感谢有人告诉我我在哪里犯了错误
最佳答案
首先,您显示的不是 GeoJSON 对象。 Leaflet 的 L.GeoJSON
仅接受一组功能,并不使其成为有效的 GeoJSON 对象,因此您不应将其称为 GeoJSON 对象。它是 GeoJSON 要素对象的数组。在有效的 GeoJSON 要素集合对象中,要素数组的包含方式如下:
{
"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
因此,您需要将逻辑设置得有点不同,假设您要搜索两个属性,id
和 name
在您的范围内,您将拥有:
$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" />
现在,每次您使用其中一个输入时,搜索属性上的监视都会被触发,从而过滤源并更新数据。为了在您的指令中也反射(reflect)这一变化,您还必须在指令的 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
关于angularjs - 无效的 Geojson 对象 Angularjs &Leafletjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28480206/