Openlayers實現地圖的基本操作
阿新 • • 發佈：2020-09-29
本文例項為大家分享了Openlayers實現地圖基本操作的具體程式碼，供大家參考，具體內容如下
1、新建一個html頁面，引入ol.js和ol.css檔案，然後在body中建立一個Div標籤和4個Button按鈕，用來實現地圖的放大、縮小、平移等功能；
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>
<script src="../lib/ol/ol.js"></script>
<link href="../css/ol.css" rel="stylesheet" />
<style type="text/css">
#menu
{
float : left;
position : absolute;
bottom : 10px;
font-size : 20px;
z-index : 2000;
}
</style>
<script type="text/javascript">
window.onload = function () {
//例項化map物件並載入地圖
var map = new ol.Map({
//存放地圖目標容器
target: 'map',//載入圖層
layers: [
//新建一個瓦片地圖圖層
new ol.layer.Tile({
//瓦片地圖資料來源
source: new ol.source.OSM()
})
],//初始化檢視
view: new ol.View({
//檢視中心點座標
center: [12550000,3680000],//縮放等級
zoom: 8,//最小縮放等級
minZoom: 6,//最大縮放等級
maxZoom: 12,//地圖旋轉30度
rotation: Math.PI/6
})
});
//獲取地圖的初始化資訊
var view = map.getView();
var zoom = view.getZoom();
var center = view.getCenter();
var rotation = view.getRotation();
//地圖縮小
document.getElementById("zoom-out").onclick = function () {
//獲取地圖當前檢視
var view = map.getView();
//獲取地圖當前縮放等級
var zoom = view.getZoom();
//每單擊一次地圖的縮放等級減一，以實現地圖縮小
view.setZoom(zoom - 1);
};
//地圖放大
document.getElementById("zoom-in").onclick = function () {
//獲取地圖當前檢視
var view = map.getView();
//獲取地圖當前縮放等級
var zoom = view.getZoom();
//每單擊一次地圖的縮放等級加一，以實現地圖放大
view.setZoom(zoom + 1);
};
//地圖平移
document.getElementById("panto").onclick = function () {
//獲取地圖當前檢視
var view = map.getView();
//指定要平移到的位置的座標
var position = ol.proj.fromLonLat([115.2341,32.4652]);
//重設地圖中心點，實現平移
view.setCenter(position);
};
//地圖重置
document.getElementById("restore").onclick = function () {
//重置中心點位置為初始化位置
view.setCenter(center);
//重置旋轉角度為初始化角度
view.setRotation(rotation);
//重置縮放等級為初始化縮放等級
view.setZoom(zoom);
};
}
</script>
</head>
<body>
<div id="map">
<div id="menu">
<button id="zoom-out">縮小</button>
<button id="zoom-in">放大</button>
<button id="panto">平移至...</button>
<button id="restore">重置</button>
</div>
</div>
</body>
</html>3、執行結果
初始化介面
單擊縮小按鈕，實現地圖縮小
單擊放大按鈕，實現地圖放大
單擊平移至按鈕，地圖平移到指定的位置（阜陽附近）
單擊地圖右上角的箭頭按鈕，使地圖無旋轉
單擊重置按鈕，地圖回到初始狀態
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。