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

Question

How do i use ArcGIS Maps in Angular-Js easily with manipulating the; 如何通过操作轻松在Angular-Js中使用ArcGIS Maps；

zoom 放大
locate 定位
adding markers 添加标记
search my places by Geo coordinates and Place name 通过地理坐标和地点名称搜索我的地点
loading markers lazily and the like? 懒惰地加载标记之类的？

Can some one Give me a sample please. 请给我一个样品。

Answer 1

Well, Below is the sample to load ArcGIS/ESRI map using angular-js and for more details and relevance sample/concept read getting-started from below mentioned link: 好吧，以下是使用angular-js加载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>

More more details please click here... 更多详情请点击这里...

Hoping this will help you to understand and start your implementation :) 希望这可以帮助您了解并开始实施：)

Answer 2

该网站有许多示例和示例代码： http : //esri.github.io/angular-esri-map/#/home

Answer 3

I came across a very simple way of adding all the mentioned features and be able to control them in this way. 我遇到了一种非常简单的方法，可以添加所有提到的功能，并能够以这种方式对其进行控制。

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




        }
    };
}]);

The simple directive will be very use full. 简单的指令将非常有用。 More so now that it updates the 'appConfig' global config object with the map features. 现在，它更具有地图功能来更新“ appConfig”全局配置对象。 This worked very well for me. 这对我来说非常有效。

Thanks Guys for you contributions. 谢谢你们的贡献。

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

问题描述

3 个解决方案

解决方案1
1 2016-09-07 10:41:52

解决方案2
1 2016-09-07 12:16:59

解决方案3
0 已采纳 2016-09-08 06:25:57

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

问题描述

3 个解决方案

解决方案1 1 2016-09-07 10:41:52

解决方案2 1 2016-09-07 12:16:59

解决方案3 0 已采纳 2016-09-08 06:25:57

解决方案1
1 2016-09-07 10:41:52

解决方案2
1 2016-09-07 12:16:59

解决方案3
0 已采纳 2016-09-08 06:25:57