学习笔记一：ArcGIS for Javascript 添加图层

前言

因工作原因在学习ArcGIS编程开发，但遗忘问题比较严重，一是因各种原因难以做到持续不断的学习，而有些代码间隔两三天再来用会出现各种问题；二是学了后面忘记前面，在有源码的情况能看懂，但没有源码自己写不出来或者写出来了各种bug，又得重新学习。因此希望以博客方式来记录和积累自己的学习。

本文原本需要实现的功能是：通过输入图层链接的方式动态添加图层。目前本文仅实现了在代码内进行矢量图层添加，后续将逐步完善功能和内容。

理论知识

AMD和Legacy

无论是AMD Module Require或是Legacy Module Require，其作用都是模块引用，通过require方法实现代码的模块化加载，便于代码的编写和维护。主要区别在于引入模块的方式差异，从而导致了在使用和写法上存在差异。在ArcGIS API for JavaScript官网（本文基于API 3.28版本）上同时提供了两者写法的范例，如下图。
官网提供两种写法的范例
两种方法中，Legacy Module Require是较老的传统写法，AMD是目前常用方法及官方推荐写法。如果是基于比较老的项目，很大可能会用到Legacy Module Require方法，但目前网上能找的范例比较少。

以实现简单地图功能为例，两种方式分别如下：
AMD方式：

require([
	"esri/map"
	], function(Map) {
		var map = new Map("map", {basemap:"topo" });
});

Legacy方式：

dojo.require("esri.map");
function init()
{
	var map = new esri.Map("map",{basemap:"topo" });
}
dojo.addOnLoad(init);

添加图层功能实现

核心部分：

<script type="text/javascript">
	require([
		"esri/map",
		"esri/layers/ArcGISDynamicMapServiceLayer"
		],function(Map,ArcGISDynamicMapServiceLayer){
		var map = new Map("map",{
			basemap:"topo",
			center:[-100,45],
			zoom:3
		});
		var DynamicLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");
		map.addLayer(DynamicLayer);
	});
</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ArcGISMap</title>
	<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
	<script src="https://js.arcgis.com/3.28/"></script>
	
	<style type="text/css">
		html,body{
			height: 100%;
			padding: 0;
			margin: 0;
		}
		#map{
			height: 600px;
			width: 800px;
			margin: 0
			padding:0;
		}
	</style>

</head>
<body class="claro">
	<div id="map"></div>

	<script type="text/javascript">
		require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer"],
			function(Map,ArcGISDynamicMapServiceLayer){
			var map = new Map("map",{
				basemap:"topo",
				center:[-100,45],
				zoom:3
			});
				var DynamicLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");
				map.addLayer(DynamicLayer);
		});

	</script>
</body>
</html>

显示效果

显示效果入图片描述
显示效果

目录

前言

理论知识

AMD和Legacy

添加图层功能实现

完整代码

显示效果