Skip to content

Commit b5e70d6

Browse files
kochizufankochizufan
committed
submaps デモ対応
1 parent 51310bd commit b5e70d6

40 files changed

Lines changed: 55122 additions & 904 deletions

‎18th_mapcontest_ea.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎18th_mapcontest_gp.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎demo/18th_mapcontest_ea.json‎

Lines changed: 5263 additions & 0 deletions
Large diffs are not rendered by default.

‎demo/18th_mapcontest_gp.json‎

Lines changed: 11765 additions & 0 deletions
Large diffs are not rendered by default.

‎demo/singlemap.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MaplatTransform V2/V3 Demo</title>
7+
<style>
8+
* { box-sizing: border-box; margin: 0; padding: 0; }
9+
body { font-family: "Helvetica Neue", Arial, sans-serif; background: #eef0f4; color: #222; }
10+
11+
header {
12+
background: #1a2744;
13+
color: #fff;
14+
padding: 10px 20px;
15+
display: flex;
16+
align-items: center;
17+
gap: 16px;
18+
flex-wrap: wrap;
19+
}
20+
header h1 { font-size: 15px; white-space: nowrap; }
21+
22+
.ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
23+
24+
label { font-size: 13px; }
25+
select {
26+
padding: 4px 8px;
27+
border-radius: 4px;
28+
border: none;
29+
font-size: 13px;
30+
min-width: 200px;
31+
}
32+
33+
.btn-group { display: flex; gap: 3px; }
34+
.ver-btn, .viz-tab {
35+
padding: 5px 13px;
36+
border: 1.5px solid rgba(255,255,255,0.3);
37+
border-radius: 4px;
38+
background: transparent;
39+
color: #fff;
40+
font-size: 12px;
41+
cursor: pointer;
42+
transition: background 0.15s;
43+
}
44+
.ver-btn:hover, .viz-tab:hover { background: rgba(255,255,255,0.12); }
45+
.ver-btn.active { background: #c0392b; border-color: #c0392b; }
46+
.viz-tab.active { background: #3a7bd5; border-color: #3a7bd5; }
47+
48+
.divider {
49+
width: 1px; height: 22px;
50+
background: rgba(255,255,255,0.2);
51+
align-self: center;
52+
}
53+
54+
#status {
55+
font-size: 12px;
56+
color: #aac;
57+
white-space: nowrap;
58+
margin-left: auto;
59+
}
60+
61+
#map-note {
62+
font-size: 11px;
63+
color: #f39c12;
64+
padding: 2px 20px;
65+
background: rgba(243,156,18,0.1);
66+
min-height: 20px;
67+
}
68+
69+
.panels {
70+
display: flex;
71+
gap: 12px;
72+
padding: 10px 16px;
73+
justify-content: center;
74+
flex-wrap: wrap;
75+
}
76+
.panel {
77+
background: #fff;
78+
border-radius: 6px;
79+
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
80+
overflow: hidden;
81+
}
82+
canvas { display: block; }
83+
84+
#legend {
85+
background: #fff;
86+
margin: 0 16px 12px;
87+
padding: 8px 14px;
88+
border-radius: 6px;
89+
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
90+
font-size: 12px;
91+
line-height: 1.8;
92+
}
93+
</style>
94+
</head>
95+
<body>
96+
<header>
97+
<h1>MaplatTransform V2/V3 Demo</h1>
98+
<div class="ctrl-row">
99+
<label>
100+
テストケース:
101+
<select id="map-select"></select>
102+
</label>
103+
<div class="divider"></div>
104+
<div class="btn-group">
105+
<button class="ver-btn" data-ver="v2">v2</button>
106+
<button class="ver-btn active" data-ver="v3">v3</button>
107+
</div>
108+
<div class="divider"></div>
109+
<div class="btn-group">
110+
<button class="viz-tab active" data-viz="rays">無限遠半直線</button>
111+
<button class="viz-tab" data-viz="grid">グリッド変換</button>
112+
<button class="viz-tab" data-viz="roundtrip">ラウンドトリップ誤差</button>
113+
</div>
114+
</div>
115+
<span id="status">初期化中…</span>
116+
</header>
117+
118+
<div id="map-note"></div>
119+
120+
<div class="panels">
121+
<div class="panel"><canvas id="canvas-forw"></canvas></div>
122+
<div class="panel"><canvas id="canvas-bakw"></canvas></div>
123+
</div>
124+
125+
<div id="legend">凡例を読み込み中...</div>
126+
127+
<script type="module" src="./demo.ts"></script>
128+
</body>
129+
</html>

‎demo/submaps.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MaplatTransform — Submaps Demo</title>
7+
<style>
8+
* { box-sizing: border-box; margin: 0; padding: 0; }
9+
body { font-family: "Helvetica Neue", Arial, sans-serif; background: #eef0f4; color: #222; }
10+
11+
header {
12+
background: #1a2744;
13+
color: #fff;
14+
padding: 10px 20px;
15+
display: flex;
16+
align-items: center;
17+
gap: 16px;
18+
flex-wrap: wrap;
19+
}
20+
header h1 { font-size: 15px; white-space: nowrap; }
21+
22+
.ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
23+
24+
label { font-size: 13px; }
25+
select {
26+
padding: 4px 8px;
27+
border-radius: 4px;
28+
border: none;
29+
font-size: 13px;
30+
min-width: 240px;
31+
}
32+
33+
.btn-group { display: flex; gap: 3px; }
34+
.ver-btn {
35+
padding: 5px 13px;
36+
border: 1.5px solid rgba(255,255,255,0.3);
37+
border-radius: 4px;
38+
background: transparent;
39+
color: #fff;
40+
font-size: 12px;
41+
cursor: pointer;
42+
transition: background 0.15s;
43+
}
44+
.ver-btn:hover { background: rgba(255,255,255,0.12); }
45+
.ver-btn.active { background: #c0392b; border-color: #c0392b; }
46+
47+
.divider { width: 1px; height: 22px; background: rgba(255,255,255,0.2); align-self: center; }
48+
49+
#status {
50+
font-size: 12px; color: #aac; white-space: nowrap; margin-left: auto;
51+
}
52+
53+
.back-link {
54+
font-size: 12px;
55+
color: #aac;
56+
text-decoration: none;
57+
white-space: nowrap;
58+
}
59+
.back-link:hover { color: #fff; }
60+
61+
.instructions {
62+
font-size: 12px;
63+
color: #c0d8f0;
64+
padding: 5px 20px;
65+
background: rgba(255,255,255,0.07);
66+
}
67+
68+
.panels {
69+
display: flex;
70+
gap: 12px;
71+
padding: 10px 16px;
72+
justify-content: center;
73+
flex-wrap: wrap;
74+
}
75+
.panel-wrap {
76+
display: flex;
77+
flex-direction: column;
78+
gap: 4px;
79+
}
80+
.panel-label {
81+
font-size: 12px;
82+
font-weight: 700;
83+
color: #1a2744;
84+
background: #fff;
85+
border-radius: 4px 4px 0 0;
86+
padding: 4px 12px;
87+
text-align: center;
88+
}
89+
.panel {
90+
background: #fff;
91+
border-radius: 0 0 6px 6px;
92+
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
93+
overflow: hidden;
94+
}
95+
canvas { display: block; width: 500px; height: 500px; cursor: crosshair; }
96+
97+
#legend {
98+
background: #fff;
99+
margin: 0 16px 12px;
100+
padding: 8px 14px;
101+
border-radius: 6px;
102+
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
103+
font-size: 12px;
104+
line-height: 2;
105+
}
106+
107+
hr { border: none; border-top: 1px solid #ddd; margin: 4px 0; }
108+
</style>
109+
</head>
110+
<body>
111+
<header>
112+
<a class="back-link" href="../index.html">← デモ一覧</a>
113+
<h1>MaplatTransform — Submaps Demo</h1>
114+
<div class="ctrl-row">
115+
<label>
116+
地図:
117+
<select id="map-select"></select>
118+
</label>
119+
<div class="divider"></div>
120+
<div class="btn-group">
121+
<button class="ver-btn active" data-ver="v2">v2</button>
122+
<button class="ver-btn" data-ver="v3">v3</button>
123+
</div>
124+
</div>
125+
<span id="status">初期化中…</span>
126+
</header>
127+
128+
<div class="instructions">
129+
<b>操作:</b>
130+
クリック = 座標変換（XY→Merc / Merc→XY）&nbsp;｜&nbsp;
131+
Alt+ドラッグ = パン &nbsp;｜&nbsp;
132+
ホイール = ズーム
133+
</div>
134+
135+
<div class="panels">
136+
<div class="panel-wrap">
137+
<div class="panel-label">XY 空間（ピクセル座標）— クリックで Merc 変換</div>
138+
<div class="panel"><canvas id="canvas-xy"></canvas></div>
139+
</div>
140+
<div class="panel-wrap">
141+
<div class="panel-label">Merc 空間（EPSG:3857）— クリックで XY 逆変換</div>
142+
<div class="panel"><canvas id="canvas-merc"></canvas></div>
143+
</div>
144+
</div>
145+
146+
<div id="legend">凡例を読み込み中…</div>
147+
148+
<script type="module" src="./submaps.ts"></script>
149+
</body>
150+
</html>

0 commit comments

Comments
 (0)