Openlayers學習之載入鷹眼控制元件
阿新 • • 發佈:2020-09-30
本文例項為大家分享了Openlayers學習之載入鷹眼控制元件,供大家參考,具體內容如下
1、新建一個html頁面,引入ol.js和ol.css檔案,然後在body中建立一個div標籤,用來作為地圖載入的容器;
2、程式碼實現
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../css/ol.css" rel="stylesheet" /> <script src="../lib/ol/ol.js"></script> <style type="text/css"> /*自定義鷹眼樣式*/ .myOverview,.myOverview.ol-uncollapsible { bottom:auto; left:auto; right:0px; top:0px; } /*鷹眼控制元件展開時的控制元件外邊框*/ .myOverview:not(.ol-collapsed) { border:1px solid black; } /*鷹眼控制元件地圖容器邊框樣式*/ .myOverview .ol-overviewmap-map { border:none; width:300px; } /*鷹眼控制元件中顯示當前視窗區域的邊框樣式*/ .myOverview .ol-overviewmap-box { border:2px solid red; } /*鷹眼控制元件展開時其控制元件按鈕圖示的樣式*/ .myOverview:not(.ol-collapsed) button { bottom:auto; left:auto; right:1px; top:1px; } </style> <script type="text/javascript"> window.onload = function () { //例項化鷹眼控制元件 var overviewMapControl = new ol.control.OverviewMap({ //載入鷹眼控制元件中顯示的圖層 layers: [ //載入瓦片資料來源 new ol.layer.Tile({ source: new ol.source.OSM({ 'url':'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' }) }) ],//鷹眼控制元件一開始為展開方式 collapsed: false,//鷹眼控制元件的樣式名稱 className:'ol-overviewmap myOverview' }); //例項化地圖物件 var map = new ol.Map({ target: 'map',layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }),],view: new ol.View({ center: [0,0],zoom: 3 }) }); //將鷹眼控制元件載入到map中 map.addControl(overviewMapControl); } </script> </head> <body> <div id="map"></div> </body> </html>
3、結果展示
初始化地圖完成後,會在地圖的右上角看見當前區域的鷹眼檢視
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。