Skip to content

Commit 817d6ba

Browse files
KanahiroKanahiro
authored
Merge pull request #10 from mug-jp/expose-protocol
Expose protocol
2 parents 823902d + d82524f commit 817d6ba

File tree

8 files changed

+2062
-39
lines changed

8 files changed

+2062
-39
lines changed

‎.github/workflows/test.yml

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: test
2+
3+
on:
4+
pull_request:
5+
branches:
6+
- master
7+
paths:
8+
- 'src/**'
9+
- 'example/**'
10+
workflow_dispatch:
11+
12+
jobs:
13+
test:
14+
runs-on: ubuntu-22.04
15+
steps:
16+
- uses: actions/checkout@v2
17+
18+
- name: setup node
19+
uses: actions/setup-node@v1
20+
with:
21+
node-version: '22.x'
22+
23+
- name: install pnpm
24+
run: npm install -g pnpm
25+
26+
- name: install
27+
run: pnpm install
28+
29+
- name: build
30+
run: pnpm build
31+
32+
- name: install playwright
33+
run: pnpm exec playwright install
34+
35+
- name: unittest
36+
run: pnpm test
37+
38+
- name: Upload coverage reports to Codecov
39+
uses: codecov/codecov-action@v5
40+
with:
41+
token: ${{ secrets.CODECOV_TOKEN }}

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,7 @@ dist-ssr
2222
*.ntvs*
2323
*.njsproj
2424
*.sln
25-
*.sw?
25+
*.sw?
26+
27+
__screenshots__
28+
coverage

‎README.md

+80-21
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,55 @@
44

55
## 使い方
66

7-
```sh
8-
npm install maplibre-gl-gsi-terrain
9-
```
7+
### CDN経由
108

11-
```typescript
12-
import maplibreGl, { Map } from 'maplibre-gl';
13-
import { useGsiTerrainSource } from 'maplibre-gl-gsi-terrain';
9+
```html
10+
<head>
11+
<script src="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.js"></script>
12+
<link href="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.css" rel="stylesheet"/>
13+
</head>
14+
<body>
15+
<div id="map"></div>
16+
<script type="module">
17+
import { useGsiTerrainSource } from 'https://www.unpkg.com/maplibre-gl-gsi-terrain@2.1.0/dist/terrain.js';
1418
15-
const gsiTerrainSource = useGsiTerrainSource(maplibreGl.addProtocol);
16-
17-
new Map({
18-
container: 'app',
19-
style: {
20-
version: 8,
21-
sources: {
22-
terrain: gsiTerrainSource,
23-
},
24-
terrain: {
25-
source: 'terrain',
26-
exaggeration: 1.2,
27-
},
28-
},
29-
});
19+
const gsiTerrainSource = useGsiTerrainSource(maplibregl.addProtocol);
20+
const map = new maplibregl.Map({
21+
container: 'map',
22+
style: {
23+
version: 8,
24+
center: [139.6917, 35.6895],
25+
zoom: 10,
26+
pitch: 30,
27+
maxPitch: 100,
28+
sources: {
29+
terrain: gsiTerrainSource,
30+
seamlessphoto: {
31+
type: 'raster',
32+
tiles: [
33+
'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
34+
],
35+
maxzoom: 18,
36+
tileSize: 256,
37+
attribution:
38+
'<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',
39+
},
40+
},
41+
layers: [
42+
{
43+
id: 'seamlessphoto',
44+
source: 'seamlessphoto',
45+
type: 'raster',
46+
},
47+
],
48+
terrain: {
49+
source: 'terrain',
50+
exaggeration: 1.2,
51+
},
52+
},
53+
});
54+
</script>
55+
</body>
3056
```
3157

3258
`useGsiTerrainSource()`は第2引数でオプションを受け取ります。
@@ -38,6 +64,39 @@ new Map({
3864
| `minzoom` | `number` | 最小ズームレベル、デフォルトは`1` |
3965
| `attribution` | `string` | デフォルトは`地理院タイル` |
4066

67+
### npm module として利用する
68+
69+
```sh
70+
npm install maplibre-gl-gsi-terrain
71+
```
72+
73+
```typescript
74+
import maplibregl from 'maplibre-gl';
75+
import { useGsiTerrainSource } from 'maplibre-gl-gsi-terrain';
76+
const gsiTerrainSource = useGsiTerrainSource(maplibregl.addProtocol);
77+
```
78+
79+
### `ProtocolAction`を直接利用する
80+
81+
`getGsiDemProtocolAction()`を利用することで、`ProtocolAction`を取得できます。通常のケースでは`useGsiTerrainSource()`の利用を推奨します。
82+
83+
```typescript
84+
import maplibregl, { RasterDEMSourceSpecification } from 'maplibre-gl';
85+
import { getGsiDemProtocolAction } from '../src/terrain.ts';
86+
87+
const protocolAction = getGsiDemProtocolAction('gsidem');
88+
maplibregl.addProtocol('gsidem', protocolAction);
89+
const gsiTerrainSource: RasterDEMSourceSpecification = {
90+
type: 'raster-dem',
91+
tiles: ['gsidem://https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png'],
92+
tileSize: 256,
93+
minzoom: 1,
94+
maxzoom: 17,
95+
attribution:
96+
'<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',
97+
};
98+
```
99+
41100
### 産総研シームレス標高タイルを利用する例
42101

43102
```typescript

‎example/index.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import maplibregl from 'maplibre-gl';
1+
import maplibregl, { RasterDEMSourceSpecification } from 'maplibre-gl';
22
import 'maplibre-gl/dist/maplibre-gl.css';
3-
import { useGsiTerrainSource } from '../src/terrain.ts';
3+
import { getGsiDemProtocolAction } from '../src/terrain.ts';
44

5-
const gsiTerrainSource = useGsiTerrainSource(maplibregl.addProtocol, {
6-
tileUrl: 'https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png',
5+
const protocolAction = getGsiDemProtocolAction('gsidem');
6+
maplibregl.addProtocol('gsidem', protocolAction);
7+
const gsiTerrainSource: RasterDEMSourceSpecification = {
8+
type: 'raster-dem',
9+
tiles: ['gsidem://https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png'],
10+
tileSize: 256,
11+
minzoom: 1,
712
maxzoom: 17,
813
attribution:
9-
'<a href="https://gbank.gsj.jp/seamless/elev/">産総研シームレス標高タイル</a>',
10-
});
14+
'<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',
15+
};
1116

1217
new maplibregl.Map({
1318
container: 'app',

‎package.json

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "maplibre-gl-gsi-terrain",
3-
"version": "2.0.0",
3+
"version": "2.1.0",
44
"type": "module",
55
"main": "./dist/terrain.js",
66
"types": "./dist/terrain.d.ts",
@@ -11,11 +11,16 @@
1111
"dev": "vite -c vite.config.example.ts",
1212
"build:example": "vite build -c vite.config.example.ts",
1313
"build": "vite build && tsc",
14-
"prepare": "npm run build"
14+
"prepare": "npm run build",
15+
"test": "vitest src --coverage --coverage.provider=v8"
1516
},
1617
"devDependencies": {
18+
"@vitest/browser": "^2.1.8",
19+
"@vitest/coverage-v8": "^2.1.8",
1720
"maplibre-gl": "^5.0.0",
21+
"playwright": "^1.49.1",
1822
"typescript": "^5.5.3",
19-
"vite": "^3.2.3"
23+
"vite": "^3.2.3",
24+
"vitest": "^2.1.8"
2025
}
2126
}

0 commit comments

Comments
 (0)