WebGIS 在html页面上拼接瓦片地图

稻田里展望者

已于 2022-05-25 00:27:13 修改

阅读量909

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端技术测绘地理信息技术文章标签： html js GIS canvas

于 2022-03-13 14:18:10 首次发布

原文链接：https://blog.youkuaiyun.com/Yetian_2000/article/details/119242086

Web前端技术同时被 2 个专栏收录

86 篇文章

订阅专栏

测绘地理信息技术

18 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素来拼接瓦片地图，并为地图命名。代码示例中展示了通过遍历瓦片坐标，加载图片并设置位置，最终在Canvas上绘制出地图的过程。同时，提供了点击事件处理函数以获取点击位置坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载https://blog.youkuaiyun.com/Yetian_2000/article/details/119242086
代码主要参考上面链接的这篇博客

在html上凭借瓦片地图,主要借助canvas控件
同时, 要给瓦片地图进行命名, 如图下所示
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瓦片地图拼接</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
</head>
<body>
    <canvas id="mapcv" width="1400" height="1050" style="border:1px solid green;" onclick="actiondeal(event)"></canvas>
</body>
    <script>
        let mapcv = document.getElementById("mapcv");
        let myctx = mapcv.getContext("2d");
        arrx=['x1','x2','x3','x4'];
        arry=['y1','y2','y3','y4'];
        let TitlesArry = []
        for(let i=0;i<arrx.length;i++){
            for(let j=0;j<arry.length;j++){
                let beauty = new Image();
                beauty.src = "Map2/"+(arrx[i])+(arry[j])+".png"
                let TitleImg={
                    img:null,
                    x:0,
                    y:0
                };
                TitleImg.img=beauty;
                TitleImg.x=TitleImg.x+256*i;
                TitleImg.y=TitleImg.y+256*j;
                TitlesArry.push(TitleImg);
                TitleImg.img.onload = function(){
                    console.log(TitleImg.img,TitleImg)
                    myctx.drawImage(TitleImg.img, TitleImg.x, TitleImg.y);
                }
            }
        }
        function actiondeal(e){
            console.log(e.offsetX)
            console.log(e.offsetY)
        }
    </script>
</html>