建立ArcGIS API for JavaScript的第一個示例程式

暖楓無敵發表於2015-12-11
APIJavaScript

    在上一篇部落格中已經介紹瞭如何搭建ArcGIS API for JavaScript開發環境，如果您還沒有搭建好開發環境的話，參考部落格：http://blog.csdn.net/zdw_wym/article/details/48678913。

    

    如果開發環境搭建好了的話，那麼今天我們繼續來搭建我們的第一個ArcGIS API for JavaScript應用程式。

    下面首先將程式碼貼出來，複製到VS2012中新建的html頁面中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS GIS地圖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <style type="text/css">
        html, body, #map
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script type="text/javascript">
        var map;
        require(["esri/map", "dojo/domReady!"], function (Map) {
            map = new Map("map", {
                basemap: "topo",
                center: [118.932036047149, 32.09141405],
                zoom: 10
            });
        });
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>

  執行效果圖如下：

 


      接下來我們重點關注如下js程式碼，該程式碼採用的是AMD方式：

      <script type="text/javascript">
              var map;
              require(["esri/map", "dojo/domReady!"], function (Map) {
                  map = new Map("map", {
                      basemap: "topo",
                      center: [118.932036047149, 32.09141405],
                      zoom: 10
                 });
             });
     </script>

    在該require回撥函式中命名引數的時候，使用Esri的首選引數。上面程式碼中，提供了esri/map資源的引用，然後在內部的匿名函式中，又提供了一個Map首選引數，在require函式中引用的每一個資源都有一個對應的引數用於提供訪問該資源物件。

    過時的寫法如下：

    <script type="text/javascript">
           dojo.require("esri.map");
           function init() {
               var map = new esri.Map("map", {
                    basemap: "topo",
                    center: [118.932036047149, 32.09141405],
                    zoom: 10
              });
          }
         dojo.ready(init);
     </script>

dojo.require已經不推薦使用了，官方文件上推薦用require，至於模組名的分隔符也只是語法要求而已。

===========================================================================

如果覺得對您有幫助，微信掃一掃支援一下：



相關文章