0

我正在尝试从 angular-leaflet-directive复制此示例，但使用在MEAN.JS中实现的 Angular MVC 框架。angular-leaflet-directive 接受并显示我在控制器中指定的正确tiles,center和，但无法渲染任何, 即使我将 geojson 直接粘贴到控制器中而不是使用.maxBoundsgeojson$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 情节变厚：我刚刚用我的工作示例中的一个原始 MEAN.js 实例中的一个覆盖了我的问题项目中的整个 /public/modules/maps 目录，它适用于我的原始项目，但不是我的问题项目。

4

1 回答 1

0

当您没有在您的$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

于 2015-12-11T19:31:56.267 回答