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 

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

- Sergei Basharov

Answer 1

我认为一个非常“AngularJS”风格的方法是以下内容。 (这里有演示 http://jsfiddle.net/technicolorenvy/2Ke62/4/)

我喜欢使用angular-ui-router，但这种方法也适用于Angular的$routeProvider。 这里的奥妙在于resolve对象，它会在继续之前可选地“等待”直到承诺被解决。

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中，您可以直接调用所有ArcGIS/Dojo函数（就像平常一样），使用在应用程序配置期间构建的deps对象中使用的键名，在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/找到。

- technicolorenvy

---

我喜欢你的解决方案，但我有一个小问题。 我正在使用angular translate，它需要一瞬间从“//js.arcgis.com/3.14”加载init.js，导致angular translate显示为{{'something'|translate}}而不是呈现的文本，直到init.js加载以便加载'require'。 你知道有没有办法在wish服务中删除require依赖项？ - laitha0

我会通过预加载程序或“数据已加载”标志在您的UI中处理此问题。这里有一个相当不错的问题解释和可能的解决方案：http://www.code-hound.com/add-a-preloader-to-your-website-using-angularjs/ - technicolorenvy

谢谢，我会试一下。 - laitha0

Answer 2

看起来您正在尝试在指令元素内构建地图。这是一个合法的用途，但我建议您确保利用Dojo的AMD加载器加载模块，然后在所有Dojo好处准备就绪后引导您的Angular应用。

我最近撰写了一篇关于Angular / Esri开发的文章，并且样品项目的源代码可以在这里找到。

实际上，我的做法是从控制器中构建地图，但是从指令中构建地图的过程应该类似。

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

我使用一个Bootstrap模块，在引导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 };
});

希望这能有所帮助。

- odoenet