esri-leaflet入門教程（2）-地圖的HelloWorld

by 李遠祥

      常言道“君子性非異也，善假于物也”。這句話在IT界同樣也適用，只不過IT界有更為時髦的說法：“不用重新制作輪子”。在當前各類框架盛行的年代，搭建Web應用程序已經是相當簡單的了，不管是搭建界面的還是構建地圖，都已經有現成的框架可以直接使用，使工程師們可以更加關注用戶的需求而不是苦于編碼。當然了，回歸事物的本質，就是工程師們可以少寫很多代碼?。?！  ^_^

      閑話不提了，接下來當然就是說說學習esri-leaflet的一些準備了。如果到了開始寫代碼階段還沒有弄懂所謂的HTML、CSS、javaScript的話，那可以直接將該網頁關掉了，因為這個博客不會去講基礎的web開發內容。說說接下來用到的一些工具和技術，開發工具使用國內的HBuilder，可以在其官網下載 http://www.dcloud.io/ （沒有為什么，因為簡單，下載下來解壓后直接可以使用），至于使用什么IDE根據各人喜好。界面框架使用Flat UI （在bootstrap 框架下衍生出來的框架，純屬個人喜好，用法跟bootstrap一樣，只是筆者喜歡它的風格），現成的一個外觀不錯的框架，原因很簡單，不需要重新發明輪子，不用自己重新去寫界面的代碼。地圖框架那就不用說了，就是使用esri-leaflet 。需要下載esri-leaflet （下載地址 https://github.com/Esri/esri-leaflet/releases/tag/v1.0.0）和leaftlet原生腳本（下載地址 http://leafletjs.com/download.html）

      準備工作妥善后就是創建工程了。使用IDE創建一個工程，然后將下載下來的腳本放在對應的目錄，js的目錄怎么放置，就開工程師們的習慣了。如下圖，可以看出本次程序代碼使用的一些技術框架

      在工程中需要引用的框架當然是需要flatui，這是界面部分所使用的，然后就是地圖部分的leaflet框架和esri-leaflet ，這兩部分解壓下來后其實只需要leaflet.js 和leaflet.css以及esri-leaflet.js ，相對于以前龐大的ArcGIS Javascript API，區區200來K的大小，真是足夠精簡，并且不需要配置復雜的ArcGIS JavaScript API ，直接拿來即用。

      接下來就是創建其界面和調用了。先不急著創建復雜的代碼，可以先根據bootstrap或flatui搭建一個簡單的界面，先讓自己找一點成就感。先利用FlatUI去做一個常規的地圖應用界面，當然要有菜單，地圖控件，信息展示面板等。先來看看筆者用十分鐘搭好的一個簡單界面，當然這里面為了顯示地圖，先行加入了地圖代碼，如下圖所示

      FlatUI的界面是非常美觀的，由于從bootstrap衍生出來，所以直接使用bootstrap的寫法來編寫就行了。接下來再看看地圖Hello World的寫法了。

      首先需要引入leaflet和esri-leaflet的腳本，當然了，這個代碼還會涉及到FlatUI，所以代碼也一并貼出來。

		<title>Esri-leaflet 功能</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Loading Bootstrap -->
		<link href="flatui/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- Loading Flat UI -->
		<link href="flatui/css/flat-ui.css" rel="stylesheet">
		<link rel="shortcut icon" href="flatui/img/favicon.ico">
		<!-- 加載leaflet-->
		<link rel="stylesheet" href="leaflet/leaflet.css" />
		<script src="leaflet/leaflet.js"></script>
		<script src="esri/esri-leaflet.js"></script>
      正如之前所說，其實引入的腳本部分并不多。界面的搭建就不多說了，主要的是在地圖控件，需要在bootstrap的柵格布局中加入屬于地圖的DIV元素，例如設計好頁面布局之后，在屬于地圖展示區域的div中給一個id名稱如“mapDiv”，如下面代碼所示
<div class="row">
    <div class="col-xs-9" id="mapDiv" style="top: 55px; height:600px;"></div><!--地圖面板 –>
 
      可以看到筆者為了讓地圖控件占位，設定了一下其大小，因為了bootstrap框架中寬度是自動適應的，所以設置高度即可，后面會在一些頁面腳本中加入窗口大小響應代碼，讓地圖的高度能夠適用不同的窗口大小。
      接下來再看其地圖加載的腳本部分。在body標簽中設計好界面之后，在代碼的最后才加入初始化<script>，可以看下面代碼
    <div class="row">
      <!--底部狀態欄部分 -->
      <div class="col-xs-6" style="top: 50px;height: 50px;">
        <span class="label label-success">代碼實例來自博客  GIS制圖樂園  http://blog.csdn.net/liyuanxiang1984                                                              </span>
      </div>
    </div>
    <!--底部狀態欄部分 -->
    </div>
    
    <script>
      var map = L.map("mapDiv").setView([37.75, -122.23], 10);
      L.esri.basemapLayer("Topographic").addTo(map);
      //初始化使計算Map控件大小
      document.getElementById("mapDiv").style.height = document.documentElement.clientHeight-80+"px";
      document.getElementById("panDiv").style.height = document.documentElement.clientHeight-110+"px";
      //當網頁變化是重新計算地圖控件的大小
      window.onresize=function(){
        document.getElementById("mapDiv").style.height = document.documentElement.clientHeight-80+"px";
        document.getElementById("panDiv").style.height = document.documentElement.clientHeight-110+"px";
      }
    </script>
    <script src="flatui/js/vendor/jquery.min.js"></script>
    <script src="flatui/js/flat-ui.min.js"></script>
  </body>
      從上面的代碼可以看到，初始化頁面之后才初始化代碼，esri-leaflet的寫法非常簡單，這個Hello World 程序就是先生成一個map，然后加載ArcGIS Online上的底圖，并指定其初始顯示區域。leaflet的寫法大部分都是L. 開頭，而esri-leaflet的寫法也是遵循其規律，變為L.esri 開頭。地圖在一開始的初始化時就可以使用leaflet的setView 方法去指定初始化的位置了，兩個參數分別是坐標和地圖的級別。然后第二句 L.esri.basemapLayer("Topographic").addTo(map); 才是esri-leaflet的東西，使用basemapLayer方法去加載ArcGIS Online上的Topographic 底圖，并將其加載到map控件上。其寫法非常簡約。
      至于下面的代碼就是設置頁面加載時適應不同分辨率的屏幕，其地圖區域的高度設置。還有就是在window.onresize 事件中也加入該調整代碼，不然bootstrap是不認這些變化的。接下來再看看改變頁面的大小時界面的自適應，如下圖
      第一個Hello World代碼非常簡單，主要是讓讀者知道常規的搭建模式。后面章節將會更加詳細的接入ArcGIS的其他功能。