界面实现
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);
},