openlayer 是基於JavaScript的webGIS庫 ，通過openlayer可以很容易的呼叫地圖，並做相應的操作。

在head中載入openlayer的js檔案：

      <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
       <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
       <script src="http://www.scgis.net/api/ol/v4.1.1/ol/ol4.1.1_scgis.js" type="text/javascript"></script>

body部分只需 新增：

<div id="map" class="map"></div>

script程式碼如下：

<script>
    window.onload = function(){
        var view = new ol.View({
            projection: ol.proj.get("EPSG:4326"),
            zoom:6,    //初始化地圖級別
	        rotation:0, //地圖旋轉弧度，預設為0，最大2π
	        center:[104.07, 30.7],   //初始化地圖中心點
            minZoom: 3,
            maxZoom: 18
        });

        //定義圖層
        var layers = [];
        var layer1 =new ol.scgisTileLayer(
	        "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudom/", //地圖服務地址
	        {token:"24TLRFm6TOrv"    //天地圖四川服務訪問令牌
	        });
        var layer2 =new ol.scgisTileLayer(
	        "http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/NewTiandituDOM_SCANN/", //地圖服務地址
	        {token:"24TLRFm6T"    //天地圖四川服務訪問令牌
	        });
        layers.push(layer1)
        layers.push(layer2)
        //定義地圖
	    var map= new ol.scgcMap({
	        layers:layers,
            view:view,
	        target:"map",
            loadTilesWhileInteracting: true,
            logo:false
	    });



    }

    </script>

view 中  加入 logo：false 可以去掉 右下角 openlayer 的 圖示

g