快捷導(dǎo)航

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

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

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

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

1、新建一個(gè)html頁面，引入ol.js和ol.css文件，然后在body中創(chuàng)建一個(gè)Div標(biāo)簽和4個(gè)Button按鈕，用來實(shí)現(xiàn)地圖的放大、縮小、平移等功能；

2、代碼實(shí)現(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 () {
 //實(shí)例化map對象并加載地圖
 var map = new ol.Map({
 //存放地圖目標(biāo)容器
 target: 'map',
 //加載圖層
 layers: [
 //新建一個(gè)瓦片地圖圖層
 new ol.layer.Tile({
 //瓦片地圖數(shù)據(jù)源
 source: new ol.source.OSM()
 })
 ],
 //初始化視圖
 view: new ol.View({
 //視圖中心點(diǎn)坐標(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();
 //每單擊一次地圖的縮放等級減一，以實(shí)現(xiàn)地圖縮小
 view.setZoom(zoom - 1);
 };
 
 //地圖放大
 document.getElementById("zoom-in").onclick = function () {
 //獲取地圖當(dāng)前視圖
 var view = map.getView();
 //獲取地圖當(dāng)前縮放等級
 var zoom = view.getZoom();
 //每單擊一次地圖的縮放等級加一，以實(shí)現(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è)地圖中心點(diǎn)，實(shí)現(xiàn)平移
 view.setCenter(position);
 };
 
 //地圖重置
 document.getElementById("restore").onclick = function () {
 //重置中心點(diǎn)位置為初始化位置
 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、運(yùn)行結(jié)果

初始化界面

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

JS結(jié)合WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實(shí)現(xiàn)實(shí)時(shí)、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實(shí)際應(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ù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理
這篇文章主要為大家詳細(xì)介紹了Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
原生JS實(shí)現(xiàn)的碰撞檢測功能示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)的碰撞檢測功能,涉及javascript鼠標(biāo)事件響應(yīng)及頁面圖形坐標(biāo)位置運(yùn)算、檢測相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
JS判斷文本框內(nèi)容改變事件的簡單實(shí)例
本篇文章主要是對JS判斷文本框內(nèi)容改變事件的簡單實(shí)例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解
這篇文章主要介紹了微信JS-SDK updateAppMessageShareData安卓不能自定義分享詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
如何使用JS console.log()技巧提高工作效率
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
本篇文章主要介紹了原生JS+Canvas實(shí)現(xiàn)五子棋游戲?qū)嵗?，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06