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

稻田里展望者

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

阅读量777

点赞数

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

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

原文链接：https://blog.csdn.net/Yetian_2000/article/details/119242086

版权

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

86 篇文章 3 订阅

订阅专栏

测绘地理信息技术

18 篇文章 6 订阅

订阅专栏

转载https://blog.csdn.net/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>