OpenLayers加载天地图

Posted 2021-01-20 crazytao

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