使用 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>
我是 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>