Openlayers實現(xiàn)地圖的基本操作
更新時間：2020年09月28日 11:51:52 作者：桃李不言_下自成蹊
這篇文章主要為大家詳細(xì)介紹了Openlayers實現(xiàn)地圖的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Openlayers實現(xiàn)地圖基本操作的具體代碼，供大家參考，具體內(nèi)容如下
1、新建一個html頁面，引入ol.js和ol.css文件，然后在body中創(chuàng)建一個Div標(biāo)簽和4個Button按鈕，用來實現(xiàn)地圖的放大、縮小、平移等功能；
2、代碼實現(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></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({
//存放地圖目標(biāo)容器
target: 'map',
//加載圖層
layers: [
//新建一個瓦片地圖圖層
new ol.layer.Tile({
//瓦片地圖數(shù)據(jù)源
source: new ol.source.OSM()
})
],
//初始化視圖
view: new ol.View({
//視圖中心點坐標(biāo)
center: [12550000, 3680000],
//縮放等級
zoom: 8,
//最小縮放等級
minZoom: 6,
//最大縮放等級
maxZoom: 12,
//地圖旋轉(zhuǎn)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 () {
//獲取地圖當(dāng)前視圖
var view = map.getView();
//獲取地圖當(dāng)前縮放等級
var zoom = view.getZoom();
//每單擊一次地圖的縮放等級減一，以實現(xiàn)地圖縮小
view.setZoom(zoom - 1);
};
//地圖放大
document.getElementById("zoom-in").onclick = function () {
//獲取地圖當(dāng)前視圖
var view = map.getView();
//獲取地圖當(dāng)前縮放等級
var zoom = view.getZoom();
//每單擊一次地圖的縮放等級加一，以實現(xiàn)地圖放大
view.setZoom(zoom + 1);
};
//地圖平移
document.getElementById("panto").onclick = function () {
//獲取地圖當(dāng)前視圖
var view = map.getView();
//指定要平移到的位置的坐標(biāo)
var position = ol.proj.fromLonLat([115.2341, 32.4652]);
//重設(shè)地圖中心點，實現(xiàn)平移
view.setCenter(position);
};
//地圖重置
document.getElementById("restore").onclick = function () {
//重置中心點位置為初始化位置
view.setCenter(center);
//重置旋轉(zhuǎn)角度為初始化角度
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、運行結(jié)果
初始化界面
單擊縮小按鈕，實現(xiàn)地圖縮小
單擊放大按鈕，實現(xiàn)地圖放大
單擊平移至按鈕，地圖平移到指定的位置（阜陽附近）
單擊地圖右上角的箭頭按鈕，使地圖無旋轉(zhuǎn)
單擊重置按鈕，地圖回到初始狀態(tài)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS結(jié)合WebSocket實現(xiàn)實時雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實現(xiàn)實時、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實際應(yīng)用場景,x需要的可以參考下2023-11-11
fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決
這篇文章主要介紹了fastclick插件導(dǎo)致日期(input[type="date"])控件無法被觸發(fā)該如何解決,需要的朋友可以參考下2015-11-11
淺談javascript:兩種注釋,聲明變量,定義函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript:兩種注釋,聲明變量,定義函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Knockout結(jié)合Bootstrap創(chuàng)建動態(tài)UI實現(xiàn)產(chǎn)品列表管理
這篇文章主要為大家詳細(xì)介紹了Knockout結(jié)合Bootstrap創(chuàng)建動態(tài)UI實現(xiàn)產(chǎn)品列表管理,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了原生JS實現(xiàn)的碰撞檢測功能,涉及javascript鼠標(biāo)事件響應(yīng)及頁面圖形坐標(biāo)位置運算、檢測相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
本篇文章主要是對JS判斷文本框內(nèi)容改變事件的簡單實例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
JavaScript實現(xiàn)購物車圖片局部放大預(yù)覽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript如何通過canvas簡單實現(xiàn)購物車圖片放大預(yù)覽效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03