ARCGIS JAVASCRIPT API （3.2）部署

前期做地圖開發用的API 是SILVERLIGHT  項目需要，學習下JS API

首先從官方下載最新的API包 3.2一共有2個壓縮包API：arcgis_js_v32_api.zip和arcgis_js_v32_sdk.zip

解壓arcgis_js_v32_api，在library文件夾下可以看到安裝說明文件install.htm

下一步 根據安裝說明進行配置。

部署步驟1：將解壓縮后的文件目錄拷貝到web服務器網站根目錄下，這里使用IIS。根目錄。C:\Inetpub\wwwroot

拷貝后的文件目錄結構為

C:\Inetpub\wwwroot\arcgis_js_api\library

部署步驟2：修改全局變量[HOSTNAME_AND_PATH_TO_JSAPI] ,EditPlus或則DW都可以 查找替換為localhost/library/3.2/jsapi 和localhost/library/3.2/jsapicompact

如果端口不是80 需要加上端口號 （localhost：端口）

Configuration options for normal build:

1. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapi\init.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace this text with "<myserver>/arcgis_js_api/library/3.2/jsapi/"
2. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapi\js\dojo\dojo\dojo.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace this text with "<myserver>/arcgis_js_api/library/3.2/jsapi/"

Configuration options for compact build:

1. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapicompact\init.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace each instance of this text with "<myserver>/arcgis_js_api/library/3.2/jsapicompact/"
2. Open C:\Inetpub\wwwroot\arcgis_js_api\library\3.2\jsapicompact\js\dojo\dojo\dojo.js in a text editor and search for the text '[HOSTNAME_AND_PATH_TO_JSAPI]', and replace this text with "<myserver>/arcgis_js_api/library/3.2/jsapicompact/"

 步驟3： 測試是否發布成功，官方的安裝說明文件中給出了完成的測試代碼

 

 
          <! 
          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>/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/tundra/tundra.css" 
          /> 
          
     
          < 
          link  
          rel 
          ="stylesheet" 
           type 
          ="text/css" 
           href 
          ="http://<myserver>/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" 
            
          /> 
          
 
          
     
          < 
          script  
          type 
          ="text/javascript" 
           src 
          ="http://<myserver>/arcgis_js_api/library/3.2/jsapi/init.js" 
          ></ 
          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 accessible 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 
          > 
         

放到IIS目錄里運行下試試，如果地圖可以正常顯示 則表示部署成功 。

注意：官方測試代碼給出的地圖服務是緩存地圖，如果地圖服務是動態地圖話需要使用動態圖層ArcGISDynamicMapServiceLayer才能顯示。

 API 3.16 測試地圖demo

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script type="text/javascript">
        var map;
        var smarkerlayer;
        require(["esri/map",
        "esri/geometry/Point",        
        "esri/graphic",
        "dojo/domReady!"], function (Map) {
            map = new Map("map");
            var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/china2012shp/MapServer");
            map.addLayer(dynamicMapServiceLayer);
            smarkerlayer = new esri.layers.GraphicsLayer();
            map.addLayer(smarkerlayer);
            dojo.connect(map, "onLoad", function () {
                dojo.connect(map, "onMouseMove", showCoordinates);
                dojo.connect(map, "onMouseDrag", showCoordinates);
            });
            dojo.connect(map, "onClick", clicktoaddMarker);
            //創建一個標注
          var pt = new esri.geometry.Point(117.0605760000, 35.8424320000, map.spatialReference);
          addmarker(pt);
        });

        function addmarker(point) {
            var pt = point;
            var symbol = new esri.symbol.PictureMarkerSymbol("logo.png", 25, 25);
            var attr = { "address": "這只是一個測試數據(⊙o⊙)哦" };
            //創建模版
            var infoTemplate = new esri.InfoTemplate("標題測試", "地址:${address}");
            //創建圖像
            var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);
            //把圖像添加到剛才創建的圖層上
            smarkerlayer.add(graphic);
        }

        function showCoordinates(evt) {
            //get mapPoint from event
            var mp = evt.mapPoint;
            //display mouse coordinates
            dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
            var markerSymbol = new SimpleMarkerSymbol();
        }

        //測試單擊事件動態創建標注
        function clicktoaddMarker(evt) {
            var mp = evt.mapPoint;
            var pt = new esri.geometry.Point(mp.x, mp.y, map.spatialReference);
            addmarker(pt);
        }


    </script>
  </head>
  <body>
    <div id="map"></div>
    <span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span>
  </body>
</html>