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;
                }
            }
        });
    });

如上所示,我们有一个map拥有resolve道具的州.然后,您可以构建一个表示ArcGIS/Dojo依赖关系的对象,并将其传递给您wish.loadDependencies(参见下文).

使用q我们将返回一个通过dojo加载所有依赖项后得到解决的promiserequire

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在app config期间构建的对象中使用的键直接调用所有ArcGIS/Dojo fns(通常情况下),因为它们现在附加到返回的对象上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好处准备就绪后引导你的Angular应用程序.

我最近在Angular/Esri dev上编写了一篇文章,可以在这里找到示例项目的源代码.

我实际上做的是从Controller构建映射,但该过程应该类似于在指令中构建它.

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应用程序之前,我使用引导模块使用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 };
});

希望有点帮助.