jQuery kendoUI：地图绘制矩形不起作用答案

【问题标题】：jQuery kendoUI: Map drawing rectangles not workingjQuery kendoUI：地图绘制矩形不起作用
【发布时间】：2020-08-20 11:00:31
【问题描述】：

Kendo 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); } } };

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

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

上面的代码有什么问题？

【问题讨论】：

标签： jquery kendo-ui kendo-map

【解决方案1】：

修复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 函数之后。

【讨论】：