chuYinKouXian/localEarth/js/common/mapTexture.js

import THREE from 'THREE';
import d3 from 'd3';

var projection = d3.geo.equirectangular()
  .translate([1024, 512])
  .scale(325); 
/* var projection = d3.geo.equirectangular()
  .translate([512, 256])
  .scale(162.5);  当canvas为1024*512时 */
  
var _fixType=function(type) {
	type = type.toLowerCase().replace(/jpg/i, 'jpeg');
	var r = type.match(/png|jpeg|bmp|gif/)[0];
	return 'image/' + r;
};
var saveFile=function(data, filename){
	var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	save_link.href = data;
	save_link.download = filename;
   
	var event = document.createEvent('MouseEvents');
	event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	save_link.dispatchEvent(event);
};
var canvasToImg = function(canvas,download){
	
	// 图片导出为 png 格式
	var type = 'png';
	var imgData = canvas.toDataURL(type);
	
	// 加工image data，替换mime type
	if(download){
		imgData = imgData.replace(_fixType(type),'image/octet-stream');
		// 下载后的图片名
		var filename = '4dage_' + (new Date()).getTime() + '.' + type;
		// download
		saveFile(imgData,filename);
	}
	return imgData;
}

export function mapTexture(geojson, color, lineWidth, lineColor) {
  var texture, context, canvas;

  canvas = d3.select("body").append("canvas")
    .style("display", "none")
    .attr("width", "2048px")
    .attr("height", "1024px");

  context = canvas.node().getContext("2d");

  var path = d3.geo.path()
    .projection(projection)
    .context(context);

  context.strokeStyle = "#112";
  context.lineWidth = 0.1;
  context.fillStyle = color || "#CDB380";

  function draw(i,color){
	  
	var newGeojson = {features:[geojson.features[i]],type:"FeatureCollection"}
	path(newGeojson);
	context.fillStyle = color;
	context.fill();
	context.stroke(); 
  }
  
 
	//路径顺时针为正
    if(geojson.type === "FeatureCollection"){
		var points = [];  
	    var color;
		var len = geojson.features.length;
		/* if(geojson.features[len-1].id == "Europe"){
			draw(len-1,"#aa9");
			len --;
		}   */
	    for(var i=0; i<len; i++){
			context.beginPath();
			 
		    if(geojson.features[i].type2 === "point"){
				
				points.push(i);    //point类型的要过后画最上层，不然会被覆盖。
				continue;
			}	
			draw(i,"#bbb2a3");
		    
	    }
		for(var i=0; i<points.length; i++){
			draw(i,"#aae");
		} 
	  
    }
	else{
		context.lineWidth = lineWidth || 0;
		context.strokeStyle = lineColor || "";
		context.beginPath();
		path(geojson);

		if(color){
			context.fill();
		}
		context.stroke();
	}

	
	

	
	/* var canv = document.createElement('canvas');   //data的含义
	canv.width = 1024; canv.height = 1024;
	var ctx = canv.getContext("2d");
	ctx.strokeStyle = "#112";
    ctx.lineWidth = 1;
	
	ctx.beginPath();
	ctx.moveTo(500,500);
	var last = [500,500];
	for(var i=1;i<data.arcs[175].length; i++){//175
		last = [last[0]+data.arcs[175][i][0],  last[1]+data.arcs[175][i][1]]
		ctx.lineTo(last[0],last[1]); 
	}
	
    ctx.stroke(); */

  

  // DEBUGGING - Really expensive, disable when done.
  // console.log(canvas.node().toDataURL());

  texture = new THREE.Texture(canvas.node());
  texture.needsUpdate = true;
	
  //var c = canvas[0][0];
  //canvasToImg(c,true);
	
  canvas.remove();
 
  return texture;
}




	/*	world.json的src自加的部分：
		620开始，619是示范
		
		蒙古 
		回
		彝
		
	
	*/