当前位置: 首页 > news >正文

xyz 瓦片leaflet地图组件 显示

<!DOCTYPE html>
<html>
<head>
    <title>XYZ瓦片预览</title>

//引用leaflet  的css 和脚本
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #map { height: 100vh; }
        #info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    background: white;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial;
    font-size: 14px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
    </style>
</head>
<body>
    <div id="map"></div>
<div id="info"></div>
    
    <script>
        // 初始化地图
    const southWest = L.latLng(43, 127.5); // 西南角坐标(纬度, 经度)//请修改
        const northEast = L.latLng(46, 131.28); // 东北角坐标
        const imgBounds = L.latLngBounds(southWest, northEast);
        const map = L.map('map', {
     //       maxBounds: imgBounds,      // 限制地图拖动范围
            maxBoundsViscosity: 1.0    // 完全禁止移出边界
        }).setView([44.519298, 129.389526], 9); // 初始中心点和缩放级别
    
        // 生成的XYZ瓦片层
        L.tileLayer('/v2/slice/{z}/{x}/{y}.png', {
            attribution: 'Your Tile Data',
            minZoom: 4,
            maxZoom: 12,
        noWrap: true,
            tms: false,// 关键参数:声明使用TMS坐标系
    errorTileUrl: createTransparentTile(), // 直接指定透明瓦片URL或Base64
    detectRetina: true
    //  bounds: imgBounds  // 仅在此边界内加载瓦片
        }).addTo(map);
    // 显示地图信息的函数
function updateInfo() {
    const center = map.getCenter();

    const zoom = map.getZoom();
    const bounds = map.getBounds();
    
        
    // 获取当前视图中心的瓦片坐标
    const tileSize = 256; // 标准瓦片大小
    const point = map.project(center, zoom);
    const x = Math.floor(point.x / tileSize);
    const y = Math.floor(point.y / tileSize);
      // 计算中心点像素坐标(相对于地图容器)
    const pixelX = Math.floor(point.x);
    const pixelY = Math.floor(point.y);
    //map.setView([center.lat,center.lng],zoom);
    document.getElementById('info').innerHTML = `
    <strong>影像中心点:</strong><br>
        经纬度: ${center.lat.toFixed(6)}, ${center.lng.toFixed(6)}<br>
        <strong>影像范围:</strong><br>
        西南: ${bounds.getSouthWest().lat.toFixed(4)}, ${bounds.getSouthWest().lng.toFixed(4)}<br>
        东北: ${bounds.getNorthEast().lat.toFixed(4)}, ${bounds.getNorthEast().lng.toFixed(4)}<br>
        <strong>缩放级别:</strong> ${zoom}<br>
        <strong>中心瓦片坐标:</strong> x=${x}, y=${y}
    `;
}
// 生成透明瓦片(Base64编码的1x1透明PNG)
function createTransparentTile() {
    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
}


// 添加地图移动和缩放事件监听
map.on('moveend zoomend', updateInfo);

// 初始化显示信息
updateInfo();

     
    </script>
</body>
</html>

http://www.xdnf.cn/news/87409.html

相关文章:

  • 软考-高项,知识点一览十九 配置和变更管理
  • 低代码破局,助力工业互联网平台迈向智改数转新高地
  • 电脑硬盘丢失怎么找回?解决硬盘数据恢复的2种方法
  • XHTMLConverter把docx转换html报java.lang.NullPointerException异常
  • 【YOLOv8-pose部署至RK3588】模型训练→转换RKNN→开发板部署
  • Mujoco xml < sensor>
  • 转型探讨:未来投资与布局
  • ARP(地址解析协议)
  • 高效UI组件库Kendo UI——赋能企业级Web应用开发
  • 25、简述.NET程序集(Assembly)
  • 基于javaweb的SpringBoot校园失物招领系统设计与实现(源码+文档+部署讲解)
  • [数据结构]树和二叉树
  • 自动化测试基础知识总结
  • Megatron - LM 重要文件解析 - /tools/preprocess_data.py
  • 广州市白云区粤荣职业培训学校副校长余智强获聘广州培训质量督导员
  • PostgreSQL 常用日志
  • 基于国内主流AI工具的视频生成完整流程及工具对比总结
  • 企业战略到数字化落地 —— 第二章 数字化
  • ubuntu的各种工具配置
  • 2021 国考
  • 仓颉造字,亦可造AI代理
  • 网络基础概念(下)
  • 什么是snmp协议?在优雅草星云智控AI物联网监控系统中如何添加设备进行监控【星云智控手册01】-优雅草卓伊凡
  • JavaScript 中的 this 及 this 指向的改变方法
  • 基于SpringBoot的中华诗词文化分享平台-项目分享
  • HarmonyOS:1.7
  • Cursor 设置规则
  • CentOS7 环境配置
  • metasploit(2)生成dll木马
  • 给vue-admin-template菜单栏 sidebar-item 添加消息提示