通过地图图片切片简易实现热力地图数据可视化
在 canvas.html 使用 vscode 右键开启 live server (需安装 live server 插件)
1 替换图片,绑定图片的上左下右边界数据信息 至 ratioGeoPixelData 对象
1.1 自行通过 drawLine 方法对齐边线 获得 lonPixelLeft ratioLonPixelRight ratioLatPixelTop ratioLatPixelBottom 数据
1.2 使用如下方法得到上左下右边界数据信息 替换 ratioGeoPixelData 对象 数据
//经纬度比例数据
var ratioLonPixelLeft = lonPixelLeft / canvas2.width;
var ratioLonPixelRight = lonPixelRight / canvas2.width;
var ratioLatPixelTop = latPixelTop / canvas2.height;
var ratioLatPixelBottom = latPixelBottom / canvas2.height;
console.log("经纬度范围比例数据: ", ratioLonPixelLeft, ratioLonPixelRight, ratioLatPixelTop, ratioLatPixelBottom);
2.绑定对应经纬度数据的上左下右边界 至 geoData 对象
在地图中选定经纬度信息
3.替换对象 dotData 数据源
当前仅支持点数据可视化 地图图片为墨卡托投影
若图片边界数据和经纬度边界数据正确
可达到基本无误差