以超圖的在線示例來學習；運行之后如下；

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

<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；

總結

以上是生活随笔為你收集整理的超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。