超圖js版 iclient 基本開發 - 載入基本圖層（以天地圖示例）和基本地圖控制元件

以超圖的線上示例來學習；執行之後如下；

原網址程式碼比較長一些；先把多的去掉；看一下基本的載入圖層和地圖控制元件的概念；

<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" include="tianditu" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript">
    var map, tiandituLayer;
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.Navigation(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.LayerSwitcher()

        ], allOverlays: true
    });
    tiandituLayer = new SuperMap.Layer.WMTS({
        name: "myvec1",
        url: "https://t0.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
        layer: "vec",
        style: "default",
        matrixSet: "c",
        format: "tiles",
        opacity: 1,
        requestEncoding: "KVP"
    });
    
    map.addControl(new SuperMap.Control.MousePosition());
    map.addLayers([tiandituLayer]);
    map.setCenter(new SuperMap.LonLat(113, 29), 10);
    
</script>

首先包含超圖的相關庫；

map，地圖變數；tiandituLayer，圖層變數，代表一個圖層；

先new一個map物件，類名是SuperMap.Map；controls:[ ]，這裡面是map上的控制元件；程式碼new了三個地圖控制元件；

第一個導航控制元件；如無此控制元件，則不能使用滑鼠拖動地圖；

第二個是縮放控制元件；左上角，加號減號的這個；點加號放大地圖，點減號縮小地圖；

第三個是圖層切換控制元件；右上角這個；滑鼠移上去會顯示所有圖層名稱；當前只有一個圖層；點選每個圖層名前面的checkbox，可隱藏或顯示該圖層；

還有其他幾個map控制元件，自己根據需要新增；

allOverlays，為true允許圖層層疊；

下面，new一個圖層物件；天地圖是超圖外部的；其圖層類別為SuperMap.Layer.WMTS；圖層類別有多種，自己根據需要選擇；

    第一個引數，圖層名，自定義；

    第二個引數，圖層的url，可以是自己釋出出來的地圖服務，這裡是天地圖的url；

    後面是一些屬性定義；

map.addControl，新增其他控制元件到map上；SuperMap.Control.MousePosition()這個控制元件，功能是隨著滑鼠在地圖上移動，在地圖右下角顯示當前滑鼠位置的經緯度；我以前初做市，不知道有此控制元件，還自己寫了段程式碼，隨著滑鼠移動來顯示當前點的經緯度；用這個控制元件就可以了；

map.addLayers，新增圖層到map； [...]裡面，可以放多個圖層變數；以逗號分割；

map.setCenter，設定地圖中心點的經緯度；10 是縮放級別；

第一個圖是縮放級別10，第二個圖是縮放級別15；