带有MEANjs的角度传单指令中的geojson答案

【问题标题】：geojson in angular-leaflet-directive with MEANjs带有MEANjs的角度传单指令中的geojson
【发布时间】：2026-01-15 13:15:02
【问题描述】：

我正在尝试从 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 情节变厚了：我刚刚用我的工作示例中的一个原始 MEAN.js 实例覆盖了我的问题项目中的整个 /public/modules/maps 目录，它适用于我的原始项目，但不适用于我的问题项目。

【问题讨论】：

标签： javascript angularjs meanjs angular-leaflet-directive

【解决方案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

【讨论】：

我知道，正如我在问题中所说，我正在制作一个不包含我客户数据的无效示例。我只是想把它拿出来并开始引起注意。此外，我粘贴到我最初问题中的内容目前确实有效，单引号和所有内容。
我的意思是，如果你使用 $http 像这样加载它，它会抛出：SyntaxError: Unexpected token at Object.parse (native) at fromJson
哦，明白了。从 $http 或从硬编码到控制器中的数据中抓取不会对我产生任何错误。我只是没有得到出现的多边形。