使用 ArcGIS JS 4 API 和 AngularJS 显示地图

Display map using ArcGIS JS 4 API with AngularJS

我是 ArcGIS JS 的新手,所以非常感谢任何帮助。

作为起点,我想使用 ArcGIS js API 4 和 AngularJS 显示任何地图。任何指示或示例都会很有帮助。

谢谢

好吧,下面是使用 ArcGIS JS API 4.0

添加地图 3d 地图的代码

有关 API 和示例的更多详细信息 Please click here...

 require([
      "esri/Map",
      "esri/views/SceneView",
      "dojo/domReady!"
    ], function(Map, SceneView) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        scale: 50000000,
        center: [-101.17, 21, 78]
      });

    });
 html,
    body {
      padding: 0;
      margin: 0;
    }
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0beta3/"></script>
<body>
  <div id="viewDiv"></div>
</body>

已更新

以上示例基于dojo框架,因为ARCGIS js api与dojo紧密结合...

好吧,如果您正在使用 esri 地图查看 angularjs 的直接指令; 下面是示例。

使用 esri 地图 please click here...

进一步了解 angularjs

<!DOCTYPE html>
<html ng-app="esri-map-example">
    <head>
        <title>Angular Esri Quick Start</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
      <script src="//npmcdn.com/angular-esri-map@2.0.0-beta.2"></script>
        <link rel="stylesheet" href="//js.arcgis.com/4.0beta3/esri/css/main.css">
    </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.0beta3/"></script>
        <!-- load AngularJS -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <!-- load angular-esri-map -->
        <script src="//npmcdn.com/angular-esri-map@2.0.0-beta.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>