1.代码与显示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accessible Map</title>
<script src="js/ol/ol-debug.js"></script>
<link rel="stylesheet" href="js/ol/ol.css"/>
</head>
<body>
<div id="map" class="map" tabindex="0" style="width: 95%;height: 670px;"></div>
<div style="position: fixed; top: 10px; right: 20px;">
<button id="zoom-FD">放大</button></br>
<button id="zoom-SX">缩小</button></br>
<button id="zoom-XZ">旋转</button></br>
<button id="zoom-FW">复位</button>
</div>
<div id="XYposition" style="position: fixed; bottom: 20px;left: 600px;"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
wrapX: false
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
}),
//清除地图上默认样式(放大、缩小、旋转按钮等)
attribution: false,
rotate: false,
zoom: false
}),
view: new ol.View({
center: [0, 0],
zoom: 5
})
});
//放大
document.getElementById('zoom-FD').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom + 1);
};
//缩小
document.getElementById('zoom-SX').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(zoom - 1);
};
//复位
document.getElementById('zoom-FW').onclick = function() {
var view = map.getView();
var zoom = view.getZoom();
view.setZoom(5);
var center = view.getCenter();
view.setCenter([0, 0]);
var Rotation= view.getRotation();
view.setRotation(0);
};
//旋转
document.getElementById('zoom-XZ').onclick = function() {
var view = map.getView();
var Rotation= view.getRotation();
view.setRotation(Rotation+Math.PI/30);
};
//添加鼠标定位控件
map.addControl(new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
className: 'custom-mouse-position',
target: document.getElementById('XYposition'),
}));
//添加比例尺控件
map.addControl(new ol.control.ScaleLine());
</script>
</body>
</html>
JS 文件引用可在司马云点击下载,点击链接,下载以下文件并引用;