9

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 機能を適切に挿入する方法です。

4

2 に答える 2

7

ディレクティブ要素内でマップを構築しようとしているようです。これは正当な使用方法ですが、Dojo の AMD ローダーを使用してモジュールをロードし、Dojo のすべての優れた機能の準備が整ったら、Angular アプリをブートストラップするようにしてください。

最近、Angular/Esri dev に関する記事をまとめました。サンプル プロジェクトのソース コードは、こちら にあります。

私が実際に行っているのは、コントローラーからマップを作成することですが、プロセスはディレクティブでマップを作成する場合と似ているはずです。

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

それが少し役立つことを願っています。

于 2013-07-24T14:11:49.360 に答える