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

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

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

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

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

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

3、代碼實(shí)現(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 () {
    //實(shí)例化map對(duì)象并加載地圖
    //使用Openlayers初始化一幅地圖時(shí)，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()
      })
     ],
     //地圖視圖設(shè)置
     view: new ol.View({
      //地圖中心點(diǎn)
      center: [0, 0],
      //地圖初始顯示級(jí)別
      zoom: 2
     })
    });
 
    //實(shí)例化ZoomSlider控件
    var zoomslider = new ol.control.ZoomSlider();
    //加載ZoomSlider控件到地圖容器中
    map.addControl(zoomslider);
 
    //實(shí)例化ZoomToExtent
    var zoomToExtent = new ol.control.ZoomToExtent({
     extent: [
      //Todo 這個(gè)范圍應(yīng)該怎么確定
      13100000, 4290000,
      13200000, 5210000
     ]
    });
    //加載ZoomToExtent到map中
    map.addControl(zoomToExtent);
   }
   
 </script>
</head>
<body>
 <div id="map"></div>
</body>
</html>

4、運(yùn)行結(jié)果

此時(shí)我們打開(kāi)地圖時(shí)可以看見(jiàn)放大縮小和全圖的導(dǎo)航條了：

我們拖動(dòng)中間的滑塊可以放大縮小地圖，單擊E的圖標(biāo)可以直接定位到北京附近（之前設(shè)置的Extent屬性的坐標(biāo)在北京附近）：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
JavaScript提取元素中第一個(gè)子元素的實(shí)現(xiàn)方法
本文主要介紹了JavaScript提取元素中第一個(gè)子元素的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
JavaScript 繼承詳解及示例代碼
本文主要介紹JavaScript 繼承的知識(shí)，這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼，幫助大家學(xué)習(xí)參考，有興趣的小伙伴可以參考下
2016-09-09
前端大文件上傳處理與性能優(yōu)化詳解
隨著Web應(yīng)用不斷發(fā)展,文件上傳功能已成為許多項(xiàng)目不可或缺的一部分,下面我們就來(lái)看看如何在前端處理文件上傳并且避免大文件造成的性能問(wèn)題吧
2025-03-03
淺析JavaScript中變量提升的原理與使用
前端的小伙伴大概都知道，js中的var變量存在變量提升，在es6以后隨著let變量的出現(xiàn)，變量提升問(wèn)題得以解決，那么變量提升的原理是什么，es6又是怎么解決變量提升問(wèn)題的，下面我們來(lái)共同探尋答案
2023-05-05
JS使用for循環(huán)遍歷Table的所有單元格內(nèi)容
JS遍歷Table的所有單元格內(nèi)容思路是遍歷Table的所有Row，遍歷Row中的每一列，獲取Table中單元格的內(nèi)容
2014-08-08
JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件
Sublime Text幾乎是任何開(kāi)發(fā)者在其工具箱的必備應(yīng)用程序,這篇文章主要介紹了JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件，感興趣的小伙伴們可以參考一下
2016-02-02
JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)
本文主要介紹了JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié),包括ClipboardAPI和document.execCommand這兩種方法,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-02-02
javascript的trim,ltrim,rtrim自定義函數(shù)
今天用到j(luò)avascript去掉一個(gè)文本框中字符串兩端的空格，開(kāi)始還以為有trim，ltrim，rtrim函數(shù)（asp中有這三個(gè)函數(shù)，弄混了），結(jié)果找半天，沒(méi)有找到。最后找到用正則實(shí)現(xiàn)這樣功能的自定義函數(shù)。
2008-09-09
JavaScript中BOM對(duì)象原理與用法分析
這篇文章主要介紹了JavaScript中BOM對(duì)象原理與用法,,結(jié)合實(shí)例形式分析了javascript中BOM瀏覽器對(duì)象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-07-07