OpenLayers 加載鷹眼控件

注：當前使用的是 ol 5.3.0 版本，天地圖使用的key請到天地圖官網申請，并替換為自己的key

地圖控件是一些用來與地圖進行簡單交互的工具，地圖庫預先封裝好，可以供開發者直接使用。OpenLayers具有大部分常用的控件，如縮放、導航、鷹眼、比例尺、旋轉、鼠標位置等。這些控件都是基于

ol.control.Control基類進行封裝的，可以通過Map對象的controls屬性或者調用addControl方法添加到地圖中。地圖控件通過HTML插入到Map頁面，可以利用CSS調整地圖控件樣式。OpenLayers初始化地圖時利用ol.control.default默認加載了縮放控件（ol.control.Zoom）

本節主要介紹鷹眼控件。

1. 鷹眼控件

鷹眼叫做地圖的鳥瞰圖或者縮略圖。在地圖中，通過鷹眼可以知道地圖當前的位置范圍。在鷹眼中，可以移動或者拖動到目標位置。鷹眼顯示范圍大，內容相對粗略。OpenLayers鷹眼控件默認顯示在地圖左下角，可以通過修改CSS樣式進行調整。

1.1. 創建鷹眼控件目標容器

創建鼠標位置DIV容器，并設置其CSS樣式，鷹眼控件默認CSS類名為ol-overviewmap

<body><div id="map" title="地圖顯示"></div><div class="custome-overviewmap" id="custome-overviewmap"></div>
</body>

設置鷹眼控件居于地圖右上角顯示。

#custome-overviewmap{position: absolute;height: 160px;width: 170px;right: 0px;top: 10px;
}
.ol-overviewmap {left:0;bottom: 0;
}

1.2. 創建鷹眼控件

鷹眼控件可以設置自定義樣式類名、目標容器、鷹眼圖層等參數，默認可以不傳參數。若想要將鷹眼控件至于目標容器中，需要傳遞目標容器樣式類名以及放置鷹眼控件的目標容器（DOM對象）。

// 創建鷹眼控件
const overviewMapControl = new ol.control.OverviewMap({// 鷹眼控件自定義CSS類名className: "ol-overviewmap ol-custome-overviewmap",// 加載鷹眼圖層，坐標系需要保持一致,若不設置鷹眼圖層，將采用所有主地圖圖層取代layers: [new ol.layer.Tile({name:"天地圖矢量圖層",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX:false})}),new ol.layer.Tile({name: "天地圖矢量注記圖層",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX: false})})],// 控件展開標識collapseLabel: 'u00BB',// 控件折疊標識label: 'u00AB',// 設置控件展開collapsed: false,// 若想讓鷹眼控件顯示在地圖HTML(viewport)外面，則需要提供target元素target: document.getElementById('custome-overviewmap'),// 收縮按鈕提示文字tipLabel: "收縮按鈕",// 自定義鷹眼控件視圖，若不提供，則默認使用“EPSG:3857”投影坐標系// view:''
})

1.3. 加載鷹眼控件

加載鷹眼控件的方法有兩種，一種是通過Map屬性controls加載，另一種是通過Map方法addControl加載。

// 方式1
const map = new ol.Map({target: "map",view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,}),// 鼠標控件：鼠標在地圖上移動時顯示坐標信息。controls: ol.control.defaults().extend([overviewMapControl])
})// 方式2
map.addControl(overviewMapControl)

2. 完整代碼

其中libs文件夾下的包需要更換為自己下載的本地包或者引用在線資源。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加載鷹眼控件</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微軟雅黑';}html,body{width:100%;height:100%;}#map {position: absolute;width: 100%;height: 100%;}#custome-overviewmap{position: absolute;height: 160px;width: 170px;right: 0px;top: 10px;}.ol-overviewmap {left:0;bottom: 0;}</style>
</head>
<body><div id="map" title="地圖顯示"></div><div class="custome-overviewmap" id="custome-overviewmap"></div>
</body>
</html>
<script>//==============================================================================////============================天地圖服務參數簡單介紹============================////================================vec：矢量圖層=================================////================================img：影像圖層=================================////================================cva：注記圖層=================================////=========================其中：_c表示經緯度，_w表示投影=======================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地圖影像圖層",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地圖影像注記圖層",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地圖注記描述",crossOrigin: "anoymous",wrapX: false})})// 創建鷹眼控件const overviewMapControl = new ol.control.OverviewMap({// 鷹眼控件自定義CSS類名// className: "ol-overviewmap ol-custome-overviewmap",// 加載鷹眼圖層，坐標系需要保持一致,若不設置鷹眼圖層，將用所有主地圖圖層取代layers: [new ol.layer.Tile({name:"天地圖矢量圖層",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX:false})}),new ol.layer.Tile({name: "天地圖矢量注記圖層",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX: false})})],// 控件展開標識collapseLabel: 'u00BB',// 控件折疊標識label: 'u00AB',// 設置控件展開collapsed: false,// 若想讓鷹眼控件顯示在地圖HTML(viewport)外面，則提供target元素target: document.getElementById('custome-overviewmap'),// 收縮按鈕提示文字tipLabel: "收縮按鈕",// 自定義鷹眼控件視圖，若不提供，則默認使用“EPSG:3857”投影坐標系// view:''})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,}),// 鼠標控件：鼠標在地圖上移動時顯示坐標信息。controls: ol.control.defaults().extend([// 加載鼠標控件// overviewMapControl])})map.addControl(overviewMapControl)map.addLayer(TDTImgLayer)map.addLayer(TDTImgCvaLayer)
</script>

?

OpenLayers示例數據下載，請回復關鍵字：ol數據

全國信息化工程師－GIS 應用水平考試資料，請回復關鍵字：GIS考試

?

【GIS之路】 已經接入了智能助手，歡迎關注，歡迎提問。

歡迎訪問我的博客網站-長談GIS：http://shanhaitalk.com

都看到這了，不要忘記點贊、收藏 + 關注哦！

本號不定時更新有關 GIS開發 相關內容，歡迎關注 !

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/84308.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/84308.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/84308.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！