OpenLayers載入縮放控制元件使用方法詳解
阿新 • • 發佈:2020-09-27
本文例項為大家分享了OpenLayers載入縮放控制元件使用的具體程式碼,供大家參考,具體內容如下
1、一般的地圖開啟都有放大、縮小和全圖的導航條,以便於使用者對地圖的檢視,下面我們將在OpenLayers中實現這一功能;
2、在之前建立的空白站點下面新建一個html的頁面,引入ol.js和ol.css檔案,然後在body標籤中建立一個div,作為地圖載入的容器;
3、程式碼實現
<!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="external nofollow" 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: [ //載入瓦片資料 new ol.layer.Tile({ //瓦片的資料來源 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、執行結果
此時我們開啟地圖時可以看見放大縮小和全圖的導航條了:
我們拖動中間的滑塊可以放大縮小地圖,單擊E的圖示可以直接定位到北京附近(之前設定的Extent屬性的座標在北京附近):
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。