第一篇 【ArcGIS Javascript API應用系列一】 創建與安裝ArcGIS Javascript API服務

第一篇     創建與安裝ArcGIS Javascript API服務


       JavaScript API是ArcGIS Server 9.3新增的一套API框架,爲創建WebGIS應用提供了輕量級的解決方案,在客戶端可以輕鬆地利用JavaScript API來調用ArcGIS Server所提供的服務,實現地圖應用和地理處理功能。 


       開發人員在使用Javascript API進行開發時,只需編寫客戶端的代碼,不需要編寫服務器端代碼。JavaScript API是純粹的客戶端操作,它基於Dojo庫,並用面向對象的方式對其提供的功能進行了重新封裝。 


       要使用ArcGIS Javascript API進行開發,有兩種方法,一種方法是使用arcgisonline提供的在線腳本服務。其二是使用Javascript API離線版本創建自己的ArcGIS Javascript API服務。 


       首先介紹第一種方法。第一種方法較爲簡單,直接利用在線的腳本服務。如果你的開發環境與運行環境,Web服務器都能直接與外網連通,那麼可以使用方法一進行開發。方法一不需要創建自己的ArcGIS Javascript API服務。其使用方法如下:

  1.使用Dojo提供的樣式表
   <style type="text/css">@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1/js/dojo/dijit/themes/tundra/tundra.css";</style>
     2.引用腳本文件
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1"> </script> 



    方法二較方法一複雜,先要獲取框架的離線版本。在ESRI的官方網站上,沒有找到離線版本的下載地址,你可以從附件中獲取離線版本。獲取離線版本以後,按照以下的步驟進行設置。


  1. 在你的Web應用程序根目錄中創建目錄jsapi文件夾, 對於Java Web應用程序,這是與WEB-INF同級的目錄。將壓縮包中的1.1文件夾整個拷貝到此目錄中。
  2. 使用文本編輯器打開\1.1\arcgis\js\esri\esri.js,找到baseUrl:"[FULL_HTTP_URL_TO_JSAPI]",使用以下字段進行代替:baseUrl:"http://<myserver>/jsapi/1.1/arcgis/"其中<myserver>是你的Web服務器運行的地址,如localhost:8080/WebQuery,由三部分組成,主機地址,端口號以及應用程序名稱等。
  3. 使用文本編輯器打開\1.1\arcgis\js\esri\dijit\css\InfoWindow.css,找到src='[FULL_HTTP_URL_TO_JSAPI]js/esri/dijit/images/infowindow.png',使用以下字段進行代替:src='http://<myserver>/jsapi/1.1/arcgis/js/esri/dijit/images/infowindow.png'其中<myserver>是你的Web服務器運行的地址,如localhost:8080/WebQuery等。
  4. 還有一項設置,更改ArcGIS Server REST的設置,在實際使用時,發現此項不進行設置也可正常使用。(注意將其中的<myserver>替換爲你的Web應用程序的地址,例如:localhost:8080等)
  5. 設置完成以後,可以通過以下代碼進行測試。(注意將其中的<myserver>替換爲你的Web應用程序的地址,例如:localhost:8080/WebQuery等)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="http://<myserver>/jsapi/1.1/arcgis/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://<myserver>/jsapi/1.1/arcgis/"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      function init() {
        var myMap = new esri.Map("mapDiv");
        //note that if you do not have public Internet access then you will need to point this url to your own locally accesible cached service.
        var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");
        myMap.addLayer(myTiledMapServiceLayer);
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
  </body>
</html>



 歡迎交流:[email protected]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章