openlayers 放大縮小級別問題
需求
- 在使用鼠標滾輪放大地圖或縮小地圖時層次感太強，想要一個緩慢的縮放流程。或者每次放大0.5倍。
需求理解
- 假設切片地圖的提供方並非本人，而是採用第三方（本文天地圖），那麼就沒有辦法修改切片，所以從切片角度沒有辦法進行操作
- 假設鼠標滾輪滾動一次放大級別增加1（縮放級別減小1），那麼我們是不是可以通過修改鼠標滾輪滾動次數來解決放大縮小問題呢？ 本文采用此方案
代碼
在網上你能夠找到和下面這段代碼一樣的內容， 但是使用後沒有任何效果。
controls: ol.control.defaults({zoomOptions: {delta: 0.5}}),
interactions: ol.interaction.defaults({zoomDelta: 0.5}),
下面這段代碼爲正確可用的！！！
var zoomFactorSize = 5;
zoom: 10*zoomFactorSize,
zoomFactor: Math.pow(3, 1 / zoomFactorSize),
主要內容爲上述三行代碼,下面是一個完整的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高德地圖+ol</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
crossorigin="anonymous"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var gaodeMapLayer = new ol.layer.Tile({
title: "titile",
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=a4ee5c551598a1889adfabff55a5fc27"
})
});
var fa = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Polygon(
[[
[120.22940239501227, 30.146807031535218],
[120.22940239501227, 30.226915680225147],
[120.28948387694587, 30.226915680225147],
[120.28948387694587, 30.146807031535218],
[120.22940239501227, 30.146807031535218],
]]
),
name: 'pg'
})]
}),
});
var fb = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(
[120.25871185675187, 30.16739619707534]
),
name: 'pg'
})]
}),
});
var zoomFactorSize = 5;
var map = new ol.Map({
layers: [gaodeMapLayer, fa, fb],
view: new ol.View({
center: [120.25871185675187, 30.16739619707534],
projection: 'EPSG:4326',
zoom: 10*zoomFactorSize,
zoomFactor: Math.pow(3, 1 / zoomFactorSize),
}),
target: 'map'
});
// 點選地圖用
map.on('singleclick', function (e) {
console.log("當前點選");
console.log("放大級別", map.getView().getZoom());
console.log(map.getEventCoordinate(e.originalEvent));
})
</script>
</body>
</html>
- 未添加
![在這裏插入圖片描述]()
- 添加
![在這裏插入圖片描述]()
