山东大学项目实训6

最新推荐文章于 2024-08-14 15:45:18 发布

顾小桐

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量89

点赞数

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

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

版权

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

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用百度地图API动态改变地图的透明度，以及实现全图模式下绘制栅格数据的方法。通过监听透明度选择器的改变事件，调用setOptions方法更新地图透明度。全图模式下，首先生成测试数据，然后在canvas上绘制栅格，并使用GroundOverlay展示。关键方法包括pointToPixel进行坐标转换和drawGrid用于绘制已填色的矩形，实现了地图的动态交互和栅格数据的可视化。

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

界面实现

1.透明度设置

根据透明度的对应id（selectOpacity）调用百度地图api中的setOptions（）方法对应改变地图的透明度

//选择透明度
    $('#selectOpacity').change(function () {
        gridMap.setOpacity($(this).val());
        gridMap.clear();
        getGrids();
    });

2、全图模式

//按全屏的方式绘制图片
    if ($('#selectDrawMode').val() == "all") {
        //生成测试数据，一般用ajax获取服务器数据
        testData = generateGrids(gridMap.map.getBounds(), miles);
        var startTime = new Date();
        gridMap.draw(testData);
        console.log("绘制图片耗时:" + (new Date() - startTime) + ",数据量:" + testData.length);
    }

当value值为all时调用以下方法：
通过this.map.width和this.map.height定义的画布的大小，并调用getContext()获取画布的 2D 渲染上下文

//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方法绘制栅格，其中pointToPixel（）是将经纬度转换为覆盖物的像素坐标，使得覆盖物显示在正确的位置上，绘制出已填色的矩形

//绘制栅格
    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);
    },