废话不多说，因工作接触到ArcGIS API for JavaScript，从字面意思上就可以知道，就是用JavaScript使用ArcGIS服务的API接口。
我自己理解来就是使用ArcGIS的JavaScript方法来实现调用发布的地图服务展示到web前端的动态效果，也就是用户画面。
由于本人是纯小白，刚接触，直接使用了最新的4.8版本。很尴尬，搜索到的许多教程都是3.x版本。由于版本变化较大，许多标签有可能改名，3.x版本的许多方法不能使用。只能看着教程加上官方文档和官方案列一点一点修改和琢磨，都是自己的一些个人观点，有可能有错误，欢迎指正。
- 使用方法分3块
- 引入文件css和js
- 设置好显示画面的区域，也就是HTML标签div
- 使用需要的js方法，实现效果(主要部分)
1.简单加载地图信息
这里用的是2D画面，一会会说明2D和3D的方法不同。
官方案列2D
2D地图显示官方截图
从画面上看，就是简单实现加载地图，实现地图方法缩小功能。
官方代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport">
<title>Intro to MapView - Create a 2D map - 4.8</title>
<style> //设置显示区域的样式，地图全页面展示
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
//引入js文件和css样式表
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
//开始使用编辑js，实现加载地图效果
<script>
// 这是，使用的方法，先将你需要的模块导入，这里使用了Map和MapView。函数调用了导入模块的参数。
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
//这里是新建一个地图，设置一些地图属性
var map = new Map({
//设置基地图，可以换，这是官方的地图，自己的项目，需要加载自己的地图服务。
basemap: "streets"
//还有其他，属性，如layer，ground，用到会再说明
});
//新建视图，用的是MapView，是2D的，3D的要用SceneView模块，SceneView方法创建。
var view = new MapView({
//显示在HTML上的区域，也就是哪个div里
container: "viewDiv",
//将地图服务加载到视图上，这是4.x版本设定，3.x版本可直接创建map时设定，不需要view模块。
map: map,
//设置加载地图的缩放等级和中心位置。
zoom: 4,
center: [15, 65] // longitude, latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
以上官方解析完毕。
此时我们需要将自己的地图服务加载使用。
2.加载发布的地图服务
首先要确定将发布的地图服务加载到页面的模块和方法
查找了教程，加载不同的地图服务，需要不同的模块，
举几个列子：
| 3.x | 4.x | 作用 |
|---|---|---|
| ArcGISDynamicMapServiceLayer | MapImageLayer | 动态地图服务 |
| ArcGISImageServiceLayer | ImageryLayer | 影像服务，也属于动态地图服务 |
| ArcGISTiledMapServiceLayer | TileLayer | 切片缓存地图服务，非动态 |
| ... | ... | ... |
还有很多，这里不一一介绍，需要的请自行百度，查看大神们的详细图层介绍。
这里使用的就是TileLayer，感觉一般2D地图都是这个模块。
代码总体类似，新加代码：
var houLayer = new TileLayer({
//你需要加载的地图服务接口
url: "http:///*************/MapServer" });
var map = new Map({
//注释掉basemap，当它存在是，地图服务加载不进去，
//不知道为什么，可能是我某些地方错了，反正不太清楚，注释掉就能加载成功。
// basemap: "oceans"
});
//将layer添加到map里，也可以直接新建map时加入进去。
map.add(houLayer);
最后运行HTML页面，即可显示加载地图。
加载地图服务
不足之处，欢迎指正。
网友评论