<body>
<div id="map">
<div id="menu">
<button id="zoom_in">放大</button>
<button id="zoom_out">縮小</button>
<button id="panto">移動到“武漢”</button>
<button id="restore">復位</button>
</div>
</div>
<script>
var map=new ol.Map({
target:'map',
layer:[],
view:new ol.View({
center:[12950000,4860000],
zoom:8,
minZoom:6,
maxZoom:12,
rotation:Math.PI/6//設置旋轉角度
})
})
var tileLayer=new ol.layer.Tile({
source:new ol.source.OSM()
});
map.addLayer(tileLayer);
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();
view.setZoom(zoom-1);
}
document.getElementById("zoom_in").onclick=function(){
var view=map.getView();
var zoom=view.getZoom();
view.setZoom(zoom+1);
}
document.getElementById("panto").onclick=function(){
var view=map.getView();
var wh=ol.proj.fromLonLat([114.31667,30.51667]);
view.setCenter(wh);
}
document.getElementById("restore").onclick=function(){
view.setZoom(zoom);
view.setCenter(center);
view.setRotation(rotation);
}
</script>
</body>
