快捷導(dǎo)航

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 () {
 //獲取地圖當(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();
 //指定要平移到的位置的坐標
 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é)果

初始化界面