山东大学项目实训4

最新推荐文章于 2024-09-16 08:47:17 发布

顾小桐

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量71

点赞数

分类专栏：智慧环保：城市空气质量预测系统专栏文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51523159/article/details/125165676

版权

智慧环保：城市空气质量预测系统专栏专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用HTML5画布和地图瓦片技术高效绘制大量数据的空气质量栅格图。通过构建和绘制栅格，实现了根据经纬度定义的矩形区域颜色填充，以颜色梯度或区间颜色显示数据值。这种方法解决了传统地图画矩形在大数据量时的性能问题，提高了绘图效率。

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

1、学习栅格图

主要参考了 http://desktop.arcgis.com/zh-cn/arcmap/10.3/manage-data/raster-and-images/what-is-raster-data.htm对栅格图的定义进行了解
一般用一个矩形的左下角的经纬度和右上角经纬度定义一个栅格，并使用颜色呈现栅格内容。
数据量不大的时候，使用地图的画矩形方法就能简单地呈现栅格，但是不适合空气质量检测平台中大量数据的呈现。
因此，本控件使用HTML5画布绘制图片的方式解决创建矩形对象造成的性能开支，并支持按地图瓦片的粒度并行生成栅格图片，提高绘图效率。

2、构建栅格图

//绘制整个地图
    //data:栅格数据，为二维数据，格式为[[最小经度,最小纬度,最大经度,最大纬度,栅格的值]]
    draw: function (data) {

        if (this.colorThresholds.length == 0) { return; }

        var canvas = $('<canvas width=' + this.map.width + ' height=' + this.map.height + ' "></canvas>')
        var context = canvas[0].getContext("2d");

        var $this = this;
        $.each(data, function (i, item) {
            $this.drawGrid(item, context, { x: 0, y: 0 }, { x: 0, y: 0 });
        });

        this.imageLayer = new BMap.GroundOverlay(this.map.getBounds());
        this.imageLayer.setImageURL(canvas[0].toDataURL());
        this.imageLayer.OverlayType = 'GridLayer';
        this.map.addOverlay(this.imageLayer);


    },
    //绘制栅格
    drawGrid: function (arr, cxt, nePixel, swPixel) {

        var color = "";
        if (this.colorMode == "gradient") {
            //获取渐变颜色
            var rangValue = this.getRangeValue(arr[4]);
            color = Color.getGradientColor(this.gradientTresholds, rangValue);
        } else {
            //获取区间颜色
            color = Color.getColor(this.colorThresholds, arr[4]);
        }

        cxt.fillStyle = color;
        cxt.globalAlpha = this.opacity;

        var minLng = arr[0];
        var minLat = arr[1];
        var maxLng = arr[2];
        var maxLat = arr[3];

        var sw = this.map.pointToPixel(new BMap.Point(minLng, minLat));//左下
        var se = this.map.pointToPixel(new BMap.Point(maxLng, minLat));//右下
        var ne = this.map.pointToPixel(new BMap.Point(maxLng, maxLat));//右上
        var nw = this.map.pointToPixel(new BMap.Point(minLng, maxLat));//左上
        var w = ne.x - nw.x;
        var h = sw.y - nw.y;
        cxt.fillRect(nw.x - swPixel.x, nw.y - nePixel.y, w, h);
    },