webgis原理剖析系列-以openlayers为例 -02以 canvas来绘制地图

上一节学习到将图片放置到网页中，观察到ol使用的是canvas，因此去学习了canvas来绘制图片。(目前还没有看到关于什么使用canvas来绘制图片的原因，可能是效率？)

其中绘制的方法有三种，包括直接绘制（可能导致图像显示不全）、指定位置绘制、绘制图片指定区域。

那么显然第二种更适合我们使用。

可以看到，绘制的地图与官网示例的地图是一样的了，区别在于，官网的居中，第二是，在横向repeat。

这些细节问题我们下一节在处理。

使用canvas绘制图片的另一个好处，我们再不用写一大长串的ajax请求了

webgis原理剖析系列-以openlayers为例 -02以 canvas来绘制地图

<!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 canvas = document.createElement('canvas');
    oDiv.appendChild(canvas);
    canvas.id="myCanvas"
    canvas.width=256
    canvas.height=256
    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";
    img.onload = function(){
        //以Canvas画布上的坐标(10,10)为起始点，绘制图像
        ctx.drawImage(img, 0, 0);
    };

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

webgis原理剖析系列-以openlayers为例 -02以 canvas来绘制地图

相关推荐