Openlayers图片资源source里的imageCanvas里的canvasFunction属性回调函数

最新推荐文章于 2024-05-20 15:41:05 发布

supertree_l

最新推荐文章于 2024-05-20 15:41:05 发布

阅读量3k

点赞数 1

分类专栏： Openlayers

本文链接：https://blog.csdn.net/supertree_l/article/details/81541610

版权

本文深入探讨了OpenLayers中图片资源Source的imageCanvas使用，重点解析了canvasFunction回调函数的工作原理及其在自定义图片渲染过程中的关键作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加一个Canvas图层</title>
<script type="text/javascript" src="../build/ol-debug.js" ></script>
<link rel="stylesheet" href="../css/ol.css" />
</head>
<body>
<div id="map" class="map"></div>
<script>
var isFirst=true;//是否第一次加载该canvas图层

//为ImageCanvasLayer创建数据源
//ImageCanvas有一个canvasFunction属性,其值是一个回调函数
var imageCanvas=new ol.source.ImageCanvas({
    //创建回调函数如下
    canvasFunction:render({log:10,lat:20});
});

function render(data){
    //参数1:extent array 左下角投影坐标与右上角投影坐标
    //参数2:resolution 要生产图像的分辨率
    //参数3:设备像素比
    //参数4:图像实际大小
    //参数5:投影
    return function(extent, resolution, pixelRatio, size, projection){
     //每次的范围变动都会引起重绘，从而触发该回调函数，
        var [width, height] = size; //画布尺寸
        v