Openlayers實現(xiàn)地圖的基本操作

更新時間：2020年09月28日 11:51:52 作者：桃李不言_下自成蹊

這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)地圖的基本操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Openlayers實現(xiàn)地圖基本操作的具體代碼，供大家參考，具體內(nèi)容如下

1、新建一個html頁面，引入ol.js和ol.css文件，然后在body中創(chuàng)建一個Div標簽和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({
 //存放地圖目標容器
 target: 'map',
 //加載圖層
 layers: [
 //新建一個瓦片地圖圖層
 new ol.layer.Tile({
 //瓦片地圖數(shù)據(jù)源
 source: new ol.source.OSM()
 })
 ],
 //初始化視圖
 view: new ol.View({
 //視圖中心點坐標
 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 () {
 //獲取地圖當前視圖
 var view = map.getView();
 //獲取地圖當前縮放等級
 var zoom = view.getZoom();
 //每單擊一次地圖的縮放等級減一，以實現(xiàn)地圖縮小
 view.setZoom(zoom - 1);
 };
 
 //地圖放大
 document.getElementById("zoom-in").onclick = function () {
 //獲取地圖當前視圖
 var view = map.getView();
 //獲取地圖當前縮放等級
 var zoom = view.getZoom();
 //每單擊一次地圖的縮放等級加一，以實現(xiàn)地圖放大
 view.setZoom(zoom + 1);
 };
 
 //地圖平移
 document.getElementById("panto").onclick = function () {
 //獲取地圖當前視圖
 var view = map.getView();
 //指定要平移到的位置的坐標
 var position = ol.proj.fromLonLat([115.2341, 32.4652]);
 //重設地圖中心點，實現(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、運行結果

初始化界面

單擊縮小按鈕，實現(xiàn)地圖縮小

單擊放大按鈕，實現(xiàn)地圖放大

單擊平移至按鈕，地圖平移到指定的位置（阜陽附近）

單擊地圖右上角的箭頭按鈕，使地圖無旋轉(zhuǎn)

單擊重置按鈕，地圖回到初始狀態(tài)

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS結合WebSocket實現(xiàn)實時雙向通信
WebSocket 是一種在 Web 應用程序中實現(xiàn)實時、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實際應用場景,x需要的可以參考下
2023-11-11
fastclick插件導致日期(input[type="date"])控件無法被觸發(fā)該如何解決
這篇文章主要介紹了fastclick插件導致日期(input[type="date"])控件無法被觸發(fā)該如何解決,需要的朋友可以參考下
2015-11-11
淺談javascript:兩種注釋,聲明變量,定義函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript:兩種注釋,聲明變量,定義函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
Knockout結合Bootstrap創(chuàng)建動態(tài)UI實現(xiàn)產(chǎn)品列表管理
這篇文章主要為大家詳細介紹了Knockout結合Bootstrap創(chuàng)建動態(tài)UI實現(xiàn)產(chǎn)品列表管理,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
原生JS實現(xiàn)的碰撞檢測功能示例
這篇文章主要介紹了原生JS實現(xiàn)的碰撞檢測功能,涉及javascript鼠標事件響應及頁面圖形坐標位置運算、檢測相關操作技巧,需要的朋友可以參考下
2018-05-05
JS判斷文本框內(nèi)容改變事件的簡單實例
本篇文章主要是對JS判斷文本框內(nèi)容改變事件的簡單實例進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
如何使用JS console.log()技巧提高工作效率
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-10-10
本篇文章主要介紹了原生JS+Canvas實現(xiàn)五子棋游戲?qū)嵗?，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06