zhmap = { var active = d3.select(null); var k = 1; var gra_lon = 20; var gra_la = 20; let rotation = [-100, -40]; var projection = d3 .geoOrthographic() .scale(330) .rotate(rotation) .translate([width / 2, height / 2]) .clipAngle(90); var geoGenerator = d3.geoPath().projection(projection); const svg = d3 .select(DOM.svg(width, height)) .attr("id", "ditu") .style("width", "100%") .style("height", "auto"); const layers = svg.append("g").attr("class", "layers"); const sph = layers.append("g").attr("id", "sph"); const mond = layers.append("g").attr("id", "mond"); const kars = layers.append("g").attr("id", "kars"); const provi = layers.append("g").attr("id", "prov"); const prefe = layers.append("g").attr("id", "pref"); const dis = layers.append("g").attr("id", "dis"); var gra = layers.append("g").attr("id", "gra"); const equa = layers.append("g").attr("id", "equa"); const canc = layers.append("g").attr("id", "canc"); const capr = layers.append("g").attr("id", "capr"); const gro = layers.append("g").attr("id", "gro"); const zoom = d3 .zoom() .filter(event => { if (event.type === "wheel") { const modifierKeyIsPressed = event.metaKey || event.altKey || event.ctrlKey; return modifierKeyIsPressed; } return true; }) .scaleExtent([1, 300]) .translateExtent([[0, 0], [width, height]]) .on("zoom", zoomed) .on("zoom", (event, d) => { k = event.transform.k; if (k <= 2) { gra_lon = 20; gra_la = 20; } else if (k <= 5) { gra_lon = 10; gra_la = 10; } else if (k <= 20) { gra_lon = 5; gra_la = 5; } else if (k <= 50) { gra_lon = 2; gra_la = 2; } else if (k <= 100) { gra_lon = 1; gra_la = 1; } k > 5 ? prefe.selectAll("path").attr("visibility", "visible") : prefe.selectAll("path").attr("visibility", "hidden"); k < 2 ? provi.selectAll("path").attr("stroke-width", 0) : provi.selectAll("path").attr("stroke-width", 0.4 / k); k > 5 ? kars.selectAll("path").attr("visibility", "hidden") : kars.selectAll("path").attr("visibility", "visible"); k < 12 ? dis.selectAll("path").attr("visibility", "hidden") : ""; gro.selectAll("path").attr("d", geoGenerator.pointRadius(1 / k)); d3.select("body") .selectAll(".graticule") .remove(); layers.attr("transform", event.transform); makescalegra(); d3.select("body") .selectAll(".graticule") .style("stroke-width", 0.2 / k); d3.select("body") .selectAll(".district") .style("stroke-width", 0.2 / k); console.log(k); return k; }); function zoomed(event) { const { transform } = event; layers.attr("transform", transform); layers.attr("stroke-width", 1 / transform.k); } function reset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } var divtooltip = d3 .select("body") .append("div") .style("position", "absolute") //.attr("id", "divtooltip") .style("visibility", "hidden") .attr("class", "tooltip bs-tooltip-right") .style("opacity", 1); var popup = d3 .select("body") .append("div") .style("position", "absolute") .attr("id", "popup") .style("visibility", "hidden"); const locator = function(event, d, t) { var latlon = projection.invert(d3.pointer(event)); d3.select("#infocoord").text( latlon[1].toFixed(4) + " ° N " + latlon[0].toFixed(4) + " ° E " ); d3.select("#coo").text( latlon[1].toFixed(4) + " ° N " + latlon[0].toFixed(4) + " ° E " ); }; function particle(event, x, y) { svg .append("circle") .attr("transform", event.transform) .attr("cx", x) .attr("cy", y) .attr("r", 1e-3) .style("stroke", "red") .style("stroke-opacity", 1) .style("fill", "none") .style("fill-opacity", 0) .transition() .duration(3000) .ease(Math.sqrt) .attr("r", 100) .style("stroke-opacity", 1e-6) .remove(); } const sphe = function() { sph .append("path") .attr("d", geoGenerator(sphere)) .attr("stroke", "grey") .attr("fill", "rgba( 56, 113, 169, 1.00 )") .attr("fill-opacity", 0.3) .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.5) .on("mouseenter", function(event, d) { d3.select("#infos").text(""); }) .on("mousemove", function(event, d) { locator(event, d, this); divtooltip.style("visibility", "hidden"); }) .on("click", function(event, d) { divtooltip.style("visibility", "hidden"); popup.style("visibility", "hidden"); }); }; const monde = function() { mond .append("path") .datum(topojson.feature(gaia, gaia.objects.land)) .attr("class", "land") .attr("fill", "rgba(240, 240, 240, 1.00)") .attr("fill-opacity", 1) .attr("d", geoGenerator) .on("mouseenter", function(event, d) { d3.select("#infos").text(""); }) .on("mousemove", function(event, d) { locator(event, d, this); divtooltip.style("visibility", "hidden"); }) .on("click", (event, d) => { d3.select("#tooltip").style("visibility", "hidden"); popup.style("visibility", "hidden"); }); }; const karsts = function() { kars .selectAll("path") .data(karst.features) .enter() .append("path") .attr("stroke-width", 0) .attr("class", "kars") .attr("stroke", "purple") .attr("fill", "purple") .attr("fill-opacity", 0.2) .attr("stroke-opacity", 0.2) .attr("d", geoGenerator); }; const prefecture = function() { prefe .selectAll("path") .data(pref.features) .enter() .append("path") .attr("class", "prefect") .attr("visibility", "hidden") .attr("stroke-linejoin", "round") .attr("stroke", "rgba( 130, 58, 76, 1.00 )") .attr("stroke-width", ".05px") .attr("fill", "none") .attr("fill-opacity", 0.3) .attr("d", geoGenerator); }; const province = function() { provi .selectAll("path") .data(prov.features) .enter() .append("path") .attr("stroke-width", 0) .attr("class", "province") .attr("stroke-linejoin", "round") .attr("stroke", "white") //.attr("stroke-width", ".2px") .attr("fill", "grey") .attr("fill-opacity", 0.3) .attr("d", geoGenerator) .on("mouseover", function(event, d) { d3.select(this) .style("fill", "rgba(120,120,120,1)") .attr("fill-opacity", 1); divtooltip .transition() .duration(200) .style("visibility", "visible") .style("opacity", 0.6); divtooltip .html( `

` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mousemove", function(event, d) { d3.select(this); //.style("fill", "rgba(70,70,70,1)") //.attr("fill-opacity", 1); divtooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); locator(event, d, this); d3.select("#infogeo_prov").html( d.properties.NAME_PY + " " + d.properties.NAME_HZ ); d3.select("#infos") .html(d.properties.NAME_PY + " " + d.properties.NAME_HZ) .attr("fill", "rgba(120,120,120,1)") .attr("fill-opacity", 1); d3.select("#infovarious") .html(d.properties.NAME_PY + " " + d.properties.NAME_HZ) .style("color", "rgba(120,120,120,1)"); //.attr("fill-opacity", 1); }) .on("mouseout", function(event, d) { divtooltip.style("visibility", "hidden"); d3.select("#infogeo_prov").html(""); d3.select("#coo").text(""); d3.select("#infovarious").html(""); d3.select(this) .transition() .duration(2000) .delay(100) .attr("fill", "grey") .attr("fill-opacity", 0.3); }) .on("dblclick", (event, d) => { if (dataMap.has(d.id) || !urlMap.has(d.id)) viewcounties(d); else { d3.json(urlMap.get(d.id)).then(val => { dataMap.set(d.id, val); viewcounties(d); }); } divtooltip.style("visibility", "hidden"); popup.style("visibility", "hidden"); }) .on("click", (event, d) => { popup.style("visibility", "hidden"); }); //.append("title") //.text((d, i) => d.properties.NAME_PY + " " + d.properties.NAME_HZ); }; const grotte = function() { gro .selectAll("path") .data(cave.features) .enter() .append("path") .attr("class", "cave") .attr("fill", "red") .attr("stroke", "red") .attr("stroke-width", "0.2px") .attr("d", geoGenerator.pointRadius(0.15)) .on("mouseover", function(event, d) { locator(event, d, this); var x = d3.pointer(event, svg.node())[0]; var y = d3.pointer(event, svg.node())[1]; particle(event, x, y); }) .on("click", clickCave) .on("mouseenter", function(event, d) { d3.select(this).attr("d", geoGenerator.pointRadius(0.2)); //d3.select(this).style('fill', 'none').style("fill-opacity", 0.1); d3.select("#infos").text(`Ω : ` + d.properties.gro_nom); d3.select("#infovarious") .html(`Ω : ` + d.properties.gro_nom) .style("color", "black"); }) .on("mouseleave", function(event, d) { d3.select(this).attr("d", geoGenerator.pointRadius(0.02)); d3.select(this) .attr("class", "cave") .style("fill-opacity", 1); }) .append("title") .text((d, i) => `Ω : ` + d.properties.gro_nom); }; function clickCave(event, d) { popup .transition() .duration(200) .style("visibility", "visible"); popup .attr("class", "") .style("padding", "10px") .style("z-index", "10000") //.style("width", "200px") .style("height", "180px") .style("color", "black") .style("background-color", "rgba(255, 255, 255, 0.8)") .style("border-radius", "5px") .html( `

${d.properties.gro_nom + "
" + d.properties.gro_nom}
Dev. ${d.properties.gro_deve + " m
Den. " + d.properties.gro_prof} m
More infos ...

` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); } const makescalegra = function() { gra .append("path") .datum( d3 .geoGraticule() .extent([[-180, -80 + 1e-6], [180, 80 + 1e-6]]) .step([gra_la, gra_lon]) ) .attr("class", "graticule") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 0.5) .attr("d", geoGenerator); gra .append("path") .datum(d3.geoGraticule().step([0, 66.33])) .attr("class", "graticule polar") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); gra .append("path") .datum( d3 .geoGraticule() .extent([[-180, -23.4369511], [180, 23.4369511]]) .step([0, 23.436951]) ) .attr("class", "graticule tropic") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); }; const equator = function() { equa .append("path") .datum({ type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]] }) .attr("class", "equator") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.5px") .attr("d", geoGenerator); }; const cancer = function() { canc .append("path") .datum({ type: "LineString", coordinates: tcanc }) .attr("class", "tropic") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); }; const capricorne = function() { capr .append("path") .datum({ type: "LineString", coordinates: tcapri }) .attr("class", "tropic") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", "0.1px") .attr("stroke-opacity", 1) .attr("d", geoGenerator); }; function viewcounties(d) { d3.select("body") .selectAll(".district") .remove(); //const [[x0, y0], [x1, y1]] = geoGenerator.bounds(d); //event.stopPropagation(); var bounds = geoGenerator.bounds(d), dx = bounds[1][0] - bounds[0][0], dy = bounds[1][1] - bounds[0][1], x = (bounds[0][0] + bounds[1][0]) / 2, y = (bounds[0][1] + bounds[1][1]) / 2, scale = 0.9 / Math.max(dx / width, dy / height), translate = [width / 2 - scale * x, height / 2 - scale * y]; layers .transition() .duration(2050) .attr("transform", "translate(" + translate + ")scale(" + scale + ")"); d3.select("body") .selectAll(".graticule") .style("stroke-width", 0.02); const distri = dataMap.has(d.id) ? dataMap.get(d.id).features : []; dis .append("g") .selectAll("path") .data(distri) .enter() .append("path") .attr("class", "district") .attr("d", geoGenerator) .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.01) //.style("fill-opacity", 0.3) .on("mousemove", function(event, d) { locator(event, d, this); }) .on("mouseenter", function(event, d) { d3.select(this) .style("fill", "red") .style("fill-opacity", 0.2); d3.select("#infos") .text(d.properties.Name) .attr("fill", "red") .attr("fill-opacity", 0.2); d3.select("#infovarious") .html(d.properties.Name) .style("color", "red"); //.attr("fill-opacity", 0.2); }) .on("mouseleave", function(event, d) { d3.select(this) .style("fill", "grey") .style("fill-opacity", 0.7); d3.select("#infos").text(""); d3.select("#coo").text(""); d3.select(this) .transition() .duration(2000) .delay(100) .style("fill", "grey") .style("fill-opacity", 0.2); }) .on("click", function(event, d) { var bounds = geoGenerator.bounds(d), dx = bounds[1][0] - bounds[0][0], dy = bounds[1][1] - bounds[0][1], x = (bounds[0][0] + bounds[1][0]) / 2, y = (bounds[0][1] + bounds[1][1]) / 2, scale = 0.9 / Math.max(dx / width, dy / height), translate = [width / 2 - scale * x, height / 2 - scale * y]; layers .transition() .duration(2050) //.style("stroke-width", 0.1 / scale + "px") .attr( "transform", "translate(" + translate + ")scale(" + scale + ")" ); gro.selectAll("path").attr("d", geoGenerator.pointRadius(0.03)); d3.select("body") .selectAll(".district") .style("stroke-width", 0.02); d3.select("body") .selectAll(".graticule") .style("stroke-width", 0.01); d3.select("#tooltip").style("visibility", "hidden"); popup.style("visibility", "hidden"); }); gro.selectAll("path").attr("d", geoGenerator.pointRadius(0.03)); } const render = () => { var projection = d3 .geoOrthographic() .scale(330) .rotate(rotation) .translate([width / 2, height / 2]) .clipAngle(90); var geoGenerator = d3.geoPath().projection(projection); monde(); prefecture(); province(); karsts(); makescalegra(); grotte(); sphe(); }; render(); // info text svg .append("text") .attr("x", 24) .attr("y", 36) .append("tspan") .attr("id", "infos") .attr("fill", "rgba(120,120,120,1)") .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("class", "infos"); svg .append("text") .attr("x", 24) .attr("y", 54) .append("tspan") .attr("id", "coo") .attr("font-size", "11"); svg.call(zoom).on("dblclick.zoom", null); return svg.node(); }