ArcGIS JavaScript API开发的地图

图片 2

         ArcGIS Server JavaScript API是建立在ArcGIS Server REST
API基础上。JavaScript 
API是将地理信息系统的地图和任务嵌入到Web应用程序的一种轻量级方式。现在javascript
api版本号是3.2,dojo是基于1.7版本的,增加了一些新的功能。最近在学习dojo和server
api,自己尝试做了一个例子。本例子只是很简单的调用arcgis
server自带的地图服务,完成了页面的布局设计,实现了地图导航、鹰眼等基本功能。

1 获取ArcGIS JavaScript API

API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk的下载链接,api是我们开发需要的库,sdk是说明文档和例子,点击下载api的最新版3.2。

图片 1

 

<!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>布局      </title>      <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/Nihilo/Nihilo.css">      <style type="text/css">          html, body {           height: 100%; width: 100%;          margin: 0; padding: 0;        }         body{          background-color:white; overflow:hidden;           font-family: "Kimberley", sans-serif        }         #header {         -moz-border-radius: 5px;          margin:2px;          padding-top: 15px;          padding-right: 15px;          background-color:#929761;           color:#421b14;           font-size:16pt; text-align:center;font-weight:bold;          border: solid 2px #79663b;          height:35px;        }        <!-- #subheader {          font-size:small;          color: #cfcfcf;          text-align:right;          padding-right:20px;           } -->        #footer {          margin:1px;          padding: 2px;          background-color:white; color:#2a3537;          border: solid 2px #79663b;          font-size:10pt; text-align:center;          height: 20px;        }              #leftPane{          margin:1px;          padding:1px;          width:150px;          color:#3C1700;          background-color:white;          border: solid 2px #79663b;        }        #map {          margin:1px;          border:solid 1px #79663b;        }        .shadow{          -o-border-radius: 6px;          -moz-border-radius: 6px;          -webkit-border-radius: 6px;          box-shadow: 8px 8px 16px #323834;          -webkit-box-shadow: 8px 8px 16px #323834;          -moz-box-shadow: 8px 8px 16px #323834;          -o-box-shadow: 8px 8px 16px #323834;        }                .nihilo .dijitAccordionText {          margin-left:4px;          margin-right:4px;          color:#5c8503;        }                      </style>      <script type="text/javascript">        var djConfig = {          parseOnLoad: true        };      </script>      <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8">      </script>      <script type="text/javascript">        dojo.require("dijit.dijit"); // optimize: load dijit layer     dojo.require("dojo.parser");             dojo.require("dijit.layout.BorderContainer");        dojo.require("dijit.layout.ContentPane");        dojo.require("dijit.layout.AccordionContainer");     dojo.require("dijit.layout.TabContainer");     dojo.require("dijit.form.Button");            dojo.require("esri.toolbars.navigation");       dojo.require("esri.dijit.Scalebar");       dojo.require("esri.dijit.OverviewMap");                                   dojo.require("esri.map");               var navToolbar;<!-- 定义成全局变量才能使用其中的函数,否则错误 -->       var map ;        function init() {           <!-- map = new esri.Map("map",{nav:true,showInfoWindowOnClick:false,slider:false}); -->     map=new esri.Map("map");          var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");          map.addLayer(tiledMapServiceLayer);        <!-- 导航工具栏 -->       navToolbar = new esri.toolbars.Navigation(map);     dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);         <!-- 比例尺功能 -->          dojo.connect(map, 'onLoad', function(theMap) {       dojo.connect(dijit.byId('map'), 'resize', map,map.resize);             var scalebar = new esri.dijit.Scalebar({               map: map,               scalebarUnit:'english'             });       });                  <!-- 鹰眼功能 -->     dojo.connect(map, 'onLoad', function(theMap) {             //resize the map when the browser resizes             dojo.connect(dijit.byId('map'), 'resize', map,map.resize);             //add the overview map              var overviewMapDijit = new esri.dijit.OverviewMap({               map: map,                            visible:true             });             overviewMapDijit.startup();             });             <!-- 坐标显示 -->      dojo.connect(map, "onLoad", function() {             //after map loads, connect to listen to mouse move & drag events             dojo.connect(map, "onMouseMove", showCoordinates);             dojo.connect(map, "onMouseDrag", showCoordinates);           });             }           dojo.addOnLoad(init);          <!-- 保证前后视图可以使用 -->      function extentHistoryChangeHandler() {           dojo.byId("zoomprev").disabled = navToolbar.isFirstExtent();           dojo.byId("zoomnext").disabled = navToolbar.isLastExtent();         }           <!-- 坐标显示函数 -->      function showCoordinates(evt) {           //get mapPoint from event           //The map is in web mercator - modify the map point to display the results in geographic           var mp = evt.mapPoint;           //display mouse coordinates           dojo.byId("info").innerHTML = mp.x + ", " + mp.y;         }         </script>    </head>    <body class="nihilo">          <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">      <!-- 以下是系统的标题 -->        <div id="header" dojotype="dijit.layout.ContentPane" region="top" >                   某某<!-- <div id="subheader">返回首页</div> -->        </div>          <!-- 以下是左边栏的功能设计 -->        <div dojotype="dijit.layout.ContentPane" region="left" id="leftPane" splitter="true">             <div dojoType="dijit.layout.AccordionContainer">                      <div dojoType="dijit.layout.ContentPane" title="地图浏览">       <!-- 以下实现地图浏览功能,可以用CSS来补充显示效果(已经给出了ID) -->                      <div dojoType="dijit.form.Button" id="zoomin">放大       <script type="dojo/method" event="onClick">      navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);       </script>       </div><br>              <div dojoType="dijit.form.Button" id="zoomout">缩小       <script type="dojo/method" event="onClick">      navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);       </script>       </div><br>              <div dojoType="dijit.form.Button"  id="zoomfullext">全图       <script type="dojo/method" event="onClick">      navToolbar.zoomToFullExtent();       </script>       </div><br>                 <div dojoType="dijit.form.Button" id="zoomprev">前一视图       <script type="dojo/method" event="onClick">      navToolbar.zoomToPrevExtent();       </script>       </div><br>                 <div dojoType="dijit.form.Button" id="zoomnext">后一视图       <script type="dojo/method" event="onClick">      navToolbar.zoomToNextExtent();       </script>       </div><br>              <div dojoType="dijit.form.Button" id="pan">漫游       <script type="dojo/method" event="onClick">      navToolbar.activate(esri.toolbars.Navigation.PAN);       </script>       </div><br>              <div dojoType="dijit.form.Button" id="deactivate">返回标准状态       <script type="dojo/method" event="onClick">      navToolbar.deactivate();       </script>       </div>                       </div>                       <div dojoType="dijit.layout.ContentPane" title="图层管理">                      <div dojoType="dijit.layout.TabContainer">                               <div dojoType="dijit.layout.ContentPane" title="图层控制">                                     </div>                        <div dojoType="dijit.layout.ContentPane" title="加载动态图层">                                     </div>       </div>       </div>                           <div dojoType="dijit.layout.ContentPane" title="动态图例">                         </div>              <div dojoType="dijit.layout.ContentPane" title="空间查询">                         </div>              <div dojoType="dijit.layout.ContentPane" title="地图编辑">                         </div>              <div dojoType="dijit.layout.ContentPane" title="空间分析">                         </div>              <div dojoType="dijit.layout.ContentPane" title="灾害模拟">                         </div>              <div dojoType="dijit.layout.ContentPane" title="决策服务">                         </div>              <div dojoType="dijit.layout.ContentPane" title="专业图表">                         </div>              <div dojoType="dijit.layout.ContentPane" title="地图打印">                         </div>              <div dojoType="dijit.layout.ContentPane" title="扩展功能">                         </div>              <div dojoType="dijit.layout.ContentPane" title="帮助">                               </div>                    </div>        </div>          <!-- 以下是地图显示部分(地图 比例尺 经纬度 鹰眼等) -->        <div id="map" class="shadow" dojotype="dijit.layout.ContentPane" region="center" >                     </div>                  <!-- 以下是有关系统信息 -->        <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >         某某      </div>      </div>    </body>  </html>           

2 本地部署API

打开API包中的arcgis_js_api/library/install.htm安装说明,本文依据此英文说明而来。

解压后在IIS中建立应用程序,如下图。配置好API应用程序后,其路径为http://192.168.1.58/arcgis_js_api

图片 2

 ARCGIS JavaScript
API包括普通版和简化版,简化版移除了Dojo Digit依赖和非必须的ArcGIS
JSAPI类。 

           

配置普通版:

打开arcgis_js_api\library\3.2\jsapi\init.js,把[HOSTNAME_AND_PATH_TO_JSAPI]替换成api在本地机器上的部署路径。这里是192.168.1.58/arcgis_js_api/library/3.2/jsapi/,注意路径无需包含http://。

打开C:\arcgis_js_api\library\3.2\jsapi\js\dojo\dojo\dojo.js,把[HOSTNAME_AND_PATH_TO_JSAPI]替换成api在本地机器上的部署路径。这里是192.168.1.58/arcgis_js_api/library/3.2/jsapi/,注意路径无需包含http://。