本系列文章已出版實體書籍：
「你的地圖會說話？WebGIS 與 JavaScript 的情感交織」（博碩文化）
WebGIS啟蒙首選✖五家地圖API✖近百個程式範例✖實用簡易口訣✖學習難度分級✖補充ES6小知識

GIS是什麼？

GIS全名為Geographic Information System，地理資訊系統。
顧名思義，可以想像成資料庫中除了一般的屬性資料外，還額外存了地理空間資訊，
像是一塊地的面積有多大，一條路是從哪裡通到哪裡，
再憑藉這些屬性資料與空間資料的分析，提供作為決策的重要指標。

還記得在早期電腦手機還不是很發達的年代，大家出去玩的時候，
是否時常帶著一大張地圖，或是一本旅遊書，到處趴趴走？
現在的我們則是拿出哀鳳，定個位，開一下Google地圖，搜尋附近好玩的景點，
甚至還可以看看評論、星星數、滑滑街景地圖，開個導航，走最近的路線。
我有時候會想像，如果有一天，沒有了這些便利的工具？出了遠門該怎麼活下去呢？(笑

地圖API初探

WebGIS的開發大多是基於已經開發完善的底層JS函式庫，呼叫他們的API方法進行應用。
然而，百家爭鳴的時代，究竟要選哪家API比較厲害呢？
青菜蘿蔔各有所好，可以說是各有各的好！

• TGOS Map API

TGOS是我開始接觸WebGIS的第一個地圖API，它的優點是API手冊範例清楚明瞭，
可以直接在TGOS的網站上做測試及修改，算是很好上手的地圖API。
可是並不是我最推薦大家做的，因為TGOS是內政部的服務，
近幾年除了經費不足少有更新外，政府機關在圖資及一些服務的限制很多，
除了API Key申請需透過審核，如果不是與政府機關有合作的公司，根本很難作為最主要的圖台開發API。

        <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script>

        // TGOS Map API 	
        var TMap = new TGOS.TGOnlineMap(document.getElementById("tmap"), 'EPSG3857');
        TMap.setCenter(new TGOS.TGPoint(121, 23.5));
        TMap.setZoom(7);

TGOS Map API 文件: https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi

• Google Map API

相信Google地圖是人人都經常使用的地圖，功能齊全、效能好，
介面也是大家最熟悉的，但其收費對於開發團隊而言卻是一場夢魘。
從2018年開始，嚴格的API收費制度的啟用，並且規定每位開發帳號都要綁定信用卡，
現在沒有綁定信用卡會直接顯示「這個網頁無法正確載入Google 地圖」，
綁了信用卡每月僅有28000次的流量，還是會整天擔心用量超額收到帳單。
還記得某一年我們公司的某個圖台網站，提供了地址定位查詢的服務，
上線短短三天用量換算台幣4-5萬，老闆只好命令我們緊急下架功能，
並且進行程式改寫，於是又默默地去填加班單了。(誤

        <script src="https://maps.googleapis.com/maps/api/js?key=yourkey"></script>

        // Google Map API
        var GMap = new google.maps.Map(document.getElementById('gmap'), {
            center: { lat: 23.5, lng: 121 },
            zoom: 7
        });

Google Map API文件: https://developers.google.com/maps/documentation/javascript/overview

• Here Maps API

相較於高額收費的Google，Here地圖則是擴大開放使用者的流量次數(每月25萬次)，
並且也有Android及ios開發用的SDK可供使用，
算是算準了Google地圖昂貴費用帶來的開發人潮流失，搶佔開發人員的使用率。

        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
        <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

        // Here Maps API
        var platform = new H.service.Platform({
            'apikey': yourkey
        });

        var defaultLayers = platform.createDefaultLayers();
        
        var HMap = new H.Map(
            document.getElementById('hmap'),
            defaultLayers.vector.normal.map,
            {
                zoom: 7,
                center: { lat: 23.5, lng: 121 },
            });
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(HMap));
        var ui = H.ui.UI.createDefault(HMap, defaultLayers);

Here Maps API文件: https://developer.here.com/documentation/maps/3.1.19.0/dev_guide/index.html

• ArcGIS API

ArcGIS API 是由GIS界老字號ESRI公司所開發，在早期WebGIS尚未興起前，GIS的相關工作都在應用程式上實現，包括ArcMap、ArcCatalog、ArcToolbox等工具，讓沒有程式開發基礎的人也能做GIS分析。
在地理資訊Web化的現代，ArcGIS API依舊是功能最完善的地圖API之一，不但支援眾多平台的SDK，在3D地圖上也有所發展。然而，ArcGIS API使用dojo框架，並用reauire.js達到模組化的管理，也成為不容易上手的原因。

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

        //  ArcGIS API
        require(["esri/Map", "esri/views/MapView"], function (Map, MapView) {
            var myMap = new Map({
                basemap: "streets-vector"
            });
            var view = new MapView({
                container: "amap", 
                map: myMap, 
                zoom: 6, 
                center: [121, 23.5] 
            });
        });

ArcGIS API文件: https://developers.arcgis.com/javascript/

• Leaflet API

發佈於2011年的開源函式庫，操作便利易上手，效能佳。
十分輕量化，不到40KB，並且有許多實用的功能及函式庫，
非常適合中小型的專案及產品開發，並逐漸成為了現在主流的WebGIS API。
有機會再來跟大家介紹一些有趣的函式庫吧？！

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

        // Leaflet API
         var LMap = L.map(document.getElementById('lmap'), {
            center: [23.5, 121],
            zoom: 7,
            crs: L.CRS.EPSG3857,
        });
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            id: 'mapbox.streets'
        }).addTo(LMap);

Leaflet API文件: https://leafletjs.com/reference-1.7.1.html

• OpenLayers API

一樣為開源函式庫，年代久遠？！(2006年發佈)
極度不熟，純粹為集滿六個XD

        <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
        <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

        // Openlayers API
        var OMap = new ol.Map({
            view: new ol.View({
                center: ol.proj.fromLonLat([121, 23.5]),
                zoom: 7
            }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'omap'
        });

OpenLayers API文件: https://openlayers.org/en/latest/apidoc/

六宮格

隨便刻個板，CSS我就不附了，免得獻醜 (X

    <div class="tbody">
        <div class="tr">
            <div class="td">
                <div id="tmap"></div>
            </div>
            <div class="td">
                <div id="gmap"></div>
            </div>
            <div class="td">
                <div id="hmap"></div>
            </div>
        </div>
        <div class="tr">
            <div class="td">
                <div id="amap"></div>
            </div>
            <div class="td">
                <div id="lmap"></div>
            </div>
            <div class="td">
                <div id="omap"></div>
            </div>
        </div>
    </div>

於是乎，六種地圖的台灣。
Ilha Formosa～

名詞釋義

• 縮放層級(zoom): 通常為數值，代表地圖放大或縮小的比例
• 座標系統(crs、srs、coord、coordinate)：代表地圖所使用坐標系的標準，跟大地基準、橢球體、投影有關，可以想像成地球是橢圓的，可是卻要壓成平面呈現，不同壓縮的方式就是不同的座標系統。
• 經度(lon、longitude、x): 在EPSG4326的座標系統中的x座標，也是Google地球(earth)所使用。
• 緯度(lat、latitude、y): 在EPSG4326的座標系統中的y座標
• DOM標籤(id、container、target): 在指定的DOM結構中生成地圖物件

那麼多地圖的API，每種寫法都不一樣，好煩喔！
而且每次要寫的時候都要重查一次API文件，如果一次要產生很多個地圖在網頁上，
一樣的程式不就要寫很多次？
下一篇，將會運用簡單工廠模式對地圖API進行封裝，
敬請期待。