TDataView_ui/layerGuid/gridLayer_obj.js

L.canvasLayer = L.GridLayer.extend({
    createTile: function(coords){
//		console.log("createTilea and z:"+z+"a:"+a+"b:"+b);
		var tile = L.DomUtil.create('canvas', 'leaflet-tile');
		var ctx = tile.getContext('2d');
		var size = this.getTileSize()
		tile.width = size.x
		tile.height = size.y
		// 将切片号乘以切片分辨率，默认为256pixel,得到切片左上角的绝对像素坐标
		var nwPoint = coords.scaleBy(size);
		// 根据绝对像素坐标，以及缩放层级，反投影得到其经纬度
		var nw = map2DViewer.map.unproject(nwPoint, z)
//		console.log(tile.width);
		ctx.lineWidth = 1;
		ctx.strokeStyle = 'red';
	    var lstCoord = Math.pow(2, coords.z) - 1;
	    
	    if(coords.z - z <= 1 && coords.z - z >= -1){
//	    	console.log("coords.z: "+ coords.z);
//	    	console.log("z: "+ z);
	    	
	    	if(coords.z == z){		// 同级时直接绘制
		      	ctx.beginPath();
				ctx.moveTo(0, 0);
				ctx.lineTo(size.x-1, 0);
				ctx.lineTo(size.x-1, size.y-1);
				ctx.lineTo(0, size.y-1);
				ctx.closePath();
				ctx.fillStyle = 'rgba(225,225,225,0.5)';
		        ctx.fillRect(0, 0, size.x, 70);
		      	ctx.font = "18px Arial";
		      	ctx.fillStyle = 'black';
		      	ctx.textAlign = 'left';
		      	ctx.fillText(a+'-'+b+'-'+z+'-'+coords.x+'-'+coords.y+'.ptp', 40, 20);
		      	ctx.font = "14px Arial";
		      	ctx.textAlign = 'left';
		     	ctx.fillText('lat: ' + nw.lat.toFixed(6), 40, 40);  // 纬度
		     	ctx.fillText('lon: ' + nw.lng.toFixed(6), 40, 60);  // 经度
	     	}
	    	else{		// 非同级时
	    		var lstCoord = Math.pow(2, coords.z) - 1;
      			if(coords.z - z < 0 && coords.z - z > -2){
      				var mul = Math.pow(2, (z-coords.z));
					for(var i=0;i<mul;i++){
						ctx.moveTo((size.x-1)/mul*i, 0);
						ctx.lineTo((size.x-1)/mul*i, size.y-1);
						ctx.moveTo(0, (size.y-1)/mul*i);
						ctx.lineTo((size.x-1), (size.y-1)/mul*i);
						for(var j=0;j<=mul;j++){
							ctx.fillStyle = 'rgba(225,225,225,0.5)';
					        ctx.fillRect(size.x/mul*j, size.y/mul*i, size.x/mul, 70);
					        ctx.font = "9px Arial";
					        ctx.fillStyle = 'black';
					        ctx.fillText(a+'-'+b+'-'+z+'-'+(coords.x*mul+j)+'-'+(coords.y*mul+i)+'.ptp', size.x/mul*j, size.y/mul*i+20);
						}
						nw = map2DViewer.map.unproject(nwPoint, coords.z);
					    ctx.fillText('lat: ' + nw.lat.toFixed(6), 0, 40);  // 纬度
			     		ctx.fillText('lon: ' + nw.lng.toFixed(6), 0, 60);  // 经度
					}
      			}
		        else{
			      	var bei = coords.z - z;
			        var mi = Math.pow(2, bei);
			        if(coords.x % mi == 0 && coords.y % mi == 0){	// 需要记录的坐标
						ctx.fillStyle = 'rgba(225,225,225,0.5)';
				        ctx.fillRect(0, 0, size.x, 70);
				      	ctx.font = "18px Arial";
				      	ctx.fillStyle = 'black';
				      	ctx.textAlign = 'left';
				      	ctx.fillText(a+'-'+b+'-'+z+'-'+coords.x/mi+'-'+coords.y/mi+'.ptp', 40, 20);	// 仅适用于放大一级
				      	ctx.font = "14px Arial";
				      	ctx.textAlign = 'left';
						nw = map2DViewer.map.unproject(nwPoint, coords.z);
				      	ctx.fillText('lat: ' + nw.lat.toFixed(6), 40, 40);  // 纬度
		     			ctx.fillText('lon: ' + nw.lng.toFixed(6), 40, 60);  // 经度
			      	}
			        if(coords.y % mi == 0){
			      		ctx.moveTo(0, 0);
						ctx.lineTo(size.x-1,0);
			        }
			        if(coords.x % mi == 0){
			      		ctx.moveTo(0, 0);
			      		ctx.lineTo(0,size.y-1);
			        }
			        if(coords.y == lstCoord){
			      		ctx.moveTo(0,size.y-1);
			      		ctx.lineTo(size.x-1,size.y-1);
			        }
			    }
			}
	    }
		ctx.stroke();
		return tile;
	}
});

L.control.createTilePackage = function(options){
	map2DViewer.map.removeLayer(cl_start);
	map2DViewer.map.setZoom(z);
//	console.log(z);
	cl_start = new L.canvasLayer;
	cl_start.addTo(map2DViewer.map);
}

// 自定义空间范围
L.control.fitBds = function(crds,z){
//	console.log("getz:"+z);
	var latlngs = [
	    [crds[2], crds[0]],
	    [crds[3], crds[0]],
	    [crds[3], crds[1]],
	    [crds[2], crds[1]]
	];
	map2DViewer.map.removeLayer(polygon);
	polygon = L.polygon(latlngs, {color: 'blue'}).addTo(map2DViewer.map);
	// zoom the map to the polygon
	map2DViewer.map.fitBounds(polygon.getBounds(),{maxZoom:parseInt(z)}).setZoom(z);
	mCrd = [
		crds[0],crds[2],crds[1],crds[3]
	];
	mz = z;
}

L.control.request = function(fileName, tiles){
	var lgPopUp_total = document.querySelector('.lgPopUp_total');
	var lgPopUp_none = document.querySelector('.lgPopUp_none');
	var blackBoard = document.querySelector('.blackBoard');
	var tileType = document.querySelector('.lgPopUp_total .tileType');
	var tileSize = document.querySelector('.lgPopUp_total .tileSize');
	var loading = document.querySelector('.lgPopUp_total img');
	var esc = document.querySelector('.lgPopUp_total .esc');
	var qd = document.querySelector('.qd');
//	esc.innerHTML = "取消";
//	loading.style.display = "block";
	console.log(tiles);
	console.log(tiles.length);
	var xhr1,xhr2;
	if(tiles.length == 1){
		xhr1 = ajax({
	        url: config.countServer+"/tileSizeData/"+fileName+"/"+tiles,              //请求地址
	        type: "GET",
	        dataType: "json",
	        success: function (response, xml) {
	        	loading.style.display = "none";
	        	esc.innerHTML = "确定";
	            var str = JSON.parse(response); 
	            console.log(str[0].data[0]);
	            console.log(str[0].data[0].size);
	            if(!str[0].data[0].size){
	            	lgPopUp_none.style.display = "block";
	            	lgPopUp_total.style.display = "none";
	            	blackBoard.style.display = "block";
	            }
	            else{
	            	lgPopUp_total.style.display = "block";
					blackBoard.style.display = "block";
					loading.style.display = "none";
					tileType.innerHTML = fileName;
					tileSize.innerHTML = str[0].data[0].size;
//	            	alert("当前数据包大小为："+str[0].data[0].size);
	            }
	        },
	        fail: function (status) {
	        	loading.style.display = "none";
	            console.log("get data err");
	        }
	    });
	}
	if(tiles.length > 1){
	    xhr2 = ajax({
	        url: config.countServer+"/tileSizeData/"+fileName+"/",              //请求地址
	        type: "POST",
	        data: { "ptplist": JSON.stringify(tiles)},
	        dataType: "json",
	        success: function (response, xml) {
	            esc.innerHTML = "确定";
	            loading.style.display = "none";
	            var str = JSON.parse(response); 
	//          console.log(str);
	//          console.log(str.total);
				if(str.total == -1){
	            	lgPopUp_none.style.display = "block";
	            	blackBoard.style.display = "block";
	            	lgPopUp_total.style.display = "none";
	            }
	            else{
	            	lgPopUp_total.style.display = "block";
					blackBoard.style.display = "block";
//	            	alert("当前数据包总大小为："+str.total);
	            	tileType.innerHTML = fileName;
					tileSize.innerHTML = str.total;
	            }
	        },
	        fail: function (status) {
	        	loading.style.display = "none";
	            console.log("post data err");
	        }
	    });
	}
	
	esc.onclick = function(){
		if(esc.innerHTML == "取消"){
//			xhr1.abort();
			xhr2.abort();
			esc.innerHTML = "确定";
		}
		if(esc.innerHTML == "确定"){
			lgPopUp_total.style.display = "none";
			blackBoard.style.display = "none";
		}
	}
	
	qd.onclick = function(){
		lgPopUp_none.style.display = "none";
		blackBoard.style.display = "none";
	}
}

L.control.showNameList = function(mcrd,mz){
	console.log(mcrd)
	var merc = new SphericalMercator({
	    size: 256
	});
	var minX = merc.xyz(mcrd, mz).minX;
	var maxX = merc.xyz(mcrd, mz).maxX;
	var minY = merc.xyz(mcrd, mz).minY;
	var maxY = merc.xyz(mcrd, mz).maxY;
	var nameList = new Array();
	var tileList = new Array();
	for(var i=minX;i<=maxX;i++){
		for(var j=minY;j<=maxY;j++){
			nameList.push(a+"-"+b+"-"+z+"-"+i+"-"+j+".ptp");
			tileList.push(a+"-"+b+"-"+z+"-"+i+"-"+j);
		}
	}
	var contents = "<h3>包名列表：</h3>" +'<div class="list"><p>'+ nameList.join('</p><p>'
	) + '</p></div><div class="close">×</div>';
	
	var options = "<div class='calculation'><label>选择瓦片类型</label><select id='choose'>"+
	"<option>r_dtt_dem</option>"+
	"<option>r_google_hybrid</option>"+
	"<option>r_google_satellite</option>"+
	"<option>r_google_street</option>"+
	"<option>r_google_terrain</option>"+
	"</select><div><button title='计算包总大小'>计算</button></div></div>";

	document.querySelector('.lgPopUp').innerHTML = contents+options;
	document.querySelector('.lgPopUp').style.display = "block";
	document.querySelector('.close').onclick = function(){
		document.querySelector('.lgPopUp').style.display = "none";
	}
//	console.log("minX: "+merc.xyz(mcrd, mz).minX);
//	console.log("maxX: "+merc.xyz(mcrd, mz).maxX);
//	console.log("minY: "+merc.xyz(mcrd, mz).minY);
//	console.log("maxY: "+merc.xyz(mcrd, mz).maxY);
	
	var cal = document.querySelector('.calculation button');
	cal.onclick = function(){
		var myselect=document.getElementById("choose");
		var index=myselect.selectedIndex; // selectedIndex代表的是你所选中项的index
	//	myselect.options[index].value;
		var fileName = myselect.options[index].text;
		L.control.request(fileName, tileList);
		
		var lgPopUp_total = document.querySelector('.lgPopUp_total');
		var blackBoard = document.querySelector('.blackBoard');
		var tileType = document.querySelector('.lgPopUp_total .tileType');
		var tileSize = document.querySelector('.lgPopUp_total .tileSize');
		var loading = document.querySelector('.lgPopUp_total img');
		var esc = document.querySelector('.lgPopUp_total .esc');
		lgPopUp_total.style.display = "block";
	    blackBoard.style.display = "block";
	    tileType.innerHTML = fileName;
	    loading.style.display = "block";
	    esc.innerHTML = "取消";
	    tileSize.innerHTML = "";
	}
}