Day4.運用arcgis api for javascript開發(1-圖台基本設定與圖層控制)

第 11 屆 iThome 鐵人賽

DAY 4

自我挑戰組

在GIS系統掙扎10年之後的結晶(是結石吧?)系列第 4 篇

11th鐵人賽

糟了帳號不能改會被認出來

2019-09-19 22:36:54

1485 瀏覽

分享至

昨日待補的銜接文會交代我怎麼忽然正經起來(抓一個主題先寫下去)
因為跨平台需求
arcgis api for javascript在圖台開發這一塊是很值得去研究的
Google的API或其他開放性的API其實各有些背景優勢與簡便易用的特質
可是我還是覺得ArcGIS體系是最為全面與完整的
arcgis api for javascript目前還處在每2-3個月會有小改版的甜蜜期
線上有3,4版兩種可供選用
要做實用介紹當然還是以4.x較有搞頭
大概再過幾天會出現4.13版，這是一個兼容2D與3D可彈性自由選用的API
https://developers.arcgis.com/javascript/latest/guide/
官方有完整的文件說明
起手式很簡單就是這樣：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 11
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

導入
https://js.arcgis.com/4.12/esri/css/main.css
https://js.arcgis.com/4.12/
以require呼叫API內定義的元件與做好配置
很快速便能制作地圖網站