AngularJS + ArcGIS

Question

我正在尝试在一个Angular应用程序中使用ArcGIS JavaScript API。据我所知，它使用Dojo。因此，我尝试从Angular指令初始化ArcGIS，如下所示：

  link: function (scope, element, attrs) {
    dojo.require('esri.map');
    var init = function () {
      console.log('dojo is ready');
      var map = new esri.Map("map-container", {
        center: [-111.3797, 56.7266 ],
        zoom: 16,
        basemap: "streets"
      });
      map.enableScrollWheelZoom()

    };
    dojo.addOnLoad(init);
  }

看起来这种方式不是100%正确的，因为当我试图通过滚动鼠标滚轮来缩放时，我得到了这个错误：

Uncaught TypeError: Cannot call method 'apply' of null 

我的问题是，如何正确地在Angular应用程序中注入ArcGIS功能？

Answer 1

我认为一种非常“AngularJS”风格的方法如下所示。(在这里拉小提琴http://jsfiddle.net/technicolorenvy/2Ke62/4/)

我喜欢使用angular-ui-router，但这种方法也适用于Angular的$routeProvider。这里的魔力在于resolve对象，它可以选择“等待”，直到promise被解析，然后再继续。

angular.module('webApp', ['ui.router'])
    // module (app) config
    .config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/map');

        $stateProvider.state('map', {
            url: '/map',
            template: '<div id="map"></div>',
            controller: 'MapCtrl',
            resolve: {
                promiseObj: function ($q, $rootScope, wish) {
                    var deferred = $q.defer(),
                        deps = {
                            Map: 'esri/map',
                            FeatureLayer: 'esri/layers/FeatureLayer',
                            InfoTemplate: 'esri/InfoTemplate',
                            SimpleFillSymbol: 'esri/symbols/SimpleFillSymbol',
                            SimpleRenderer: 'esri/renderers/SimpleRenderer',
                            SimpleMarkerSymbol: 'esri/symbols/SimpleMarkerSymbol',
                            ScaleDependentRenderer: 'esri/renderers/ScaleDependentRenderer',
                            Color: 'dojo/_base/Color'
                        };

                    wish.loadDependencies(deps, function () {
                        deferred.resolve();
                        if (!$rootScope.$$phase) {
                            $rootScope.$apply();
                        }
                    });

                    return deferred.promise;
                }
            }
        });
    });

正如您在上面看到的，我们有一个具有resolve属性的map状态。然后，您可以构建一个表示ArcGIS/Dojo依赖项的对象，并将其传递给您的wish.loadDependencies (见下文)。

使用q，我们将返回一个promise，一旦通过dojo的require加载了所有依赖项，该promise就会得到解决

angular.module('webApp')
     // service that deals w/ our dojo require
    .service('wish', function () {

        // it's not require... it's a wish?
        var wish = {};

        function _loadDependencies(deps, next) {
            var reqArr = _.values(deps),
                keysArr = _.keys(deps);

            // use the dojo require (required by arcgis + dojo) && save refs
            // to required obs
            require(reqArr, function () {
                var args = arguments;

                _.each(keysArr, function (name, idx) {
                    wish[name] = args[idx];
                });

                next();
            });
        }

        return {
            loadDependencies: function (deps, next) {
                _loadDependencies(deps, next);
            },

            get: function () {
                return wish;
            }
        };
    });

在此之后，在您的MapCtrl中，您可以通过在应用程序配置期间构造的deps对象中使用的键直接调用所有ArcGIS/Dojo in (就像通常一样)，因为它们现在被附加到wish.get()返回的对象。

以下是此处示例的修改版本(https://developers.arcgis.com/en/javascript/jssamples/renderer_proportional_scale_dependent.html)

angular.module('webApp')
    // our map controller
    .controller('MapCtrl', function ($rootScope, $scope, wish) {

        var w = wish.get(),
            greenFill = new w.Color([133, 197, 133, 0.75]),
            greenOutline = new w.Color([133, 197, 133, 0.25]),
            layer,
            markerSym,
            renderer1,
            renderer2,

            CROPS_URL = 'http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/USA_County_Crops_2007/FeatureServer/0';

        $scope.map = new w.Map('map', {
            center: [-98.579, 39.828],
            zoom: 4,
            basemap: 'gray'
        });

        layer = new w.FeatureLayer(CROPS_URL, {
            outFields: ['STATE', 'COUNTY', 'M086_07', 'AREA'],
            infoTemplate: new w.InfoTemplate('${COUNTY}, ${STATE}', '<div style="font: 18px Segoe UI">The percentage of the area of the county that represents farmland is <b>${M086_07}%</b>.</div>')
        });
        layer.setDefinitionExpression('AREA>0.01 and M086_07>0');


        markerSym = new w.SimpleMarkerSymbol();
        markerSym.setColor(greenFill);
        markerSym.setOutline(markerSym.outline.setColor(greenOutline));
        renderer1 = new w.SimpleRenderer(markerSym);
        renderer1.setProportionalSymbolInfo({
            field: 'M086_07',
            minSize: 1,
            maxSize: 10,
            minDataValue: 0,
            maxDataValue: 100
        });

        //for the second renderer increase the dot sizes and set a backgroundFillSymbol
        renderer2 = new w.SimpleRenderer(markerSym);
        renderer2.setProportionalSymbolInfo({
            field: 'M086_07',
            minSize: 5,
            maxSize: 15,
            minDataValue: 0,
            maxDataValue: 100
        });

        layer.setRenderer(new w.ScaleDependentRenderer({
            rendererInfos: [{
                'renderer': renderer1,
                    'minScale': 50000000,
                    'maxScale': 10000000
            }, {
                'renderer': renderer2,
                    'minScale': 0,
                    'maxScale': 5000000
            }]
        }));

        $scope.map.addLayer(layer);
    });

演示上述代码的工作小提琴，可以在这里找到http://jsfiddle.net/technicolorenvy/2Ke62/4/

Answer 2

看起来您正在尝试在一个指令元素中构建您的映射。这是一个合法的使用，但是我会确保你使用Dojo的AMD加载程序来加载你的模块，然后在所有Dojo的好处都准备好之后bootstrap你的Angular应用程序。

我最近在Angular/Esri dev上写了一篇文章，示例项目的源代码可以在here中找到。

我实际做的是从控制器构建映射，但过程应该类似于在指令中构建它。

define([
    'angular',
    'esri/map'
], function(angular, Map) {
    function mapConfigs() {
        return {
            basemap: 'streets',
            center: [-118.1704035141802,34.03597014510993],
            zoom: 15
        };
    }
    function mapGen(elem) {
        return new Map(elem, mapConfigs());
    }
    function AppController($scope) {
        $scope.map = mapGen('map');
    }
    function init(App) {
        App.controller('AppCtrl', ['$scope', AppController]);
        return AppController;
    }
    return { start: init };
});

在引导Angular应用程序之前，我使用一个bootstrap模块来使用Esri/Dojo构建我所有的Angular位。

define([
    'angular',
    'controllers/AppController',
    'widgets/search/SearchBootstrap'
], function(angular, AppController, SearchBootstrap) {
    function init() {
        var App = angular.module('app', ['ui.bootstrap']);
        AppController.start(App);
        SearchBootstrap.start(App);
        // need to bootstrap angular since we wait for dojo/DOM to load
        angular.bootstrap(document.body, ['app']);
        return App;
    }
    return { start: init };
});

希望这能有所帮助。