0

angular-leaflet-directive からこの例を複製しようとしていますが、 MEAN.JSに実装されている Angular MVC フレームワークを使用しています。angular-leaflet-directive は、コントローラーで指定した正しいtiles、center、およびを受け入れて表示しますが、 で呼び出す代わりに geojson をコントローラーに直接貼り付けても、maxBoundsレンダリングに失敗します。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>

UPDATE どういうわけか、MEAN.jsの元のインスタンスを使用すると、問題を再現できません。それは、問題が別のところにあることを意味していると思います。その場合は、この質問を削除します。

更新 2 プロットが厚くなります: 問題のプロジェクトの /public/modules/maps ディレクトリ全体を、元の MEAN.js インスタンスの作業例のディレクトリで上書きしましたが、問題のプロジェクトでは機能しません。

4

1 に答える 1

0

$http実装に実際のコードを含めなかった場合、何が問題になるのかを推測するのは難しいです。私が見つけた 1 つのことは、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>'
        }
    }
});

プランカーの例: http://plnkr.co/edit/OoqwpNLaUhiXLm26mMtB?p=preview

于 2015-12-11T19:31:56.267 に答える