<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>openlayers上下左右以及复位</title>
<script src="./ol-debug.js"></script>
<link rel="stylesheet" href="../../v6.14.1/css/ol.css">
<style>
</style>
</head>
<body>
<!-- 俩个地图一起展示 -->
<div style="width: 100%;height: 100%;">
<p>第一个地图</p>
<div style="width:50%;height: 300px;" id="map">
</div>
<button id="buttonLeft">左移</button>
<button id="buttonRight">右移</button>
<button id="buttonTop">上移</button>
<button id="buttonBuutom">下移</button>
<button id="buttonCD">移动到西安</button>
<button id="buttonMax">放大</button>
<button id="buttonMin">缩小</button>
<button id="buttonSP">自适配区域</button>
</div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
}),
}),
],
// view
view: new ol.View({
// extent: [108.2845, 34.8945],
center: [116.403598,39.917553],
projection: 'EPSG:4326',
zoom: 10
// 限制最大最小的地图缩放等级
// minZoom: 8,
// maxZoom: 12
}),
})
// 左移地图
document.querySelector('#buttonLeft').addEventListener('click', function () {
var center = map.getView().getCenter()
center[0] -= 50000
map.getView().setCenter(center)
map.render()
})
// 右移地图
document.querySelector('#buttonRight').addEventListener('click', function () {
var centerRight = map.getView().getCenter()
centerRight[0] += 50000
map.getView().setCenter(centerRight)
map.render()
})
// 向上移动
document.querySelector('#buttonTop').addEventListener('click', function () {
var centerTop = map.getView().getCenter();
centerTop[1] += 50000;
map.getView().setCenter(centerTop)
map.render()
})
//向下移动
document.querySelector('#buttonBuutom').addEventListener('click', function () {
var centerButtom = map.getView().getCenter();
centerButtom[1] -= 50000;
map.getView().setCenter(centerButtom);
map.render()
});
// 复位，移动特定的位置
document.querySelector('#buttonCD').addEventListener('click', function () {
map.getView().setCenter(ol.proj.transform([108, 34], "EPSG:4326", "EPSG:3857"))
})
// 放大
document.querySelector('#buttonMax').addEventListener('click', function () {
var maxZoom = map.getView().getZoom()
maxZoom += 1;
map.getView().setZoom(maxZoom)
})
// 缩小
document.querySelector('#buttonMin').addEventListener('click', function () {
var minZoom = map.getView().getZoom()
minZoom -= 1;
map.getView().setZoom(minZoom)
})
// 自适配区域
document.querySelector('#buttonSP').addEventListener('click', function () {
map.getView().fit([120.33944,36.049352, 120.442925,36.126585], map.getSize())
})
</script>
</body>
</html>
