Question

我正在尝试从angular-leaflet-directive复制this示例，但使用MEAN.JS中实现的Angular MVC框架。 angular-leaflet-directive接受并显示我在控制器中指定的正确的tiles，center和maxBounds，但无法渲染任何geojson，即使我粘贴了geojson直接进入控制器而不是用$http.get调用它。

我会用更具体的例子进行更新，因为我将它们放在我身边。

这有效：

<!DOCTYPE html>
<html ng-app="demoapp">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../lib/angular/angular.js"></script>
        <script src="../lib/leaflet/dist/leaflet.js"></script>
        <script src="../lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
        <link rel="stylesheet" href="../lib/leaflet/dist/leaflet.css" />
    </head>
    <body ng-controller="GeoJSONController">
        <leaflet lf-center="wisconsin" geojson="geojson" defaults="defaults" tiles="tiles" width="100%" height="480px"></leaflet>
        <h1>Simple GeoJSON example</h1>
                <script>
            var app = angular.module("demoapp", ["leaflet-directive"]);
            app.controller("GeoJSONController", ['$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
                angular.extend($scope, {
                    wisconsin: {
                        lat: 44.63,
                        lng: -90.02,
                        zoom: 6
                    },
                    defaults: {
                        scrollWheelZoom: false
                    },
                    tiles: {
                        Name: 'Stamen Toner Lite',
                        url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}',
                        options: {
                            ext: 'png',
                            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                        }
                    },
                    geojson: {
                        'data': {
                            'type': 'FeatureCollection', 
                            'features': [{ 
                                'type': 'Feature', 
                                'geometry': {
                                    'type': 'Polygon', 
                                    'coordinates': [
                                        [
                                            [-94.00, 48.00], 
                                            [-94.00, 42.00], 
                                            [-85.00, 42.00], 
                                            [-85.00, 48.00], 
                                            [-94.00, 48.00]
                                        ]
                                    ]
                                }
                            }]
                        },
                        'style': {
                            'fillColor': '#ff0000',
                            'fillOpacity': 0.5,
                            'color': '#000000',
                            'opacity': 0.2
                        }
                    }
                });
            }]);
        </script>

    </body>
</html>

更新不知何故，当使用MEAN.js的原始实例时，我无法重新产生问题。我猜这意味着问题出在其他地方。如果是这样的话，我会删除这个问题。

更新2 情节变粗：我刚刚在我的问题项目中覆盖了我的整个/ public / modules / maps目录中的一个来自我的工作示例中的原始MEAN.js实例，它在我的pristine项目中工作，但不是我的问题项目。

Answer 1

当你没有在$http实现中包含实际代码时，有点难以猜测出现了什么问题。我发现的一件事是你在GeoJSON集合的定义中使用了单引号。如果您尝试将其加载为JSON，它将失败，因为JSON属性名称和值应该用双引号括起来。除此之外，您的代码与简单的$http调用完美配合：

$http.get('collection.geojson').then(function (response) {
    angular.extend($scope, {
        geojson: {
            data: response.data,
            style: {
                'fillColor': '#ff0000',
                'fillOpacity': 0.5,
                'color': '#000000',
                'opacity': 0.2
            }
        }
    });
});

angular.extend($scope, {
    wisconsin: {
        lat: 44.63,
        lng: -90.02,
        zoom: 6
    },
    defaults: {
        scrollWheelZoom: false
    },
    tiles: {
        Name: 'Stamen Toner Lite',
        url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}',
        options: {
            ext: 'png',
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }
    }
});

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

带有MEANjs的angular-leaflet-directive中的geojson

1 个答案: