如何解决jQuery kendoUI:地图绘制矩形不起作用
适用于jQuery的Kendo UI v2019.1.220
试图显示具有不同不透明度值的矩形的世界地图,以绘制密度分布图。
我试图做的是这个
var data = { minLat: 0,minLong: -95.98861,stepX: 1.12570589,stepY: 0.50980665,values: { '6:99': {v: 66.09},'8:89': {v: 30},'6:99': {v: 66.09},'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({ zoom: 11,layers: [ { type: "shape" },{ type: "tile",urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",subdomains: ["a","b","c"],attribution: "© OpenStreetMap" },],reset: function(e){ let map = $("div#whatever").data('kendoMap'); _drawRects( map,data ); } }); var color = "red"; var _drawRects = function( map,info ){ let maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k]) ); for( let i in info.values ){ if( info.values.hasOwnProperty(i) ){ let coor = i.split(':'); let dim = new kendo.dataviz.geometry.Rect( new kendo.dataviz.geometry.Point( info.stepY*coor[1],info.stepX*coor[0] ),new kendo.dataviz.geometry.Size( info.stepX,info.stepY ) ); let square = new kendo.dataviz.drawing.Rect( dim,{ fill: { color: color,opacity: 1 - info.values[i].v / maxAvg },stroke: { color: color,} } ); map.layers.find(l=>l.options.type==='shape').surface.draw(square); } } };
没有错误,矩形不会出现
坐标似乎是有效的,因为如果我使用它们放置标记,它们将起作用
上述代码有什么问题?
解决方法
修复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
创建到脚本的底部。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。