时间戳

首页 > 解决方案 > jQuery kendoUI：地图绘制矩形不起作用

jquery - jQuery kendoUI：地图绘制矩形不起作用

问题描述

剑道 UI v2019.1.220 for jQuery

尝试显示具有不同不透明度值的矩形的世界地图以制作密度分布图。

我尝试做的是这个

    变量数据 = {
        minLat: 0,
        分钟长：-95.98861，
        步骤X：1.12570589，
        步骤Y：0.50980665，
        值：{
            '6:99': {v: 66.09},
            '8:89': {v: 30},
            '6:99': {v: 66.09},
            '8:89': {v: 30},
            '10:89': {v: 15.5},
            '11:81': {v: 3},
            '11:82': {v: 4},
            '11:86': {v: 2.4},
            '11:89': {v: 3},
            '12:80': {v: 18},
            '12:83': {v: 18},
            '12:84': {v: 21.9},
            '14:79': {v: 220.75},
            '14:80': {v: 86.8},
        }
    };
    
    
    
    $("div#whatever").kendoMap({
        缩放：11，
        层数：[
            {
                类型：“形状”
            },
            {
                类型：“瓷砖”，
                urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                子域：[“a”，“b”，“c”]，
                归属：“© OpenStreetMap”
            },
    
        ],
        重置：函数（e）{
            让 map = $("div#whatever").data('kendoMap');
            _drawRects（地图，数据）；
        }
    });
    
    变种颜色=“红色”；
    
    var _drawRects = 函数（地图，信息）{
        让 maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k]) );
        for( 让我进入 info.values ){
            if(info.values.hasOwnProperty(i)){
                让 coor = i.split(':');
                let dim = new kendo.dataviz.geometry.Rect(
                    新的 kendo.dataviz.geometry.Point(info.stepY*coor[1], info.stepX*coor[0]),
                    新 kendo.dataviz.geometry.Size(info.stepX, info.stepY)
                );
                让方 = 新 kendo.dataviz.drawing.Rect(
                    暗淡，
                    {
                        充满： {
                            颜色：颜色，
                            不透明度：1 - info.values[i].v / maxAvg
                        },
                        中风： {
                            颜色：颜色，
                        }
                    }
                );
                map.layers.find(l=>l.options.type==='shape').surface.draw(square);
            }
        }
    };

没有错误，矩形只是没有出现

坐标似乎是有效的，因为如果我用它们来放置标记，它们就可以工作

上面的代码有什么问题？

标签： jquerykendo-uikendo-map

解决方案

修复maxAvg计算处理.v

改变

let maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k]) );

至

let maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k].v) );

并将创建移动.kendoMap到脚本底部，在_drawRects分配功能之后。

推荐阅读