獲得視圖的中心點坐標,進行調整即可。
ol.Map.render();//request a map render 請求地圖繪制
ol.proj.transform
主要用於坐標轉換,它的第一個參數是ol.Coordinate
類型的坐標,后面兩個參數依次是當前坐標所用的坐標系,及轉換后的坐標所用的坐標系,ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')
就能把EPSG:4326
的坐標[104.06, 30.67]
轉換為EPSG:3857
的坐標。
// 向左移動地圖 function moveToLeft() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的x值增加,即可使得地圖向左移動,增加的值根據效果可自由設定 mapCenter[0] += 50000; view.setCenter(mapCenter); map.render(); } // 向右移動地圖 function moveToRight() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的x值減少,即可使得地圖向右移動,減少的值根據效果可自由設定 mapCenter[0] -= 50000; view.setCenter(mapCenter); map.render(); } // 向上移動地圖 function moveToUp() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的y值減少,即可使得地圖向上移動,減少的值根據效果可自由設定 mapCenter[1] -= 50000; view.setCenter(mapCenter); map.render(); } // 向下移動地圖 function moveToDown() { var view = map.getView(); var mapCenter = view.getCenter(); // 讓地圖中心的y值增加,即可使得地圖向下移動,增加的值根據效果可自由設定 mapCenter[1] += 50000; view.setCenter(mapCenter); map.render(); } // 移動到成都 function moveToChengDu() { var view = map.getView(); // 設置地圖中心為成都的坐標,即可讓地圖移動到成都 view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')); map.render(); } // 放大地圖 function zoomIn() { var view = map.getView(); // 讓地圖的zoom增加1,從而實現地圖放大 view.setZoom(view.getZoom() + 1); } // 縮小地圖 function zoomOut() { var view = map.getView(); // 讓地圖的zoom減小1,從而實現地圖縮小 view.setZoom(view.getZoom() - 1); }