如何在Angular-Js中使用ArcGIS Maps？

Question

如何在Angular-Js中輕鬆使用ArcGIS Maps，

• 變焦
• 定位
• 添加標記
• 搜索我的地方通過地球懶洋洋地等的協調和地名
• 裝載標記？

有人可以請給我一個樣品。

Answer 1

我遇到了一種非常簡單的方式來添加所有提到的功能，並能夠以這種方式控制它們。

angular.module('eBlood').directive('esriPointRenderersMap', ['$q', 'appConfig', 'esriLoader', 'esriRegistry', function($q, appConfig, esriLoader, esriRegistry) { 
    return { 
     // element only directive 
     restict: 'E', 

     // isolate the scope 
     scope: { 
      // 1-way string binding 
      rendererActive: '@', 
      // 2-way object binding 
      basemapActive: '=', 
      clusterTolerance: '=', 
      heatmapRendererParams: '=' 
     }, 

     compile: function($element, $attrs) { 
      // remove the id attribute from the main element 
      $element.removeAttr('id'); 
      // append a new div inside this element, this is where we will create our map 
      $element.append('<div id=' + $attrs.id + '></div>'); 
      // since we are using compile we need to return our linker function 
      // the 'link' function handles how our directive responds to changes in $scope 
      // jshint unused: false 
      return function(scope, element, attrs, controller) {}; 
     }, 

     controller: function($scope, $element, $attrs) { 
      var mapDeferred = $q.defer(); 
      var esriApp = {}; 

      // add this map to the registry 
      if ($attrs.registerAs) { 
       var deregister = esriRegistry._register($attrs.registerAs, mapDeferred.promise); 
       // remove this from the registry when the scope is destroyed 
       $scope.$on('$destroy', deregister); 
      } 

      esriApp.createGeoCordFinder = coords => { 
       return esriLoader.require([ 
        'esri/geometry/Point', 
        'esri/tasks/Locator' 
       ]).then(x => { 
        var Point = x[0]; 
        if (!esriApp.mapLocator) { 
         var Locator = x[1]; 
         esriApp.mapLocator = new Locator('https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer'); 
        } 
        return esriApp.mapLocator.locationToAddress(new Point(coords)).then(res => { 
         return res.address.Match_addr; 
        }); 
       }); 
      }; 


      esriApp.zoomToLocation = mapOptions => { 
       if (mapOptions.view) { 
        mapOptions.zoom = mapOptions.zoom || appConfig.pointRenderers.mapOptions.zoom; 
        mapOptions.view.goTo({ 
         target: [mapOptions.coordinates.longitude, mapOptions.coordinates.latitude], 
         zoom: mapOptions.zoom 
        }); 

        // change the marker to the current Geo. 
        var promise = (!mapOptions.address) ? esriApp.createGeoCordFinder(mapOptions.coordinates) : $q.when(mapOptions.address); 

        promise.then(location => { 
         esriApp.changeLocationMarker({ 
          view: mapOptions.view, 
          attributes: { 
           address: location 
          }, 
          geometry: { 
           longitude: mapOptions.coordinates.longitude, 
           latitude: mapOptions.coordinates.latitude 
          } 
         }); 
        }); 

       } 
      }; 


      esriApp.createLocateIcon = mapOptions => { 
       var container; 

       if (!mapOptions || !mapOptions.view) 
        return $q.reject('Our MapView is setYet'); 

       container = mapOptions.container |"map"; 

       mapOptions.container = undefined; 
       mapOptions.goToLocationEnabled = appConfig.goToLocationEnabled; 
       mapOptions.graphic = null; 

       return esriLoader.require([ 
        'esri/widgets/Locate' 
       ]).then(x => { 

        var Locate = x[0]; 
        esriApp.locateWidget = new Locate(mapOptions, container); 
        esriApp.locateWidget.startup(); 

        if (!container) 
         mapOptions.view.ui.add(esriApp.locateWidget, 'top-left'); 

        esriApp.locateWidget.on('locate', data => { 
         esriApp.zoomToLocation({ 
          view: mapOptions.view, 
          coordinates: data.position.coords 
         }); 
        }); 

        return esriApp.locateWidget; 
       }); 

      }; 

      function setSearchWidget(opts) { 
       var srcNodeRef; 

       if (!opts || !opts.view) { 
        return $q.reject('MapView is undefined'); 
       } 



       srcNodeRef = opts.container; 

       opts.container = undefined; 
       opts.showPopupOnSelect = false; 
       opts.autoSelect = false; 

       return esriLoader.require([ 
        'esri/widgets/Search' 
       ]).then(x => { 
        var Search = x[0]; 

        var searchWidget = new Search(opts, srcNodeRef); 
        searchWidget.startup(); 

        if (!srcNodeRef) { 
         opts.view.ui.add(searchWidget, 'top-right'); 
        } 

        searchWidget.on('search-complete', e => { 
         if (e.results.length > 0 && e.results[0].results.length > 0) { 
          var res = e.results[0].results[0]; 
          var coords = { 
           longitude: res.feature.geometry.longitude, 
           latitude: res.feature.geometry.latitude 
          }; 

          esriApp.zoomToLocation({ 
           view: opts.view, 
           coordinates: coords, 
           address: res.name 
          }); 
         } 
        }); 

        return searchWidget; 

       }); 
      } 


      var mapoption = { 
       map: esriApp.map, 
       container: 'map', 
       zoom: 3, 
       padding: { 
        top: 65 
       }, 
       view: esriApp.mapView 
      }; 



      esriApp.buildmap = (mapViewDiv) => { 
       return esriApp.creatMap({ 
        basemap: $scope.basemapActive 
       }) 
        .then(map => { 
         mapoption.map = map; 
         mapoption.container = mapViewDiv; 
         return esriApp.createMapView(mapoption); 
        }); 
      }; 

      esriApp.creatMap = properties => { 
       return esriLoader.require(['esri/Map']) 
        .then(esriModules => { 
         var Map = esriModules[0]; 
         return new Map(properties); 
        }); 
      }; 

      esriApp.createMapView = config => { 
       return esriLoader.require(['esri/views/MapView']) 
        .then(x => { 
         var MapView = x[0]; 
         esriApp.mapView = new MapView(config); 
         mapDeferred.resolve({ 
          view: esriApp.mapView 
         }); 
         return mapDeferred.promise; 
        }); 
      }; 

      esriApp.map = esriApp.buildmap($attrs.id); 


      mapoption.view = esriApp.mapView; 
      esriApp.createLocateIcon(mapoption); 
      setSearchWidget(mapoption); 


      mapDeferred.promise.then(function(esriApp) { 

       // clean up 
       $scope.$on('$destroy', function() { 
        esriApp.map.destroy(); 
       }); 
      }); 
      // }); 




     } 
    }; 
}]); 

簡單的指令將會非常用滿。現在更多的是，它使用地圖功能更新'appConfig'全局配置對象。這對我來說非常好。

謝謝你們的貢獻。

Answer 2

那麼，下面是一個使用角js和更多細節和相關採樣/概念read getting-started從下面提到鏈路加載的ArcGIS/ESRI地圖樣品：

<!DOCTYPE html> 
<html ng-app="esri-map-example"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 

     <title>Angular Esri Quick Start</title> 

     <link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css"> 
     <style type="text/css"> 
      html, body, .esri-view { 
       padding: 0; 
       margin: 0; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body ng-controller="MapController as vm"> 
     <esri-scene-view map="vm.map" view-options="{scale: 50000000, center: [-101.17, 21.78]}"> 
     </esri-scene-view> 

     <!-- load Esri JSAPI --> 
     <script src="//js.arcgis.com/4.0/"></script> 
     <!-- load AngularJS --> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
     <!-- load angular-esri-map --> 
     <script src="//unpkg.com/angular-esri-map@2"></script> 

     <script type="text/javascript"> 
      angular.module('esri-map-example', ['esri.map']) 
       .controller('MapController', function(esriLoader) { 
        var self = this; 
        esriLoader.require(['esri/Map'], function(Map) { 
         self.map = new Map({ 
          basemap: 'streets' 
         }); 
        }); 
       }); 
     </script> 
    </body> 
</html> 

更多詳情please click here...

希望這會幫助你理解和開始你的實施:)

Answer 3

本網站有很多例子和示例代碼： http://esri.github.io/angular-esri-map/#/home