01 建立一個二維地圖
隨著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>