OpenLayers加載縮放控件使用方法詳解

更新時間：2020年09月25日 16:35:49 作者：桃李不言_下自成蹊

這篇文章主要為大家詳細介紹了OpenLayers加載縮放控件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了OpenLayers加載縮放控件使用的具體代碼，供大家參考，具體內容如下

1、一般的地圖打開都有放大、縮小和全圖的導航條，以便于用戶對地圖的查看，下面我們將在OpenLayers中實現(xiàn)這一功能；

2、在之前創(chuàng)建的空白站點下面新建一個html的頁面，引入ol.js和ol.css文件，然后在body標簽中創(chuàng)建一個div，作為地圖加載的容器；

3、代碼實現(xiàn)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>加載并顯示OSM地圖</title>
 <link href="../css/ol.css" rel="stylesheet" />
 <script src="../lib/ol/ol.js"></script>
 <style type="text/css">
  #map .ol-zoomslider
  {
   background-color : transparent;
   top : 2.3em;
  }
  
  #map .ol-zoom-extent 
  { 
   top: 280px;
  }
 </style>
  <script type="text/javascript">
   window.onload = function () {
    //實例化map對象并加載地圖
    //使用Openlayers初始化一幅地圖時，target、layers和view不可少
    var map = new ol.Map({
     //地圖容器div的id
     target: 'map',
     //在地圖容器中加載的圖層
     layers: [
      //加載瓦片數(shù)據(jù)
      new ol.layer.Tile({
       //瓦片的數(shù)據(jù)源
       source: new ol.source.OSM()
      })
     ],
     //地圖視圖設置
     view: new ol.View({
      //地圖中心點
      center: [0, 0],
      //地圖初始顯示級別
      zoom: 2
     })
    });
 
    //實例化ZoomSlider控件
    var zoomslider = new ol.control.ZoomSlider();
    //加載ZoomSlider控件到地圖容器中
    map.addControl(zoomslider);
 
    //實例化ZoomToExtent
    var zoomToExtent = new ol.control.ZoomToExtent({
     extent: [
      //Todo 這個范圍應該怎么確定
      13100000, 4290000,
      13200000, 5210000
     ]
    });
    //加載ZoomToExtent到map中
    map.addControl(zoomToExtent);
   }
   
 </script>
</head>
<body>
 <div id="map"></div>
</body>
</html>

4、運行結果

此時我們打開地圖時可以看見放大縮小和全圖的導航條了：