31:T15d4,shuang_map = { var k = 1, projection = d3 .geoOrthographic() .rotate([-105, -15]) .translate([width / 2, height / 2]) .clipAngle(90) .fitExtent([[0, 0], [width, height]], sh_ser_s); const geoGenerator = d3.geoPath().projection(projection); const svg = d3 .select(DOM.svg(width, height)) .attr('id', 'ditu') .style("width", "100%") .style("height", "auto"); const zoom = d3 .zoom() .scaleExtent([1, 300]) .translateExtent([[0, 0], [width, height]]) .on("zoom", event => { const t = event.transform; k = event.transform.k; layers.attr("transform", t); scaleBar .zoomFactor(t.k) .label(`${Math.round(scaleBar.distance() / t.k)} m`); echelle.call(scaleBar); return k; }); const scaleBar = d3 .geoScaleBar() .units(d3.geoScaleMeters) .projection(projection) .size([width, height]) .left(.02) .top(.95) .distance(3000) .label("3000 m") // The label on top of the scale bar .labelAnchor("middle") .tickSize(null) .tickValues(null); const locator = function(event, d, t) { var latlon = projection.invert(d3.pointer(event)); d3.select("#coo").text( latlon[1].toFixed(4) + " ° N " + latlon[0].toFixed(4) + " ° E " ); }; 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); const layers = svg .append('g') .attr('id', 'layers') .attr('class', 'layers'); const fond = layers .append('rect') .attr('x', 0) .attr('y', 0) .attr('height', height) .attr('width', width) .attr('stroke', 'rgba(255,255,255,1)') .attr('fill', 'rgba(255,255,255,1)') .on("mousemove", function(event, d) { locator(event, d, this); divtooltip.style("visibility", "hidden"); }); const serie = layers .append('g') .attr("id", "series") .attr("class", "serieover"); const station_p = layers .append('g') .attr("id", "stations") .attr("class", "stationover"); const station_0 = layers .append('g') .attr("id", "station_0") .attr("class", "station0over"); const topo_serie = function(d) { serie .selectAll('path') .data(sh_ser_s.features) .enter() .append('path') .attr('class', 'serie') .attr('fill', 'red') .attr('stroke', 'red') .attr('stroke-width', 0.01) .attr('d', geoGenerator) .on('mouseover', function(event, d) { d3.select('#infos') .text('Série ' + d.properties.SERIE_NR) .attr('fill', 'black'); divtooltip .transition() .duration(200) .style("visibility", "visible") .style("opacity", .5); divtooltip .html( `

` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 10 + "px"); }) .on("mousemove", function(event, d) { locator(event, d, this); divtooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 10 + "px"); }); }; const topo_sta_p = function(d) { station_p .selectAll('path') .data(sh_sta_p.features) .enter() .append('path') .attr('d', geoGenerator.pointRadius(0.3 / k)) .on('mouseover', function(event, d) { d3.select('#infos') .text( 'Station ' + d.properties.STN_NR + ' / Série ' + d.properties.SERIE_NR ) .attr('fill', 'red'); }) .on('mouseleave', function(event, d) { d3.select('#infos').text(''); }) .on("mousemove", function(event, d) { locator(event, d, this); }); }; const topo_sta_0 = function(d) { station_0 .selectAll('path') .data(sh_sta_0.features) .enter() .append('path') .attr('d', geoGenerator.pointRadius(0.5 / k)) .attr('fill', "grey") .on('mouseover', function(event, d) { d3.select('#infos') .text( 'Station ' + d.properties.STN_NR + ' / Série ' + d.properties.SERIE_NR ) .attr('fill', 'red'); divtooltip .transition() .duration(200) .style("visibility", "visible") .style("opacity", .5); divtooltip .html( `

` ) .style("left", event.pageX + 8 + "px") .style("top", event.pageY - 20 + "px"); }) .on('mouseleave', function(event, d) { d3.select('#infos').text(''); }) .on("mousemove", function(event, d) { locator(event, d, this); }); }; topo_serie(); switch (r) { case 'st0': topo_sta_0(); break; case 'stAll': topo_sta_p(); break; } layers.call(zoom); const echelle = svg.append('g').call(scaleBar); svg .append('text') .attr('x', 20) .attr('y', 36) .append('tspan') .attr('id', 'infos') .attr("class", "infos"); svg .append('text') .attr('x', 20) .attr('y', height - 5) .append('tspan') .attr('id', 'coo') .attr("font-size", "11"); return svg.node(); }32:Tb4c,style = html` [CSS style declaration] `33:[] 2f:{"title":"Shuanghedongqun 双河洞","cells":[{"id":0,"value":"md`# Shuanghedongqun 双河洞`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"explication = md`Shuanghedong 双河洞 (Guizhou 贵州省, Zunyi 遵义市, Suiyang 绥阳) is the longest cave of China with a length of 283 284 m. \nThere is 32919 survey points in 3072 series.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"techzone = md`# Techzone\n**Safari issue** : can display all stations (32919) with the \\`topo_sta_p()\\`. The zoom work well but the pan of the zoom dont work. As soon as the \"layer\" receive a mousedown event the page freeze (and need to reload to escape of this situation). Is it a memory leak ? So the question is how optimize the code to allow a good pan of the zoom behavior with a such number of points ? \nHere is the post about this [problem](https://talk.observablehq.com/t/page-freeze-on-click-with-safari/4557/6).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof r = radio({\n title:\n 'Layers choice as soon as we choose the All stations layer we get the safari problem ...',\n options: [\n { label: 'Stations 0', value: 'st0' },\n {\n label: 'All Stations',\n value: 'stAll'\n }\n ],\n value: 'st0'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { sh_sta_p, sh_ser_s, sh_sta_0 } from \"@jipexu/underground-library\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"width=960;","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v6.min.js\", \"d3-geo-projection@2\", \"d3-geo-scale-bar@1.1.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}