openlayers-放大、缩小级别

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),

主要内容为上述三行代码,下面是一个完整的案例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图+oltitle>
    <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>

  • 未添加
    openlayers-放大、缩小级别_第1张图片
  • 添加

你可能感兴趣的:(map,JavaScript)