ArcGIS API for JavaScript 4.2念笔记[1] 显示地图

 

ArcGIS API for JavaScript
4.2一直由官网的Sample中上学,API
Reference也是自从官网翻译接头过来,鉴于网上截稿前还从未人宣布过4.2之学笔记,我就尝试吧。

嘿是ArcGIS API for
JS?这里虽未多介绍了,最重大之一点凡4.x本及3.x本的变更,按法定的意思是再次描绘了脚。

记中规定:

ArcGIS API for JavaScript简称AJS

应用CDN(即不安排本地环境)进行测试出

旁根据需要展开改动、增删。

 


 

一经用地图显示在html页面上,那就是使生一个片元素承接并执行渲染。

本节以无限简便易行、最低要求的2D地形图显示为条例。

 

先是以html页面中一定要生一个div,官方命名为“viewDiv”。然后便当js代码中对之div进行输出即可。先贴出js代码的架部分(展开即可查看代码)

当即有些代码用放在4.2之js文件引用之下。

require
(
    [
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ] ,
    function(Map, MapView) {
        //你的代码
    }
);

 

今对require入口函数的率先独参数(字符串数组)中之老三单字符串的意义进行分解。

就三独字符串与C#丁的using命名空间、C++中之include头文件、Java中之#import类似,是对准亚个参数所欲的作用拓展引用。

具体怎么是即刻三个字符串,后面再解释。

次只参数是一个函数(C#里会传委托吧大概忽略这个括号),这个函数的函数体如下:

function(Map, MapView){
  var map = new Map({
    basemap: "osm" // 基础地图类型
  });
  var view = new MapView({
    container: "viewDiv",  // 承接地图的块元素的ID
    map: map,  // 地图对象,由上方new出
    zoom: 8,  // 缩放级别
    center: [114, 30]  // 中心经纬度
  });
}

咱们本着这里的少数只实例化的对象map、view进行说明说明。

【map对象是地图的数有,而view则是地图的可视化部分。】

map对象的创导参数,在本例中是basemap,查询参考可以理解用了osm这一个色的根底地图。basemap是一个类,在参考文档中呢得以查询到。官方使用的是streets地图,而114,30邻座streets是绝非底,我切换至了osm地图。

view对象组织时,拥有4只参数,注释中爱掌握,就未举行多的解说了,重要之是map对象是出于点new实例化出来的。

至于JS的function参数和意外之构造函数,我也不多说了,总之,Map和MapView两独名词,是esri/Map模块和esri/views模块下之个别单近乎而已。

随即即是当第一个参数数组中前少单字符串的意义了。

[“esri/Map”, “esri/views/MapView”, “dojo/domReady!”]
//第三只字符串暂时不解释

 

【Map类和MapView类的援】

针对Map类的信息截图如下:

C++ 1

继承自Accessor,子类有WebMap和WebScene。

构造函数的参数有一个:C++basemap类型的参数

对Map对象的特性和方式,可以参见下文:

Map

同理,MapView对象参考下文如下:

MapView

MapView对象构造函数、属性与函数也描绘的怪详细了。MapView继承自View类,而View类则连续自Accessor类。

上述就也第二单参数的笔记。

当今,贴发出完全的html页面代码,可以自动复制粘贴到地头html文件,双击打开即可见到地图。

C++ 2C++ 3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "dojo/domReady!"
], function(Map, MapView){
  var map = new Map({
    basemap: "osm"
  });
  var view = new MapView({
    container: "viewDiv", 
    map: map,   
    zoom: 8,
    center: [114, 30] 
  });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

第一个例证

不出意外的语,会是这样子:

C++ 4

自身以chrome 56浏览器,这是以网吧的机,Win7+Chrome 55.


 

补充:

link和率先独script标签是对准官方样式表和类库的援,没有立即俩凡是运作无了之。

盖AJS是依据dojo的,所以要以require的率先独字符串数组参数的老三个因素中使用dojo/domReady!,具体是怎么,官方例子有描绘,作为下级别的开销就非深刻了,有趣味的同窗可以试看AJS的框架什么的。