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