coordconver 0.1.4 → 1.1.0

data/docs/cc-algorithms.js

@@ -0,0 +1,293 @@
+/**
+ * coordconver 算法层 (JS 移植版)
+ * 与 Ruby gem (lib/coordconver) 中的算法保持数值一致, 供在线试用页使用。
+ * 纯函数, 无 DOM 依赖, 可在 Node 中独立测试。
+ */
+(function (root) {
+  "use strict";
+
+  var X_PI = (3.14159265358979324 * 3000.0) / 180.0;
+  var PI = Math.PI;
+  var SEMI_MAJOR_AXIS = 6378245.0; // GCJ-02 偏移算法 (克拉索夫斯基椭球)
+  var EE = 0.00669342162296594323;
+  var EARTH_RADIUS = 6371008.8;
+
+  var ELLIPSOIDS = {
+    cgcs2000: { a: 6378137.0, rf: 298.257222101 },
+    wgs84: { a: 6378137.0, rf: 298.257223563 },
+    krassovsky: { a: 6378245.0, rf: 298.3 }, // 北京54
+    iag75: { a: 6378140.0, rf: 298.257 } // 西安80
+  };
+
+  function outOfChina(lng, lat) {
+    return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271;
+  }
+
+  function transformLat(lng, lat) {
+    var ret =
+      -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
+    ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
+    ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
+    ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
+    return ret;
+  }
+
+  function transformLng(lng, lat) {
+    var ret =
+      300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
+    ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0;
+    ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0;
+    ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0;
+    return ret;
+  }
+
+  function wgs2gcj(lng, lat) {
+    if (outOfChina(lng, lat)) return [lng, lat];
+    var dLat = transformLat(lng - 105.0, lat - 35.0);
+    var dLng = transformLng(lng - 105.0, lat - 35.0);
+    var radlat = (lat / 180.0) * PI;
+    var magic = 1 - EE * Math.sin(radlat) * Math.sin(radlat);
+    var sqrtmagic = Math.sqrt(magic);
+    dLat = (dLat * 180.0) / (((SEMI_MAJOR_AXIS * (1 - EE)) / (magic * sqrtmagic)) * PI);
+    dLng = (dLng * 180.0) / ((SEMI_MAJOR_AXIS / sqrtmagic) * Math.cos(radlat) * PI);
+    return [lng + dLng, lat + dLat];
+  }
+
+  function gcj2wgs(lng, lat) {
+    if (outOfChina(lng, lat)) return [lng, lat];
+    var dLat = transformLat(lng - 105.0, lat - 35.0);
+    var dLng = transformLng(lng - 105.0, lat - 35.0);
+    var radlat = (lat / 180.0) * PI;
+    var magic = 1 - EE * Math.sin(radlat) * Math.sin(radlat);
+    var sqrtmagic = Math.sqrt(magic);
+    dLat = (dLat * 180.0) / (((SEMI_MAJOR_AXIS * (1 - EE)) / (magic * sqrtmagic)) * PI);
+    dLng = (dLng * 180.0) / ((SEMI_MAJOR_AXIS / sqrtmagic) * Math.cos(radlat) * PI);
+    var mglat = lat + dLat;
+    var mglng = lng + dLng;
+    return [lng * 2 - mglng, lat * 2 - mglat];
+  }
+
+  function gcj2wgsPrecise(lng, lat) {
+    var w = [lng, lat];
+    for (var i = 0; i < 5; i++) {
+      var cur = wgs2gcj(w[0], w[1]);
+      w = [w[0] + (lng - cur[0]), w[1] + (lat - cur[1])];
+    }
+    return w;
+  }
+
+  function gcj2bd(lng, lat) {
+    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * X_PI);
+    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * X_PI);
+    return [z * Math.cos(theta) + 0.0065, z * Math.sin(theta) + 0.006];
+  }
+
+  function bd2gcj(lng, lat) {
+    var x = lng - 0.0065;
+    var y = lat - 0.006;
+    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
+    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
+    return [z * Math.cos(theta), z * Math.sin(theta)];
+  }
+
+  function wgs2bd(lng, lat) {
+    return gcj2bd.apply(null, wgs2gcj(lng, lat));
+  }
+
+  function bd2wgs(lng, lat) {
+    return gcj2wgs.apply(null, bd2gcj(lng, lat));
+  }
+
+  function bd2wgsPrecise(lng, lat) {
+    return gcj2wgsPrecise.apply(null, bd2gcj(lng, lat));
+  }
+
+  function distance(lng1, lat1, lng2, lat2) {
+    var dlng = ((lng2 - lng1) * PI) / 180.0;
+    var dlat = ((lat2 - lat1) * PI) / 180.0;
+    var a =
+      Math.sin(dlat / 2) * Math.sin(dlat / 2) +
+      Math.cos((lat1 * PI) / 180.0) *
+        Math.cos((lat2 * PI) / 180.0) *
+        Math.sin(dlng / 2) *
+        Math.sin(dlng / 2);
+    return Math.round(2 * EARTH_RADIUS * Math.asin(Math.sqrt(a)) * 10) / 10;
+  }
+
+  function bearing(lng1, lat1, lng2, lat2) {
+    var p1 = (lat1 * PI) / 180.0;
+    var p2 = (lat2 * PI) / 180.0;
+    var dl = ((lng2 - lng1) * PI) / 180.0;
+    var y = Math.sin(dl) * Math.cos(p2);
+    var x = Math.cos(p1) * Math.sin(p2) - Math.sin(p1) * Math.cos(p2) * Math.cos(dl);
+    return (((Math.atan2(y, x) * 180.0) / PI) + 360) % 360;
+  }
+
+  function destinationPoint(lng, lat, bearingDeg, distanceM) {
+    var d = distanceM / EARTH_RADIUS;
+    var p1 = (lat * PI) / 180.0;
+    var b = (bearingDeg * PI) / 180.0;
+    var p2 = Math.asin(Math.sin(p1) * Math.cos(d) + Math.cos(p1) * Math.sin(d) * Math.cos(b));
+    var l2 =
+      (lng * PI) / 180.0 +
+      Math.atan2(Math.sin(b) * Math.sin(d) * Math.cos(p1), Math.cos(d) - Math.sin(p1) * Math.sin(p2));
+    var lon = (((l2 * 180.0) / PI) + 540) % 360 - 180;
+    return [lon, (p2 * 180.0) / PI];
+  }
+
+  function toDMS(n, precision) {
+    precision = precision === undefined ? 2 : precision;
+    var sign = n < 0 ? "-" : "";
+    n = Math.abs(n);
+    var d = Math.floor(n);
+    var m = (n - d) * 60;
+    var s = (m - Math.floor(m)) * 60;
+    if (precision === 0) {
+      return sign + d + "°" + Math.floor(m) + "′" + Math.round(s) + "″";
+    }
+    return sign + d + "°" + Math.floor(m) + "′" + s.toFixed(precision) + "″";
+  }
+
+  function fromDMS(str) {
+    var parts = String(str).match(/[-+]?\d+(?:\.\d+)?/g);
+    if (!parts || parts.length === 0) return 0;
+    var neg = /^\s*[-–]/.test(String(str)) || parseFloat(parts[0]) < 0;
+    var deg = Math.abs(parseFloat(parts[0]));
+    var min = parts.length > 1 ? parseFloat(parts[1]) : 0;
+    var sec = parts.length > 2 ? parseFloat(parts[2]) : 0;
+    var value = deg + min / 60.0 + sec / 3600.0;
+    return Math.round((neg ? -value : value) * 1e6) / 1e6;
+  }
+
+  function zoneMeridian(lng, width) {
+    if (width !== 3 && width !== 6) throw new Error("带宽仅支持 3 或 6 度");
+    var zone = width === 6 ? Math.floor(lng / 6) + 1 : Math.round(lng / 3);
+    return [zone, width === 6 ? zone * 6 - 3 : zone * 3];
+  }
+
+  function gaussKruger(lng, lat, opts) {
+    opts = opts || {};
+    var ellipsoid = ELLIPSOIDS[opts.ellipsoid || "cgcs2000"];
+    if (!ellipsoid) throw new Error("未知椭球: " + opts.ellipsoid);
+    var a = ellipsoid.a;
+    var f = 1.0 / ellipsoid.rf;
+    var cm =
+      opts.centralMeridian !== undefined && opts.centralMeridian !== null
+        ? opts.centralMeridian
+        : zoneMeridian(lng, opts.zoneWidth || 6)[1];
+    var fe = opts.falseEasting === undefined ? 500000 : opts.falseEasting;
+    var fn = opts.falseNorthing || 0;
+    var e2 = f * (2 - f);
+    var ep2 = e2 / (1 - e2);
+
+    var p = (lat * PI) / 180.0;
+    var dl = ((lng - cm) * PI) / 180.0;
+    var sinP = Math.sin(p);
+    var cosP = Math.cos(p);
+    var tanP = Math.tan(p);
+
+    var n = a / Math.sqrt(1 - e2 * sinP * sinP);
+    var t = tanP * tanP;
+    var c = ep2 * cosP * cosP;
+    var aa = dl * cosP;
+    var m =
+      a *
+      ((1 - e2 / 4 - (3 * e2 * e2) / 64 - (5 * Math.pow(e2, 3)) / 256) * p -
+        ((3 * e2) / 8 + (3 * e2 * e2) / 32 + (45 * Math.pow(e2, 3)) / 1024) * Math.sin(2 * p) +
+        ((15 * e2 * e2) / 256 + (45 * Math.pow(e2, 3)) / 1024) * Math.sin(4 * p) -
+        ((35 * Math.pow(e2, 3)) / 3072) * Math.sin(6 * p));
+
+    var x =
+      fe + n * (aa + ((1 - t + c) * Math.pow(aa, 3)) / 6 + ((5 - 18 * t + t * t + 72 * c - 58 * ep2) * Math.pow(aa, 5)) / 120);
+    var y =
+      fn +
+      m +
+      n * tanP * ((aa * aa) / 2 + ((5 - t + 9 * c + 4 * c * c) * Math.pow(aa, 4)) / 24 + ((61 - 58 * t + t * t + 600 * c - 330 * ep2) * Math.pow(aa, 6)) / 720);
+    return [round4(x), round4(y)];
+  }
+
+  function inverseGaussKruger(x, y, opts) {
+    opts = opts || {};
+    var ellipsoid = ELLIPSOIDS[opts.ellipsoid || "cgcs2000"];
+    if (!ellipsoid) throw new Error("未知椭球: " + opts.ellipsoid);
+    if (opts.centralMeridian === undefined || opts.centralMeridian === null) {
+      throw new Error("反算必须指定中央经线");
+    }
+    var a = ellipsoid.a;
+    var f = 1.0 / ellipsoid.rf;
+    var fe = opts.falseEasting === undefined ? 500000 : opts.falseEasting;
+    var fn = opts.falseNorthing || 0;
+    var e2 = f * (2 - f);
+    var ep2 = e2 / (1 - e2);
+
+    var m = y - fn;
+    var mu = m / (a * (1 - e2 / 4 - (3 * e2 * e2) / 64 - (5 * Math.pow(e2, 3)) / 256));
+    var e1 = (1 - Math.sqrt(1 - e2)) / (1 + Math.sqrt(1 - e2));
+
+    var p1 =
+      mu +
+      ((3 * e1) / 2 - (27 * Math.pow(e1, 3)) / 32) * Math.sin(2 * mu) +
+      ((21 * e1 * e1) / 16 - (55 * Math.pow(e1, 4)) / 32) * Math.sin(4 * mu) +
+      ((151 * Math.pow(e1, 3)) / 96) * Math.sin(6 * mu) +
+      ((1097 * Math.pow(e1, 4)) / 512) * Math.sin(8 * mu);
+
+    var sinP1 = Math.sin(p1);
+    var cosP1 = Math.cos(p1);
+    var tanP1 = Math.tan(p1);
+    var c1 = ep2 * cosP1 * cosP1;
+    var t1 = tanP1 * tanP1;
+    var n1 = a / Math.sqrt(1 - e2 * sinP1 * sinP1);
+    var r1 = (a * (1 - e2)) / Math.pow(1 - e2 * sinP1 * sinP1, 1.5);
+    var d = (x - fe) / n1;
+
+    var p =
+      p1 -
+      ((n1 * tanP1) / r1) *
+        ((d * d) / 2 -
+          ((5 + 3 * t1 + 10 * c1 - 4 * c1 * c1 - 9 * ep2) * Math.pow(d, 4)) / 24 +
+          ((61 + 90 * t1 + 298 * c1 + 45 * t1 * t1 - 252 * ep2 - 3 * c1 * c1) * Math.pow(d, 6)) / 720);
+    var l =
+      (d -
+        ((1 + 2 * t1 + c1) * Math.pow(d, 3)) / 6 +
+        ((5 - 2 * c1 + 28 * t1 - 3 * c1 * c1 + 8 * ep2 + 24 * t1 * t1) * Math.pow(d, 5)) / 120) /
+      cosP1;
+
+    var lng = ((l + (opts.centralMeridian * PI) / 180.0) * 180.0) / PI;
+    var lat = (p * 180.0) / PI;
+    return [round9(lng), round9(lat)];
+  }
+
+  function round4(v) {
+    return Math.round(v * 10000) / 10000;
+  }
+
+  function round9(v) {
+    return Math.round(v * 1e9) / 1e9;
+  }
+
+  var api = {
+    outOfChina: outOfChina,
+    wgs2gcj: wgs2gcj,
+    gcj2wgs: gcj2wgs,
+    gcj2wgsPrecise: gcj2wgsPrecise,
+    gcj2bd: gcj2bd,
+    bd2gcj: bd2gcj,
+    wgs2bd: wgs2bd,
+    bd2wgs: bd2wgs,
+    bd2wgsPrecise: bd2wgsPrecise,
+    distance: distance,
+    bearing: bearing,
+    destinationPoint: destinationPoint,
+    toDMS: toDMS,
+    fromDMS: fromDMS,
+    zoneMeridian: zoneMeridian,
+    gaussKruger: gaussKruger,
+    inverseGaussKruger: inverseGaussKruger
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = api;
+  } else {
+    root.CC = api;
+  }
+})(typeof self !== "undefined" ? self : this);

data/docs/index.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>坐标转换在线试用 · coordconver</title>
+<style>
+  :root {
+    --bg: #f6f8fa; --card: #ffffff; --ink: #1f2328; --muted: #656d76;
+    --line: #d0d7de; --accent: #0969da; --accent-ink: #ffffff;
+    --ok-bg: #dafbe1; --err: #cf222e; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; }
+  header { background: #24292f; color: #fff; padding: 28px 16px 24px; text-align: center; }
+  header h1 { margin: 0 0 6px; font-size: 26px; }
+  header h1 code { font-family: var(--mono); background: none; color: #79c0ff; }
+  header p { margin: 0; color: #c9d1d9; font-size: 14px; }
+  header a { color: #79c0ff; }
+  main { max-width: 860px; margin: 0 auto; padding: 20px 16px 48px; }
+  .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-top: 20px; }
+  .card h2 { margin: 0 0 4px; font-size: 17px; }
+  .card .desc { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
+  label { font-size: 13px; color: var(--muted); display: block; margin: 10px 0 4px; }
+  textarea, input[type=text], input[type=number], select {
+    width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
+    font-size: 14px; font-family: var(--mono); background: #fff; color: var(--ink);
+  }
+  textarea { min-height: 96px; resize: vertical; }
+  textarea[readonly] { background: var(--bg); }
+  .row { display: flex; gap: 12px; flex-wrap: wrap; }
+  .row > * { flex: 1; min-width: 160px; }
+  button {
+    margin-top: 12px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 6px;
+    background: var(--accent); color: var(--accent-ink); font-size: 14px; cursor: pointer;
+  }
+  button.secondary { background: #fff; color: var(--ink); }
+  button:hover { filter: brightness(1.05); }
+  .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
+  .result { margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; word-break: break-all; display: none; }
+  .result.ok { display: block; background: var(--ok-bg); }
+  .result.err { display: block; background: #ffebe9; color: var(--err); }
+  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
+  .check { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
+  .check input { width: auto; }
+  table.ref { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
+  table.ref td { border-top: 1px solid var(--line); padding: 6px 8px; }
+  table.ref td:first-child { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
+  footer { text-align: center; color: var(--muted); font-size: 13px; padding: 0 16px 40px; }
+</style>
+</head>
+<body>
+<header>
+  <h1><code>coordconver</code> 坐标转换在线试用</h1>
+  <p>纯前端实现, 与 <a href="https://github.com/cheenwe/coordconver">Ruby gem</a> 算法数值一致 · 无需安装即可体验</p>
+</header>
+<main>
+
+  <div class="card">
+    <h2>坐标系转换</h2>
+    <p class="desc">WGS-84(地球/GPS) / GCJ-02(火星/高德·腾讯) / BD-09(百度) 互转。支持批量: 每行一条 "经度,纬度"。</p>
+    <div class="row">
+      <div>
+        <label for="from">源坐标系</label>
+        <select id="from">
+          <option value="wgs">WGS-84 地球坐标 (GPS)</option>
+          <option value="gcj">GCJ-02 火星坐标 (高德/腾讯)</option>
+          <option value="bd">BD-09 百度坐标</option>
+        </select>
+      </div>
+      <div>
+        <label for="to">目标坐标系</label>
+        <select id="to">
+          <option value="gcj">GCJ-02 火星坐标 (高德/腾讯)</option>
+          <option value="wgs">WGS-84 地球坐标 (GPS)</option>
+          <option value="bd">BD-09 百度坐标</option>
+        </select>
+      </div>
+    </div>
+    <label for="conv-in">输入坐标</label>
+    <textarea id="conv-in" placeholder="121.468738,31.247138&#10;116.481499,39.990475"></textarea>
+    <div class="check"><input type="checkbox" id="precise"><label for="precise" style="margin:0">使用精确逆变换 (目标为 WGS-84 时, 厘米级, 稍慢)</label></div>
+    <button id="conv-run">转换</button>
+    <button class="secondary" id="conv-example">填入示例</button>
+    <label for="conv-out">结果</label>
+    <textarea id="conv-out" readonly></textarea>
+    <div class="result" id="conv-msg"></div>
+  </div>
+
+  <div class="card">
+    <h2>经纬度 ⇄ 度分秒</h2>
+    <div class="grid2">
+      <div>
+        <label for="dms-in">十进制度 (如 38.65777,104.08296)</label>
+        <input type="text" id="dms-in" value="38.65777,104.08296">
+        <button id="dms-run">转度分秒</button>
+        <div class="result" id="dms-out"></div>
+      </div>
+      <div>
+        <label for="undms-in">度分秒 (如 38°39′27.97″,104°4′58.66″)</label>
+        <input type="text" id="undms-in" value='38°39′27.97″,104°4′58.66″'>
+        <button id="undms-run">转十进制度</button>
+        <div class="result" id="undms-out"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <h2>距离 / 方位角 / 偏移点</h2>
+    <p class="desc">两点需在同一坐标系下; 方位角以正北为 0°, 顺时针 0-360°。</p>
+    <div class="row">
+      <div><label for="p1">起点 (经度,纬度)</label><input type="text" id="p1" value="116.397428,39.90923"></div>
+      <div><label for="p2">终点 (经度,纬度)</label><input type="text" id="p2" value="121.473701,31.230416"></div>
+    </div>
+    <button id="geo-run">计算距离与方位角</button>
+    <div class="result" id="geo-out"></div>
+    <div class="row" style="margin-top:12px">
+      <div><label for="dp-bearing">方位角 (度)</label><input type="number" id="dp-bearing" value="153"></div>
+      <div><label for="dp-dist">距离 (米)</label><input type="number" id="dp-dist" value="100000"></div>
+    </div>
+    <button id="dp-run">从起点偏移</button>
+    <div class="result" id="dp-out"></div>
+  </div>
+
+  <div class="card">
+    <h2>高斯-克吕格投影</h2>
+    <p class="desc">经纬度 ⇄ 高斯平面坐标 (米), 支持测绘常用椭球与 3°/6° 带号。</p>
+    <div class="row">
+      <div>
+        <label for="gk-ellipsoid">椭球</label>
+        <select id="gk-ellipsoid">
+          <option value="cgcs2000">CGCS2000</option>
+          <option value="wgs84">WGS-84</option>
+          <option value="krassovsky">北京54 (克拉索夫斯基)</option>
+          <option value="iag75">西安80 (IAG-75)</option>
+        </select>
+      </div>
+      <div>
+        <label for="gk-zone">投影带</label>
+        <select id="gk-zone"><option value="6">6° 带</option><option value="3">3° 带</option></select>
+      </div>
+      <div><label for="gk-cm">中央经线 (度, 反算必填)</label><input type="number" id="gk-cm" value="120"></div>
+    </div>
+    <div class="row">
+      <div><label for="gk-lnglat">经纬度 (经度,纬度)</label><input type="text" id="gk-lnglat" value="121.47,31.24"></div>
+      <div><label for="gk-xy">平面坐标 (东坐标,北坐标)</label><input type="text" id="gk-xy" placeholder="640045.58,3458515.34"></div>
+    </div>
+    <button id="gk-run">正算 (左 → 右)</button>
+    <button class="secondary" id="invgk-run">反算 (右 → 左)</button>
+    <div class="result" id="gk-out"></div>
+  </div>
+
+  <div class="card">
+    <h2>坐标系速查</h2>
+    <table class="ref">
+      <tr><td>WGS-84</td><td>国际标准, GPS/北斗芯片原始坐标 — iOS 原生定位, OSM, 海外谷歌地图</td></tr>
+      <tr><td>GCJ-02</td><td>国测局火星坐标, WGS-84 加密所得 — 高德, 腾讯, 谷歌中国</td></tr>
+      <tr><td>BD-09</td><td>百度标准, GCJ-02 再次加密所得 — 百度地图, 百度 SDK</td></tr>
+    </table>
+  </div>
+
+</main>
+<footer>
+  本页为 <a href="https://github.com/cheenwe/coordconver">coordconver</a> 的前端试用版 ·
+  地址⇄坐标的地理编码 (百度/高德/腾讯 API) 请在 Ruby/CLI 中使用 ·
+  <a href="https://rubygems.org/gems/coordconver">gem install coordconver</a>
+</footer>
+
+<script src="cc-algorithms.js"></script>
+<script>
+(function () {
+  "use strict";
+  var $ = function (id) { return document.getElementById(id); };
+  var cc = window.CC;
+
+  function parsePair(text) {
+    var nums = String(text).split(/[,\s]+/).filter(Boolean).map(Number);
+    if (nums.length < 2 || nums.some(isNaN)) throw new Error("坐标格式应为: 经度,纬度");
+    return nums;
+  }
+
+  function show(id, text, isError) {
+    var el = $(id);
+    el.textContent = text;
+    el.className = "result " + (isError ? "err" : "ok");
+  }
+
+  function fmt(p) { return p[0].toFixed(6) + "," + p[1].toFixed(6); }
+
+  // ---------- 坐标系转换 ----------
+  var CONV = {
+    wgs: { gcj: cc.wgs2gcj, bd: cc.wgs2bd },
+    gcj: { wgs: function (l, a, precise) { return precise ? cc.gcj2wgsPrecise(l, a) : cc.gcj2wgs(l, a); }, bd: cc.gcj2bd },
+    bd: { wgs: function (l, a, precise) { return precise ? cc.bd2wgsPrecise(l, a) : cc.bd2wgs(l, a); }, gcj: cc.bd2gcj }
+  };
+
+  $("conv-run").onclick = function () {
+    try {
+      var from = $("from").value, to = $("to").value;
+      if (from === to) throw new Error("源坐标系与目标坐标系相同");
+      var fn = CONV[from][to];
+      var precise = $("precise").checked;
+      var lines = $("conv-in").value.split("\n").filter(function (l) { return l.trim(); });
+      if (!lines.length) throw new Error("请输入坐标");
+      var out = lines.map(function (line) {
+        var p = parsePair(line);
+        return fmt(fn(p[0], p[1], precise));
+      }).join("\n");
+      $("conv-out").value = out;
+      show("conv-msg", "已转换 " + lines.length + " 个点");
+    } catch (e) {
+      show("conv-msg", "错误: " + e.message, true);
+    }
+  };
+  $("conv-example").onclick = function () {
+    $("conv-in").value = "121.468738,31.247138\n116.481499,39.990475\n104.08296,30.659462";
+    show("conv-msg", "示例已填入 (WGS-84 坐标), 点击\"转换\"试试");
+  };
+
+  // ---------- 度分秒 ----------
+  $("dms-run").onclick = function () {
+    try {
+      var p = parsePair($("dms-in").value);
+      show("dms-out", cc.toDMS(p[0]) + "," + cc.toDMS(p[1]));
+    } catch (e) { show("dms-out", "错误: " + e.message, true); }
+  };
+  $("undms-run").onclick = function () {
+    try {
+      var parts = $("undms-in").value.split(/[,\s]+/).filter(Boolean);
+      if (parts.length < 2) throw new Error("需要两个度分秒值");
+      show("undms-out", cc.fromDMS(parts[0]) + "," + cc.fromDMS(parts[1]));
+    } catch (e) { show("undms-out", "错误: " + e.message, true); }
+  };
+
+  // ---------- 距离/方位角/偏移 ----------
+  $("geo-run").onclick = function () {
+    try {
+      var a = parsePair($("p1").value), b = parsePair($("p2").value);
+      show("geo-out",
+        "距离: " + cc.distance(a[0], a[1], b[0], b[1]).toLocaleString() + " 米\n" +
+        "方位角: " + cc.bearing(a[0], a[1], b[0], b[1]).toFixed(2) + "°");
+    } catch (e) { show("geo-out", "错误: " + e.message, true); }
+  };
+  $("dp-run").onclick = function () {
+    try {
+      var a = parsePair($("p1").value);
+      var b = cc.destinationPoint(a[0], a[1], Number($("dp-bearing").value), Number($("dp-dist").value));
+      show("dp-out", "偏移点: " + fmt(b));
+    } catch (e) { show("dp-out", "错误: " + e.message, true); }
+  };
+
+  // ---------- 高斯-克吕格 ----------
+  function gkOpts() {
+    return {
+      ellipsoid: $("gk-ellipsoid").value,
+      zoneWidth: Number($("gk-zone").value),
+      centralMeridian: $("gk-cm").value === "" ? null : Number($("gk-cm").value)
+    };
+  }
+  $("gk-run").onclick = function () {
+    try {
+      var p = parsePair($("gk-lnglat").value);
+      var xy = cc.gaussKruger(p[0], p[1], gkOpts());
+      $("gk-xy").value = xy[0] + "," + xy[1];
+      var zone = cc.zoneMeridian(p[0], gkOpts().zoneWidth);
+      show("gk-out", "带号 " + zone[0] + " · 中央经线 " + zone[1] + "° · 东坐标 " + xy[0] + " · 北坐标 " + xy[1]);
+    } catch (e) { show("gk-out", "错误: " + e.message, true); }
+  };
+  $("invgk-run").onclick = function () {
+    try {
+      var xy = parsePair($("gk-xy").value);
+      var opts = gkOpts();
+      if (opts.centralMeridian === null) throw new Error("反算必须填写中央经线");
+      var ll = cc.inverseGaussKruger(xy[0], xy[1], opts);
+      $("gk-lnglat").value = ll[0] + "," + ll[1];
+      show("gk-out", "经度 " + ll[0] + " · 纬度 " + ll[1]);
+    } catch (e) { show("gk-out", "错误: " + e.message, true); }
+  };
+})();
+</script>
+</body>
+</html>