2c:null 2d:["$","title",null,{"children":"정거방위도법 | Yonhap News Agency | Observable"}] 32:T87ab, import * as d3 from "npm:d3@7"; import * as topojson from "npm:topojson-client@3"; import { buffer as turfBuffer } from "npm:@turf/buffer@7.2.0"; import { rewind as turfRewind } from "npm:@turf/rewind@7.2.0"; import { area as turfArea } from "npm:@turf/area@7.2.0"; import { pointOnFeature } from "npm:@turf/point-on-feature@7.2.0"; const azimuthalMap = await (async () => { // ── 색상 ──────────────────────────────────── const COLOR_LAND = "#F2F2F2"; const COLOR_BORDER = "#B3B3B3"; const COLOR_WATER = "#C4E3FF"; const COLOR_GRID = "#99CCFF"; const COLOR_EQUATOR = "#FF8080"; const COLOR_LAT30_60 = "#808080"; const COLOR_PINK = "#FF5CA8"; const COLOR_PINK_EDGE = "#DC4384"; const COLOR_SELECTED = "#EFB6D0"; const COLOR_MARKER = "#D13B3B"; // ── 데이터 ────────────────────────────────── const worldURL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json"; const lakesURL = "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_lakes.geojson"; const worldResponse = await fetch(worldURL); if (!worldResponse.ok) { throw new Error( `국가 데이터 오류: HTTP ${worldResponse.status}` ); } const world = await worldResponse.json(); const countries = topojson.feature( world, world.objects.countries ).features; const borders = topojson.mesh( world, world.objects.countries, (a, b) => a !== b ); const coastline = topojson.mesh( world, world.objects.countries, (a, b) => a === b ); let allLakes = []; let lakeWarning = ""; try { const response = await fetch(lakesURL); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } const data = await response.json(); allLakes = data.features.map( feature => turfRewind(feature, { reverse: true }) ); } catch (error) { lakeWarning = `호수 데이터 로딩 실패: ${error.message}`; console.warn(lakeWarning); } const topLakeKeys = [ "superior", "victoria", "huron", "michigan", "tanganyika", "baikal", "great bear", "malawi", "great slave" ]; function lakeKey(feature) { const p = feature.properties || {}; const name = [ p.name, p.name_en, p.name_alt ].filter(Boolean).join(" ").toLowerCase(); if (/\bsuperior\b/.test(name)) return "superior"; if (/\bvictoria\b/.test(name)) return "victoria"; if (/\bhuron\b/.test(name)) return "huron"; if (/\bmichigan\b/.test(name)) return "michigan"; if (/\btanganyika\b/.test(name)) return "tanganyika"; if (/\bbaikal\b/.test(name)) return "baikal"; if (/\bgreat bear\b/.test(name)) return "great bear"; if (/\bmalawi\b|\bnyasa\b/.test(name)) return "malawi"; if (/\bgreat slave\b/.test(name)) return "great slave"; return null; } const topLakes = allLakes.filter( feature => topLakeKeys.includes(lakeKey(feature)) ); const missedLakes = topLakeKeys.filter( name => !topLakes.some(f => lakeKey(f) === name) ); // ── 지도 설정 ─────────────────────────────── const EARTH_RADIUS_KM = 6371.0088; const size = 920; const center = size / 2; const mapRadius = 420; const ringAngles = [30, 60, 90, 120, 150, 175]; const zoomScales = [1, 1.2, 1.5, 2, 3, 6]; const state = { mode: "border", lakeMode: "all", lat: 37.5665, lon: 126.978, km: 1000, step: 0, country: null, buffer: null, error: "" }; const graticule = d3.geoGraticule() .step([15, 15])(); const latitudeLines = [-60, -30, 0, 30, 60].map( lat => ({ lat, geometry: { type: "LineString", coordinates: d3.range(-179.99, 180, 1) .concat([179.99]) .map(lon => [lon, lat]) } }) ); function visibleLakes() { return state.lakeMode === "all" ? allLakes : state.lakeMode === "top10" ? topLakes : []; } // ── 압축형 설정 패널 ───────────────────────── const root = document.createElement("div"); root.className = "aeqd-compact"; const radioName = `aeqd-mode-${Math.random().toString(36).slice(2)}`; root.innerHTML = `

Azimuthal Equidistant

국경 주변: 국가 클릭 / 점 중심: 지도 클릭 / 마우스 휠: 단계별 줌

국경 주변 범위 점 중심 범위

호수 표시

위도

경도

거리(km)

카스피해는 기본 수역으로 남을 수 있습니다. 국경 범위가 크면 투영 왜곡이 발생할 수 있습니다.

`; // ── 지도 레이어 ────────────────────────────── const svg = d3.select(root.querySelector("svg")); const clipId = `aeqd-clip-${Math.random().toString(36).slice(2)}`; svg.append("defs") .append("clipPath") .attr("id", clipId) .append("circle") .attr("cx", center) .attr("cy", center) .attr("r", mapRadius); svg.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", mapRadius) .attr("fill", COLOR_WATER); const map = svg.append("g") .attr("clip-path", `url(#${clipId})`); const projection = d3.geoAzimuthalEquidistant() .rotate([-state.lon, -state.lat]) .translate([center, center]) .scale(mapRadius / Math.PI) .clipAngle(179.999) .precision(0.4); const path = d3.geoPath(projection); const graticulePath = map.append("path") .datum(graticule) .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-width", 0.6) .attr("pointer-events", "none"); const countryPaths = map.append("g") .selectAll("path") .data(countries) .join("path") .attr("fill", COLOR_LAND) .attr("stroke", COLOR_BORDER) .attr("stroke-width", 0.45) .style("cursor", "pointer"); countryPaths.append("title") .text(d => d.properties?.name || `ID ${d.id}`); const lakesGroup = map.append("g") .attr("id", "visible-lakes") .attr("pointer-events", "none"); const bufferBasePath = map.append("path") .attr("fill", COLOR_LAND) .attr("stroke", "none") .attr("pointer-events", "none"); const bufferPath = map.append("path") .attr("fill", COLOR_PINK) .attr("fill-opacity", 0.32) .attr("stroke", COLOR_PINK_EDGE) .attr("stroke-width", 1) .attr("pointer-events", "none"); const pointCircle = map.append("circle") .attr("cx", center) .attr("cy", center) .attr("fill", COLOR_PINK) .attr("fill-opacity", 0.32) .attr("stroke", COLOR_PINK_EDGE) .attr("stroke-width", 1.2) .attr("pointer-events", "none"); const coastlinePath = map.append("path") .datum(coastline) .attr("fill", "none") .attr("stroke", COLOR_BORDER) .attr("stroke-width", 0.5) .attr("pointer-events", "none"); const borderPath = map.append("path") .datum(borders) .attr("fill", "none") .attr("stroke", COLOR_BORDER) .attr("stroke-width", 0.45) .attr("pointer-events", "none"); const selectedPath = map.append("path") .attr("fill", "none") .attr("stroke", "#C42B68") .attr("stroke-width", 2) .attr("pointer-events", "none"); const latitudePaths = map.append("g") .attr("id", "special-latitudes") .selectAll("path") .data(latitudeLines) .join("path") .attr("fill", "none") .attr("stroke", d => d.lat === 0 ? COLOR_EQUATOR : COLOR_LAT30_60 ) .attr("stroke-width", d => d.lat === 0 ? 1.5 : 1 ) .attr("pointer-events", "none"); const rings = map.append("g") .selectAll("path") .data(ringAngles) .join("path") .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-width", 0.9) .attr("stroke-dasharray", "6 6") .attr("pointer-events", "none"); const marker = map.append("g") .attr("transform", `translate(${center},${center})`) .attr("pointer-events", "none"); marker.append("circle") .attr("r", 7) .attr("fill", "white") .attr("stroke", COLOR_MARKER) .attr("stroke-width", 1.8); marker.append("circle") .attr("r", 3) .attr("fill", COLOR_MARKER); svg.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", mapRadius) .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-width", 1.2) .attr("pointer-events", "none"); // ── 국가 중심점 계산 ────────────────────────── function getCountryCenter(country) { let main = country; if (country.geometry?.type === "MultiPolygon") { let largest = -1; for (const coordinates of country.geometry.coordinates) { const feature = { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates } }; const area = turfArea(feature); if (area > largest) { largest = area; main = feature; } } } let coords = d3.geoCentroid(main); if ( !coords.every(Number.isFinite) || !d3.geoContains(main, coords) ) { coords = pointOnFeature(main).geometry.coordinates; } return { lon: ((coords[0] + 180) % 360 + 360) % 360 - 180, lat: Math.max(-90, Math.min(90, coords[1])) }; } function syncInput(key) { root.querySelector( `.${key}-range` ).value = String(state[key]); root.querySelector( `.${key}-number` ).value = String(state[key]); } function setMapCenter(lon, lat) { state.lon = Math.max( -180, Math.min(180, +lon.toFixed(4)) ); state.lat = Math.max( -90, Math.min(90, +lat.toFixed(4)) ); syncInput("lon"); syncInput("lat"); } function drawLakes() { lakesGroup.selectAll("path") .data(visibleLakes()) .join("path") .attr("fill", COLOR_WATER) .attr("stroke", COLOR_BORDER) .attr("stroke-width", 0.3) .attr("d", path); } // ── 지도 갱신 ─────────────────────────────── function redraw() { projection .rotate([-state.lon, -state.lat]) .scale( mapRadius / Math.PI * zoomScales[state.step] ); graticulePath.attr("d", path); countryPaths .attr("d", path) .attr("fill", d => state.mode === "border" && d === state.country ? COLOR_SELECTED : COLOR_LAND ); drawLakes(); const bufferD = state.mode === "border" && state.buffer ? path(state.buffer) : null; bufferBasePath.attr("d", bufferD); bufferPath.attr("d", bufferD); const pointRadius = state.km / EARTH_RADIUS_KM * projection.scale(); pointCircle .attr( "display", state.mode === "point" && state.km > 0 ? null : "none" ) .attr("r", pointRadius) .attr( "stroke", pointRadius >= mapRadius ? "none" : COLOR_PINK_EDGE ); coastlinePath.attr("d", path); borderPath.attr("d", path); selectedPath.attr( "d", state.mode === "border" && state.country ? path(state.country) : null ); latitudePaths.attr( "d", d => path(d.geometry) ); const visibleCount = ringAngles.length - state.step; rings .attr("display", (d, i) => i < visibleCount ? null : "none" ) .attr("d", angle => path( d3.geoCircle() .center([state.lon, state.lat]) .radius(angle) .precision(1)() ) ); const fmt = (v, positive, negative) => `${Math.abs(v).toFixed(4)}°${ v < 0 ? negative : positive }`; root.querySelector(".coords").textContent = `지도 중심: ${fmt(state.lat, "N", "S")} / ${ fmt(state.lon, "E", "W") }`; // 하단 Miller 셀이 읽는 텍스트 형식을 유지 root.querySelector(".selection").textContent = state.mode === "border" ? `선택 국가: ${ state.country?.properties?.name || "없음" }` : `점 중심: ${ fmt(state.lat, "N", "S") } / ${ fmt(state.lon, "E", "W") }`; root.querySelector(".distance").textContent = `거리 범위: ${state.km.toLocaleString()} km`; root.querySelector(".zoom").textContent = `줌: ${state.step + 1}/6`; root.querySelector(".lake-status").textContent = `호수: ${ state.lakeMode === "all" ? "전체" : state.lakeMode === "top10" ? "10대" : "없음" }`; root.querySelector(".error").textContent = [ lakeWarning, state.lakeMode === "top10" && missedLakes.length ? `미식별 호수: ${missedLakes.join(", ")}` : "", state.error ].filter(Boolean).join(" / "); } // ── 국경 주변 거리 범위 계산 ───────────────── function computeBorderBuffer() { state.buffer = null; state.error = ""; if ( state.mode === "border" && state.country && state.km > 0 ) { try { const raw = turfBuffer( state.country, state.km, { units: "kilometers", steps: 32 } ); if (!raw) { throw new Error( "국경 거리 범위를 계산하지 못했습니다." ); } state.buffer = turfRewind( raw, { reverse: true } ); } catch (error) { state.error = `버퍼 계산 오류: ${error.message}`; console.error(error); } } redraw(); } // ── 입력 컨트롤 ───────────────────────────── function bind(key, min, max, onChange) { const slider = root.querySelector( `.${key}-range` ); const number = root.querySelector( `.${key}-number` ); slider.addEventListener("input", () => { state[key] = Number(slider.value); number.value = slider.value; onChange(); }); number.addEventListener("input", () => { const v = number.value.trim() === "" ? NaN : Number(number.value); if ( Number.isFinite(v) && v >= min && v <= max ) { state[key] = v; slider.value = String(v); onChange(); } }); number.addEventListener("change", () => { const v = number.value.trim() === "" ? NaN : Number(number.value); state[key] = Number.isFinite(v) ? Math.max(min, Math.min(max, v)) : state[key]; syncInput(key); onChange(); }); } bind("lat", -90, 90, redraw); bind("lon", -180, 180, redraw); let bufferTimer = null; function updateDistance() { clearTimeout(bufferTimer); bufferTimer = null; if (state.mode === "point") { redraw(); return; } state.buffer = null; redraw(); bufferTimer = setTimeout(() => { bufferTimer = null; computeBorderBuffer(); }, 180); } bind("km", 0, 20000, updateDistance); // ── 호수 / 거리 모드 전환 ─────────────────── root.querySelector(".lake-mode") .addEventListener("change", event => { state.lakeMode = event.target.value; redraw(); }); root.querySelectorAll( `input[name="${radioName}"]` ).forEach(input => { input.addEventListener("change", () => { if (!input.checked) return; clearTimeout(bufferTimer); bufferTimer = null; state.mode = input.value; state.country = null; state.buffer = null; state.error = ""; root.querySelector(".clear").disabled = state.mode === "point"; redraw(); }); }); // ── 국가 클릭 ─────────────────────────────── countryPaths.on("click", (event, country) => { if (state.mode !== "border") return; event.stopPropagation(); clearTimeout(bufferTimer); bufferTimer = null; state.country = country; const p = getCountryCenter(country); setMapCenter(p.lon, p.lat); computeBorderBuffer(); }); // ── 지도 위 지점 클릭 ─────────────────────── svg.on("click", event => { const [x, y] = d3.pointer( event, svg.node() ); if ( Math.hypot(x - center, y - center) > mapRadius ) { return; } if (state.mode === "point") { const p = projection.invert([x, y]); if ( !p || !p.every(Number.isFinite) ) { return; } setMapCenter(p[0], p[1]); redraw(); } else { clearTimeout(bufferTimer); bufferTimer = null; state.country = null; state.buffer = null; state.error = ""; redraw(); } }); root.querySelector(".clear") .addEventListener("click", () => { clearTimeout(bufferTimer); bufferTimer = null; state.country = null; state.buffer = null; state.error = ""; redraw(); }); // ── 휠 확대·축소 ──────────────────────────── let wheelLocked = false; svg.node().addEventListener( "wheel", event => { event.preventDefault(); if ( wheelLocked || event.deltaY === 0 ) { return; } wheelLocked = true; setTimeout(() => { wheelLocked = false; }, 110); state.step = Math.max( 0, Math.min( zoomScales.length - 1, state.step + (event.deltaY < 0 ? 1 : -1) ) ); redraw(); }, { passive: false } ); // ── Illustrator용 SVG 다운로드 ────────────── root.querySelector(".download") .addEventListener("click", () => { try { if (bufferTimer !== null) { clearTimeout(bufferTimer); bufferTimer = null; if (state.mode === "border") { computeBorderBuffer(); } } const currentScale = projection.scale(); const clipDegrees = Math.min( 179.999, mapRadius / currentScale * 180 / Math.PI - 0.0001 ); const exportProjection = d3.geoAzimuthalEquidistant() .rotate(projection.rotate()) .center(projection.center()) .translate(projection.translate()) .scale(currentScale) .precision(projection.precision()) .clipAngle(clipDegrees); const exportPath = d3.geoPath( exportProjection ); const out = d3.create("svg") .attr( "xmlns", "http://www.w3.org/2000/svg" ) .attr("width", size) .attr("height", size) .attr( "viewBox", `0 0 ${size} ${size}` ); function addPath(layer, geo, attrs = {}) { if (!geo) return null; const d = exportPath(geo); if (!d) return null; const item = layer.append("path") .attr("d", d); for ( const [key, value] of Object.entries(attrs) ) { item.attr(key, value); } return item; } // 바다 out.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", mapRadius) .attr("fill", COLOR_WATER); // 경위선 addPath( out.append("g").attr("id", "graticule"), graticule, { fill: "none", stroke: COLOR_GRID, "stroke-width": 0.6 } ); // 국가 const countriesGroup = out.append("g") .attr("id", "countries"); for (const country of countries) { const element = addPath( countriesGroup, country, { fill: state.mode === "border" && country === state.country ? COLOR_SELECTED : COLOR_LAND, stroke: "none" } ); if (element) { element.attr( "id", `country-${country.id}` ); } } // 현재 선택된 호수만 저장 const lakeGroup = out.append("g") .attr("id", "visible-lakes"); for (const lake of visibleLakes()) { addPath( lakeGroup, lake, { fill: COLOR_WATER, stroke: COLOR_BORDER, "stroke-width": 0.3 } ); } // 핑크색 거리 범위 const distanceGroup = out.append("g") .attr("id", "distance-area"); if ( state.mode === "border" && state.buffer ) { addPath( distanceGroup.append("g") .attr("id", "buffer-base"), state.buffer, { fill: COLOR_LAND, stroke: "none" } ); addPath( distanceGroup.append("g") .attr("id", "buffer-pink"), state.buffer, { fill: COLOR_PINK, "fill-opacity": 0.32, stroke: COLOR_PINK_EDGE, "stroke-width": 1 } ); } else if ( state.mode === "point" && state.km > 0 ) { const r = state.km / EARTH_RADIUS_KM * currentScale; distanceGroup.append("circle") .attr("cx", center) .attr("cy", center) .attr( "r", Math.min(r, mapRadius) ) .attr("fill", COLOR_PINK) .attr("fill-opacity", 0.32) .attr( "stroke", r >= mapRadius ? "none" : COLOR_PINK_EDGE ) .attr("stroke-width", 1.2); } // 해안선 및 국경선 const bounds = out.append("g") .attr("id", "boundaries"); addPath( bounds, coastline, { fill: "none", stroke: COLOR_BORDER, "stroke-width": 0.5 } ); addPath( bounds, borders, { fill: "none", stroke: COLOR_BORDER, "stroke-width": 0.45 } ); // 선택 국가 외곽선 if ( state.mode === "border" && state.country ) { const raw = world.objects.countries.geometries.find( g => String(g.id) === String(state.country.id) ); if (raw) { addPath( out.append("g") .attr("id", "selected-country-outline"), topojson.mesh(world, raw), { fill: "none", stroke: "#C42B68", "stroke-width": 2 } ); } } // 특별 위도선 const latLayer = out.append("g") .attr("id", "special-latitudes"); for (const line of latitudeLines) { addPath( latLayer, line.geometry, { fill: "none", stroke: line.lat === 0 ? COLOR_EQUATOR : COLOR_LAT30_60, "stroke-width": line.lat === 0 ? 1.5 : 1 } ); } // 거리 동심원 const ringLayer = out.append("g") .attr("id", "distance-rings"); for ( let i = 0; i < ringAngles.length - state.step; i++ ) { const r = ringAngles[i] * Math.PI / 180 * currentScale; if (r >= mapRadius) continue; ringLayer.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", r) .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-dasharray", "6 6") .attr("stroke-width", 0.9); } // 중심 마커 const dot = out.append("g") .attr("id", "center-marker"); dot.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", 7) .attr("fill", "white") .attr("stroke", COLOR_MARKER) .attr("stroke-width", 1.8); dot.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", 3) .attr("fill", COLOR_MARKER); // 원형 프레임 out.append("circle") .attr("cx", center) .attr("cy", center) .attr("r", mapRadius) .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-width", 1.2); // SVG 저장 const xml = '\n' + new XMLSerializer().serializeToString( out.node() ); const blob = new Blob( [xml], { type: "image/svg+xml;charset=utf-8" } ); const url = URL.createObjectURL(blob); const where = state.mode === "border" ? `country_${state.country?.id ?? "none"}` : `point_${ state.lat.toFixed(2) }_${ state.lon.toFixed(2) }`; const a = document.createElement("a"); a.href = url; a.download = `azimuthal_${where}_${state.km}km_lakes-${state.lakeMode}.svg`; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 10000); } catch (error) { state.error = `SVG 다운로드 오류: ${error.message}`; root.querySelector(".error").textContent = state.error; console.error(error); } }); redraw(); return root; })(); display(azimuthalMap); 33:T422b, import { geoMiller } from "npm:d3-geo-projection@4"; import * as d3Miller from "npm:d3@7"; import * as topoMiller from "npm:topojson-client@3"; import { buffer as turfBufferMiller } from "npm:@turf/buffer@7.2.0"; const millerRangeMap = await (async () => { // ------------------------------------------ // 1. 상단 Azimuthal 지도와 연결 // ------------------------------------------ const upper = azimuthalMap; if ( !upper || typeof upper.querySelector !== "function" ) { throw new Error( "상단 azimuthalMap 셀을 먼저 실행해 주세요." ); } // ------------------------------------------ // 2. 세계지도 데이터 // ------------------------------------------ const response = await fetch( "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json" ); if (!response.ok) { throw new Error( `세계지도 로딩 실패: HTTP ${response.status}` ); } const world = await response.json(); const countries = topoMiller.feature( world, world.objects.countries ).features; const countryByName = new Map( countries.map(country => [ String(country.properties?.name || "").trim(), country ]) ); // ------------------------------------------ // 3. 컬러 설정 // ------------------------------------------ const COLOR_LAND = "#F2F2F2"; const COLOR_BORDER = "#B3B3B3"; const COLOR_WATER = "#C4E3FF"; const COLOR_GRID = "#99CCFF"; const COLOR_RANGE = "#DC4384"; const EARTH_RADIUS_KM = 6371.0088; // ------------------------------------------ // 4. 지도 크기 // ------------------------------------------ // 기존 1000 x 610 → 1000 x 760 // Miller 전체 세계지도 높이를 확보 // Miller 세계지도 비율에 맞춘 크기 const W = 1000; const MILLER_HALF_HEIGHT = 1.25 * Math.log( Math.tan(Math.PI / 4 + 0.4 * Math.PI / 2) ); const H = W * MILLER_HALF_HEIGHT / Math.PI; // 여백 제거 const PADDING = 0; // 하단 지도 중심 경도는 독립적으로 설정 const state = { centerLon: 0, rangeGeometry: null, rangeDescription: "", error: "" }; // ------------------------------------------ // 5. 인터페이스 // ------------------------------------------ const root = document.createElement("div"); root.className = "miller-range-map"; root.innerHTML = `

Miller 세계지도 · 거리 범위선

중심 경도

`; const svg = d3Miller.select( root.querySelector("svg") ); const caption = root.querySelector(".caption"); const rangeInput = root.querySelector(".lon-range"); const numberInput = root.querySelector(".lon-number"); // ------------------------------------------ // 6. Miller 투영법 // 핵심 변경: fitExtent 사용 // ------------------------------------------ // 지구 전체를 기준으로 투영 범위 계산 const sphere = { type: "Sphere" }; const projection = geoMiller() .rotate([-state.centerLon, 0]) .precision(0.35) // 세계지도 전체를 프레임에 여백 없이 맞춤 .fitExtent( [ [0, 0], [W, H] ], { type: "Sphere" } ) // 프레임 바깥은 클리핑 .clipExtent([ [0, 0], [W, H] ]); const path = d3Miller.geoPath(projection); const graticule = d3Miller.geoGraticule() .step([30, 30])(); // ------------------------------------------ // 7. 바다 배경 // ------------------------------------------ svg.append("rect") .attr("width", W) .attr("height", H) .attr("fill", COLOR_WATER); // ------------------------------------------ // 8. 경위선 // ------------------------------------------ const gridPath = svg.append("path") .datum(graticule) .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-width", 0.65); // ------------------------------------------ // 9. 국가별 도형 // ------------------------------------------ const countryPaths = svg.append("g") .attr("id", "countries") .selectAll("path") .data(countries) .join("path") .attr("fill", COLOR_LAND) .attr("stroke", COLOR_BORDER) .attr("stroke-width", 0.6); // ------------------------------------------ // 10. 거리 범위선 // 내부 색칠 없이 라인만 표시 // ------------------------------------------ const rangePath = svg.append("path") .attr("id", "range-outline") .attr("fill", "none") .attr("stroke", COLOR_RANGE) .attr("stroke-width", 2.4) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round") .attr("pointer-events", "none"); // ------------------------------------------ // 11. 사각형 프레임 // ------------------------------------------ svg.append("rect") .attr("width", W) .attr("height", H) .attr("fill", "none") .attr("stroke", COLOR_GRID) .attr("stroke-width", 1.1) .attr("pointer-events", "none"); // ------------------------------------------ // 12. 상단 지도의 현재 설정 읽기 // ------------------------------------------ function readUpper() { const pointMode = upper.querySelector( 'input[type="radio"][value="point"]' )?.checked; const mode = pointMode ? "point" : "border"; const lat = Number( upper.querySelector(".lat-number")?.value ); const lon = Number( upper.querySelector(".lon-number")?.value ); const km = Number( upper.querySelector(".km-number")?.value ); const selectedText = upper.querySelector(".selection")?.textContent || ""; const countryName = selectedText.startsWith("선택 국가:") ? selectedText .slice("선택 국가:".length) .trim() : ""; return { mode, lat, lon, km, countryName }; } // ------------------------------------------ // 13. GeoJSON 폴리곤 외곽선 추출 // ------------------------------------------ function toOutline(geojson) { const geometry = geojson?.geometry || geojson; if (!geometry) return null; const polygons = geometry.type === "Polygon" ? [geometry.coordinates] : geometry.type === "MultiPolygon" ? geometry.coordinates : []; const lines = polygons .map(polygon => polygon[0]) .filter( ring => Array.isArray(ring) && ring.length > 2 ); if (!lines.length) return null; return { type: "MultiLineString", coordinates: lines }; } // ------------------------------------------ // 14. 국경 기준 거리 버퍼 // ------------------------------------------ const bufferCache = new Map(); function countryBuffer(country, km) { const key = `${country.id}|${km}`; if (bufferCache.has(key)) { return bufferCache.get(key); } const result = turfBufferMiller( country, km, { units: "kilometers", steps: 48 } ); const geometry = toOutline(result); bufferCache.set( key, geometry ); if (bufferCache.size > 12) { bufferCache.delete( bufferCache.keys().next().value ); } return geometry; } // ------------------------------------------ // 15. Miller 지도 다시 그리기 // ------------------------------------------ function redrawMap() { // 중심 경도 변경 projection.rotate([ -state.centerLon, 0 ]); // 경위선 갱신 gridPath.attr("d", path); // 국가 갱신 countryPaths.attr("d", path); // 거리 범위선 갱신 rangePath.attr( "d", state.rangeGeometry ? path(state.rangeGeometry) : null ); const longitudeLabel = `${Math.abs(state.centerLon).toFixed(4)}°${ state.centerLon < 0 ? "W" : "E" }`; caption.textContent = `${state.rangeDescription} · 중심 경도: ${longitudeLabel}`; } // ------------------------------------------ // 16. 상단 지도와 거리 범위 연동 // ------------------------------------------ function renderRange() { const s = readUpper(); state.rangeGeometry = null; state.error = ""; try { if ( !Number.isFinite(s.km) || s.km <= 0 ) { state.rangeDescription = "거리 0km · 표시 범위선 없음"; } else if ( s.mode === "point" ) { // 점 중심 대권거리 원형 범위 if ( !Number.isFinite(s.lat) || !Number.isFinite(s.lon) ) { throw new Error( "상단 지도 좌표가 올바르지 않습니다." ); } const radiusDegrees = Math.min( 179.999, s.km / EARTH_RADIUS_KM * 180 / Math.PI ); const circle = d3Miller.geoCircle() .center([s.lon, s.lat]) .radius(radiusDegrees) .precision(0.5)(); state.rangeGeometry = toOutline(circle); state.rangeDescription = `점 중심: ${ s.lat.toFixed(4) }°, ${ s.lon.toFixed(4) }° · ${ s.km.toLocaleString() }km`; } else if ( !s.countryName || s.countryName === "없음" ) { state.rangeDescription = "상단 지도에서 국가를 선택해 주세요."; } else { // 국경 기준 범위선 const country = countryByName.get(s.countryName); if (!country) { throw new Error( `국가를 찾을 수 없습니다: ${s.countryName}` ); } state.rangeGeometry = countryBuffer(country, s.km); state.rangeDescription = `${s.countryName} 국경 기준 · ` + `${s.km.toLocaleString()}km`; } } catch (error) { state.error = error.message; state.rangeDescription = `거리 범위 오류: ${error.message}`; console.error(error); } redrawMap(); } // ------------------------------------------ // 17. 하단 지도 중심 경도 입력 // ------------------------------------------ function setCenterLongitude(value) { if (!Number.isFinite(value)) { return; } state.centerLon = Math.max( -180, Math.min(180, value) ); rangeInput.value = String(state.centerLon); numberInput.value = String(state.centerLon); redrawMap(); } // 슬라이더 rangeInput.addEventListener( "input", () => { setCenterLongitude( Number(rangeInput.value) ); } ); // 직접 숫자 입력 numberInput.addEventListener( "input", () => { if ( numberInput.value.trim() === "" ) { return; } const value = Number(numberInput.value); if ( Number.isFinite(value) && value >= -180 && value <= 180 ) { state.centerLon = value; rangeInput.value = String(value); redrawMap(); } } ); numberInput.addEventListener( "change", () => { const raw = numberInput.value.trim(); const value = raw === "" ? state.centerLon : Number(raw); setCenterLongitude(value); } ); // ------------------------------------------ // 18. 상단 지도 변경 자동 감지 // ------------------------------------------ let pending = null; function scheduleRender() { if (pending !== null) { clearTimeout(pending); } pending = setTimeout(() => { pending = null; renderRange(); }, 130); } // 상단 위도/경도/거리 컨트롤 감지 upper.addEventListener( "input", scheduleRender ); upper.addEventListener( "change", scheduleRender ); // 국가 클릭, 중심 이동 감지 const observer = new MutationObserver(scheduleRender); for (const selector of [ ".selection", ".coords", ".distance" ]) { const element = upper.querySelector(selector); if (element) { observer.observe( element, { childList: true, characterData: true, subtree: true } ); } } // ------------------------------------------ // 19. SVG 다운로드 // ------------------------------------------ root.querySelector(".save-svg") .addEventListener("click", () => { // 상단 변경값이 대기 중인 경우 갱신 if (pending !== null) { clearTimeout(pending); pending = null; renderRange(); } const copy = svg.node().cloneNode(true); copy.setAttribute( "xmlns", "http://www.w3.org/2000/svg" ); copy.setAttribute( "width", String(W) ); copy.setAttribute( "height", String(H) ); copy.setAttribute( "viewBox", `0 0 ${W} ${H}` ); const xml = '\n' + new XMLSerializer() .serializeToString(copy); const blob = new Blob( [xml], { type: "image/svg+xml;charset=utf-8" } ); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `miller_full_world_center_${state.centerLon.toFixed(1)}.svg`; document.body.appendChild(link); link.click(); link.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 10000); }); // ------------------------------------------ // 20. 초기 렌더링 // ------------------------------------------ renderRange(); return root; })(); display(millerRangeMap); 34:[] 30:{"id":"7cbc0942ff6b0eed","slug":"distance_map","title":"정거방위도법","thumbnail":"84a5f350c4357a95c57a77667c83c90354934b670693041b23896850ef82ed38","access_level":"public","create_time":"$D2026-10-12T00:55:27.507Z","update_time":"$D2026-10-12T06:54:47.371Z","view_time":null,"first_public_time":"$D2026-10-12T01:21:58.356Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d8ebc8c60ad27795","login":"yonhap-news-agency","name":"Yonhap News Agency","avatar_url":"https://avatars-next.observableusercontent.com/369b20cd46ba9bc9fb5e095f0b7e05281508516cb27407118ac78306b754cddc","tier":"starter_2024","bio":""},"version":54,"publish_version":54,"role":null,"authored":false,"authors":[{"type":"individual","id":"c855b2a8717aa4f4","login":"minji-kim3","name":"Minji Kim","avatar_url":"https://avatars-next.observableusercontent.com/5f70ad0d7e3bbc39eac149229ad0ec2c652146a94c39aa0e795d5fe81bf6ca0b","tier":null,"bio":""}],"members":[{"type":"team","id":"d8ebc8c60ad27795","login":"yonhap-news-agency","name":"Yonhap News Agency","avatar_url":"https://avatars-next.observableusercontent.com/369b20cd46ba9bc9fb5e095f0b7e05281508516cb27407118ac78306b754cddc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"정거방위도법","cells":[{"id":1,"value":"# 정거방위도법","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"추천 기사: 미사일 사거리, 남극·북극 지도, 중심점에서 주요 지점 거리","pinned":true,"hidden":true,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"