webgis原理剖析系列-以openlayers为例 -03以 canvas来绘制地图，并绘制到固定的区域

上一节写到用canvas来绘制地图，但是没有画成与demo一致的效果。起初观察感觉是用的padding或者margin什么的。后来看代码发现canvas的宽高与map承载元素的宽高相同。因此学习了如何用js来获取元素的宽高，并赋值给canvas。为了让元素居中，动态计算canvas的绘制点，并实现了在横轴方向上的重复。（这里即可开放一个参数，是否重叠绘制，也就是warpX）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 800px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script >
    var oDiv=document.getElementById("map")

    var disTop=(oDiv.offsetHeight-256*1)/2
    //oDiv.style.paddingTop=disTop
    //console.log()
    var canvas = document.createElement('canvas');
    oDiv.appendChild(canvas);
    canvas.id="myCanvas"
   // console.log(oDiv.getBoundingClientRect().width)
    canvas.width=oDiv.getBoundingClientRect().width
    canvas.height=oDiv.getBoundingClientRect().height
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "https://c.tile.openstreetmap.org/0/0/0.png";
    console.log(disTop)
    img.onload = function(){
        for(let i=0;i<=canvas.width/256;i++){
            ctx.drawImage(img,i*256, disTop);
        }

    };

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

实际的效果有一点差异，就是在缩小窗口后，再刷新网页，再放大网页，右边的部分没有绘制，因此我们需要监听窗口是否变化这个事件，每次改变都重新计算宽高，并重新绘制。下一节考虑在vue中进行开发了，因为双向绑定可以取消很多逻辑判断。

监听窗口改变事件，进行重新设置canvas的宽高，再进行重绘。

window.onresize = function(){
    canvas.width=oDiv.getBoundingClientRect().width
    canvas.height=oDiv.getBoundingClientRect().height
    for(let i=0;i<=canvas.width/256;i++){
        ctx.drawImage(img,i*256, disTop);
    }
}

本来想着可能会在一个区域重复绘制，但是实际上canvas再重新绘制时，

将之前绘制的图片清空了。因为由于canvas每当高度或宽度被重设时,画布内容就会被清空。因此不用再刻意去清空了

webgis原理剖析系列-以openlayers为例 -03以 canvas来绘制地图，并绘制到固定的区域

相关推荐