js 如何制作像地图一样的鼠标移动滚轮缩放的图片（蚂蚁金服案例）

程序员文章站 2024-01-19 09:21:58
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" />
    <title>地图图片</title>
    <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.0.0/dist/l7.min.js"></script>
<script>
    var scene = new L7.Scene({
        id: 'map',
        mapStyle: 'dark', // 样式URL
        center: [121.2680, 30.3628],//地图中心位置
        pitch: 0,//地图起始俯视角度
        zoom: 15,//默认显示比例
        minZoom: 4,//地图最小缩放等级
        maxZoom: 18//地图最大缩放等级
    });
    // 加载图片
    scene.on('loaded', function() {
        scene.ImageLayer().source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', {
            //调整图片坐标位置
            extent: [121.1680, 30.2828, 121.3840, 30.4219]
        }).style({
            opacity: 1.0
        }).render();
        scene.on('click', (ev)=>{// 鼠标左键点击事件
            console.log(ev)
//             lnglat: Object { O: 30.361318858289717, P: 121.24722948208449, lng: 121.247229, … }
//            pixel: Object { x: 476, y: 267 }
//            target: Object { _amap_id: 3, id: 3, CLASS_NAME: "AMap.Map", … }
//            type: "click"
        });
    });
</script>
</body>
</html>