TDataView_ui/layerGuid/gridLayer.js

define([
    'html!lgDir/gridLayer',
    'css!lgDir/gridLayer'
], function(tplLayout) {
// L.ZoomViewer = L.Control.extend({
// 	onAdd: function(){
// 		var gauge = L.DomUtil.create('div');
// 		gauge.style.width = '30px';
// 		gauge.style.background = 'rgba(255,255,255,1)';
// 		gauge.style.textAlign = 'center';
// 		gauge.style.margin = '77px 0 0 12px';
// 	    gauge.style.height = '30px';
// 	    gauge.style.fontSize = '20px';
// 	    gauge.style.lineHeight = '30px';
// 		map.on('zoomstart zoom zoomend', function(ev){
// 			gauge.innerHTML = map.getZoom();
// 		})
// 		return gauge;
// 	}
// });
	var a = 0,b = 9,z = 0;
	function init(){
		if($(".tools-layerGrid").hasClass("cur")){
			$("#rule").show();
		} else{
			$("#rule").hide();
			if(cl_start){
				map2DViewer.map.removeLayer(cl_start);
				map2DViewer.map.removeLayer(polygon);
			}
			
		}
		// $("#rule").show();
	}
	
	ONEMAP.C.publisher.subscribe(fullMap, 'layout::fullMap');
	$("body").append(tplLayout);
	$("#rule h2").dragmove($("#rule"));
	// 全屏
	function fullMap(option){
		if(option){
            $("#rule").hide();
		}else{
            $("#rule").show();
		}
	}
	
	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>包名列表<div class="close">×</div></h3>' +'<div class="list"><p>'+ nameList.join('</p><p>'
		) + '</p></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>";
		var shuchu = '<button class="output">输出</button>';
		// document.querySelector('.lgPopUp').innerHTML = contents+options;
		document.querySelector('.lgPopUp').innerHTML = contents+shuchu;
		document.querySelector('.lgPopUp').style.display = "block";
		document.querySelector('.close').onclick = function(){
			document.querySelector('.lgPopUp').style.display = "none";
		}

		document.querySelector('.lgPopUp .output').addEventListener('click', saveFile);
		$(".lgPopUp .close").off("click").on("click",function(){
			$(".lgPopUp").html("").hide();
		})
	//	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 = "";
		// }
	}
	// require(['lgDir/gridLayer_obj'],function(){
	// 	console.log("obj");
	// 	bindEvents();
	// })
	// function bindEvents(){
		var cl_start = new L.canvasLayer;
		cl_start.addTo(map2DViewer.map);
		// polygon
		var polygon = L.polygon([
			[0, 0],[0, 0],[0, 0],[0, 0]
		], {color: 'trasparent'}).addTo(map2DViewer.map);
		var rule = document.querySelector('#rule .rule');		// 分包规则
		var levelSelect = document.querySelectorAll('#rule .level select');	// 分包级别（总）
		var diyBtn = document.querySelector('#rule .diyRules button');	// 确定自定义规则
		var showGridBtn = document.querySelector('#rule .showGrid');	// 显示网格
		var showRangeBtn = document.querySelector('#rule .showRange');	// 显示空间范围
		var rangeInput = document.querySelectorAll('#rule .range input');	// 显示空间范围
		var generateListBtn = document.querySelector('#rule .generateList');	// 生成包名列表
		var activeBag = [[0,9,0],[10,14,7],[15,19,11]];		// 旧分包规则
		var diyRules,scale,mz;		// 自定义规则等
		var mCrd = new Array();	// 包名列表参数

		$('#rule .closeRule,.leaflet-contextmenu-item:contains("清空地图")').off("click").on("click",function(){
			map2DViewer.map.removeLayer(cl_start);
			$("#rule").hide();
			map2DViewer.map.removeLayer(polygon);
			$("#topBar .total-content .tools-layerGrid").removeClass("cur");
		})
		// $('.leaflet-contextmenu-item:contains("清空地图")').off('click', gridClear).on('click', gridClear)
		rule.onchange = function(){
			var grade = rule.options[rule.selectedIndex].value;		// 当前所选规则
			for(var i=0;i<levelSelect.length;i++){
				levelSelect[i].classList.remove("active");
			}
			switch(parseInt(grade)){
				case 0: 
					document.querySelector('.oldLevel').classList.add("active");
					document.querySelector('.diyRules').style.display = "none";
					document.querySelector('.level').style.display = "block";
					activeBag = [[0,9,0],[10,14,7],[15,19,11]];		// 旧分包规则
					diyRules = "";
					break;
				case 1: 
					document.querySelector('.newLevel').classList.add("active");
					document.querySelector('.diyRules').style.display = "none";
					document.querySelector('.level').style.display = "block";
					activeBag = [[0,7,0],[8,11,3],[12,15,7],[16,19,11],[20,22,15]];		// 新分包规则	
					diyRules = "";
					break;
				case 2: 
					document.querySelector('.diyRules input').value = "";
					document.querySelector('.diyRules').style.display = "inline-block";
					document.querySelector('.level').style.display = "none";
					activeBag = document.querySelector('.diyRules input').value.replace(/[\ |\[|\]]/g,"");		// 自定义分包规则
					statu = 2;
					break;
			}
		}
		diyBtn.onclick = function(){
			diyRules = document.querySelector('.diyRules input').value;	// 自定义规则
			if(diyRules == ""){
				alert("请输入自定义规则");
			}
			else{
				var checkStatu = true;
				diyRules = diyRules.replace(/[\ |\[|\]]/g,"").split(",");
						console.log("diyRules:"+diyRules);
				if(diyRules.length % 3 != 0){
					alert("自定义规则位数不正确或格式有误，请检查");
					checkStatu = false;
				}
				for(var j=0;j<diyRules.length;j++){
					if(isNaN(diyRules[j])){
						checkStatu = false;
						alert("自定义规则有误，请检查格式");
						break;
					}
				}
				for(var m=1;m<diyRules.length-2;m+=3){
					if(diyRules[m]-diyRules[m+2] != -1){
						checkStatu = false;
						alert("自定义规则分包有误，请检查数值");
						break;
					}
				}
				if(checkStatu){
					document.querySelector('.diyLevel').innerHTML = "";
					for(var i=2;i<diyRules.length;i+=3){
						var opt = document.createElement('option');
						var t = diyRules[i-2]+"-"+diyRules[i-1]+"-"+diyRules[i];
						opt.innerHTML = t;		// 新级别名称
						opt.value = diyRules[i];	// 赋值value方便显示
						document.querySelector('.diyLevel').appendChild(opt);
					}
					document.querySelector('.diyLevel').classList.add("active");
					document.querySelector('.level').style.display = "block";
				}
			}
		}
		showGridBtn.onclick = function(){
			var levelAct = document.querySelector('.level .active');
			z = levelAct.options[levelAct.selectedIndex].value;	// 所选分包级别
			for(var i=0;i<activeBag.length;i++){
				if(activeBag[i][2] == z){
					a = parseInt(activeBag[i][0]);
					b = parseInt(activeBag[i][1]);
				}
			}
			if(diyRules != "" && diyRules != undefined){
				console.log(diyRules);
				activeBag = diyRules;
				if(diyRules == undefined){
					alert("请输入分包范围");
				}
				for(var i=2;i<activeBag.length;i+=3){
					if(activeBag[i] == z){
						a = parseInt(activeBag[i-2]);
						b = parseInt(activeBag[i-1]);
					}
				}
			}
			console.log("a:"+a);
			console.log("b:"+b);
		//	console.log("base:"+z);
			scale = L.control.createTilePackage(z,a,b);
		}
		showRangeBtn.onclick = function(){
			var levelAct = document.querySelector('.level .active');
			var z = levelAct.options[levelAct.selectedIndex].value;	// 所选分包级别
			var crds = new Array();		// 传入的坐标
			var stat = true;
			var lng1 = parseFloat(document.querySelector('.lng1').value);
			var lng2 = parseFloat(document.querySelector('.lng2').value);
			var lat1 = parseFloat(document.querySelector('.lat1').value);
			var lat2 = parseFloat(document.querySelector('.lat2').value);
			for(var i=0;i<rangeInput.length;i++){
				if(rangeInput[i].value == "" || isNaN(rangeInput[i].value)){
					alert("请输入完整坐标（数字）");
					crds = "";
					stat = false;
					break;
				}
			}
			if(stat){
				if(lng1 > 180 || lng1 < -180 || lng2 > 180 || lng2 < -180){
					alert("请输入正确的经度范围，合法取值范围为：经度[-180,180]");
					stat = false;
				}
				else if(lng2 <= lng1){
					alert("请输入正确的经度范围，右下角经度须大于左上角经度");
					stat = false;
				}
				else if(lat1 > 90 || lat1 < -90 || lat2 > 90 || lat2 < -90){
					alert("请输入正确的纬度范围，合法取值范围为：纬度[-90,90]");
					stat = false;
				}
				else if(lat1 <= lat2){
					alert("请输入正确的纬度范围，左上角纬度必须大于右下角纬度");
					stat = false;
				}
				else{
					crds.push(lng1,lng2,lat1,lat2);
				}
			}
			
			if(crds.length == 4){
				L.control.fitBds(crds,z);
			}
		//	console.log(crds);
		}
		
		generateListBtn.onclick = function(){
			if(mCrd == ""){
				alert("请先显示空间范围");
			}
			else{
				L.control.showNameList(mCrd,mz);
			}
		}

	function fakeClick(obj) { 
	　　var ev = document.createEvent("MouseEvents");
　　　　ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
　　　　obj.dispatchEvent(ev);
　　}

　　function exportRaw(name, data) {
　　　　var urlObject = window.URL || window.webkitURL || window;
　　　　var export_blob = new Blob([data]);
　　　　var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
　　　　save_link.href = urlObject.createObjectURL(export_blob);
　　　　save_link.download = name;
　　　　fakeClick(save_link);
　　}

　　function saveFile(){
　　　　var pv  = document.querySelectorAll('.lgPopUp div.list p');
		var mobileCode = '';
		for(var i=0;i<pv.length;i++){
			mobileCode+=pv[i].innerHTML+",";
		}
		// console.log(mobileCode);
		var v = IEVersion();
		if(v == 'ie' || v == 'Edge'){
			var fileObj = new Blob([mobileCode],{type:'json/application'});
			// ////console.log(fileObj);
			window.navigator.msSaveBlob(fileObj,'包名列表.csv');
		} else if(v == '-1'){
			var file = new File([mobileCode], '包名列表.csv', { type: "text/plain;charset=utf-8" });
			saveAs(file);
		}
// 　　　　exportRaw('包名列表.csv', mobileCode);
　　}

//判断是否是IE浏览器，包括Edge浏览器 
function IEVersion() { 
	var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
	var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE浏览器 
	var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 
	if(isIE) {  
		return "ie";
	} else if(isEdge) { 
		return "Edge"; 
	} else{ 
		return "-1";//非IE 
	} 
}

	// }
return ONEMAP.M.GridLayer = {
    init: init,
};
})