2013年7月2日 星期二

ArcGIS JavaScript api 實作第一步

因為某些原因，需要研究有關GIS的東西能夠放在Web上，所以開始摸索ArcGIS的東西
下面介紹一個最基礎的ArcGIS JavaScript api實作方法，
參考網站是從ArcGIS的官方教學看的，
此篇是小弟第一次寫文章，若是小弟我寫的不好，也可以從官網學習，
https://developers.arcgis.com/en/javascript/jstutorials/



第一步:


再學習ArcGIS JavaScript api前，要先大致了解html和javascript的基礎，不然有點辛苦，首先我們先建立一個最簡單的html網頁

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
  </head>
</html>


第二步:


我們要在<head>標籤中加入

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>

主要是載入CSS的格式以及載入API

第三步:


我們需要在script中呼叫函數

<script>
  dojo.require("esri.map");
</script>

並且設定一開始的基本地圖

<script>
  dojo.require("esri.map");
  function init() {
    // 底圖的設定值
  }
  dojo.ready(init);
</script>

這邊使用dojo.ready去執行底圖

第四步:


一個基本的底圖，可以參考下列去設定

  var map;
  function init() {
    map = new esri.Map("mapDiv", {
      center: [-56.049, 38.485],
      zoom: 3,
      basemap: "streets"
    });
  }
  dojo.ready(init);

center是中心點座標，
zoom是地圖的大小，
basemap是地圖的種類，另外還有下面幾種種類
"satellite", "hybrid", "topo", "gray", "ocean", "osm", "national_geographic"

第五步:


在body增加一個div用來顯示地圖

<body class="claro">
  <div id="mapDiv"></div>
</body>

另外可以參考官方的說明書在head增加CSS去調整顯示

<style>
  html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
  }
</style>

最後整合一個完整範例

<!DOCTYPE html>
<html>
<head>
  <title>ArcGIS</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script>
    dojo.require("esri.map");
    var map;
    function init() {
      map = new esri.Map("mapDiv", {
        center: [120.84621,23.77770],
        zoom: 9,
        basemap: "topo"
      });
    }
    dojo.ready(init);
  </script>  
  <style>
    html,body,#mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>
張貼者： 於
標籤：

1 則留言:

訂閱： 張貼留言 (Atom)