随着3.X系列版本新功能的不再增加，终于开始向4.X版本转变，其实说实话还是蛮不想转变的，因为相对于3.X版本的API，4.X版本里面的功能目前为止还是有点少的，但大势所趋，只能硬着头皮转了。
首先，4.X版本开发的基本套路和3.X版本相比是一致的，无非就是创建HTML页面，引用相关模板，然后实例化，最后实现与地图的交互，即操作地图。不过4.X版本的优点就是主打三维这一块，而且目前较新的前端渲染技术等已经融入到了新版本，老版本的话目前官方已经不再增加新功能，只是修复一下bug等，所以学习4.X系列的API开发是大势所趋。
第一个实例，我们来运用4.X版本的API来创建一个二维地图，最终效果如下：
由上图可见，它和老版本创建的地图一模一样，并没有什么不同，但是它其实是有区别的，它的区别就在于创建的过程和老版本并不是一致的，具体过程如下：
1 第一步基本都相同，就是创建HTML页面，然后创建一个div，设置其相应的样式，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to MapView - Create a 2D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>在这里你可能会自然而然的觉得，这个div是放置地图的，但你错了，它并不是放置地图，而另有他用。
2 我们引入相应的开发包，在此示例中只需要一个init.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>3 引入相应的开发包之后，我们接下来就要加载所需的模块，然后实例化地图，到目前为止，这些步骤都和老版本中的操作一模一样，大家不难理解，如下：
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView){
var map = new Map({
basemap: "osm"
});
});
</script>4 细心的同学已经发现了，我创建地图并没有用到之前创建好的div，在这只是指定了一个底图而已，而且除了加载Map这个模版之外，我还加载了一个叫做MapView的模版。
在这就要介绍一下这个MapView了，它是我们今天的主角，也是我们以后的主角。在4.X版本中其实是这样的，你创建一个地图，除此之外你还要创建一个地图视角，我们在这把这个地图视角可以理解为查看地图的眼睛，只有创建了地图视角，将它和地图做绑定，我们才能查看地图，否则是看不到地图的。
所以，接下来我们就要创建地图视角，在此时就要使用我们的div了，如下：
var view = new MapView({
container: "viewDiv", // 查看地图的容器
map: map, // 绑定创建的地图
zoom: 9,
center: [104.071469,30.662036] // 视角中心、观察中心
});5 地图创建完成，地图视角创建完成，将他俩做完绑定之后我们就可以在前端看到创建的地图了。以下是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to 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.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView){
var map = new Map({
basemap: "osm"
});
var view = new MapView({
container: "viewDiv", // 产看地图的容器
map: map, // 绑定创建的地图
zoom: 9,
center: [104.071469,30.662036] // 视角中心、观察中心
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>X北辰北 
