Skip to content

Commit c16de1f

Browse files
huangliihuanglii
committed
Update demo
1 parent 9b43b6d commit c16de1f

File tree

10 files changed

+162
-37
lines changed

10 files changed

+162
-37
lines changed

‎docs/examples/image-27770.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
# Georeferenced Image with EPSG:27770
3+
4+
Display an image with a custom defined projection (e.g., EPSG:27770).
5+
6+
<iframe src="/maplibre-gl-layers/demos/image-27770.html" width="100%" style="border:none; height:400px"></iframe>
7+
8+
```html
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<title>Georeferenced Image with EPSG:27770</title>
13+
<meta property="og:description" content="Display an image with a custom defined projection (e.g., EPSG:27770)." />
14+
<meta charset="utf-8" />
15+
<meta name="viewport" content="width=device-width, initial-scale=1" />
16+
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
17+
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
18+
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
19+
<style>
20+
* {
21+
margin: 0;
22+
padding: 0;
23+
}
24+
25+
#map {
26+
height: 400px;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div id="map"></div>
33+
<script>
34+
const map = new maplibregl.Map({
35+
container: 'map',
36+
style: 'https://www.naivemap.com/demotiles/style.json',
37+
bounds: [
38+
[105.289838, 32.204171],
39+
[110.195632, 28.164713]
40+
],
41+
fitBoundsOptions: {
42+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
43+
}
44+
})
45+
map.on('load', () => {
46+
proj4.defs(
47+
'EPSG:27700',
48+
'+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
49+
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
50+
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
51+
'+units=m +no_defs'
52+
)
53+
const layer4326 = new ImageLayer('image-layer', {
54+
url: 'https://www.naivemap.com/mapbox-gl-js-cookbook/assets/images/4326.png',
55+
projection: 'EPSG:27700',
56+
coordinates: [
57+
[0, 1300000], // top-left
58+
[700000, 1300000], // top-right
59+
[700000, 0], // bottom-right
60+
[0, 0] // bottom-left
61+
]
62+
})
63+
64+
map.addLayer(layer4326)
65+
})
66+
</script>
67+
</body>
68+
</html>
69+
70+
```

‎docs/examples/image.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11

2-
# 投影图片
2+
# Georeferenced Image with EPSG:4326
33

4-
显示 EPSG:4326 投影的图片。
4+
Display an image with a custom projection (e.g., EPSG:4326).
55

66
<iframe src="/maplibre-gl-layers/demos/image.html" width="100%" style="border:none; height:400px"></iframe>
77

88
```html
99
<!doctype html>
10-
<html lang="zh-Hans">
10+
<html lang="en">
1111
<head>
12-
<title>投影图片</title>
13-
<meta property="og:description" content="显示 EPSG:4326 投影的图片。" />
12+
<title>Georeferenced Image with EPSG:4326</title>
13+
<meta property="og:description" content="Display an image with a custom projection (e.g., EPSG:4326)." />
1414
<meta charset="utf-8" />
1515
<meta name="viewport" content="width=device-width, initial-scale=1" />
1616
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

‎docs/examples/lines.md‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11

2-
# 路径图
2+
# Lines Chart
33

4-
property="og:description"
4+
Visualize flight routes and paths with animated lines.
55

66
<iframe src="/maplibre-gl-layers/demos/lines.html" width="100%" style="border:none; height:400px"></iframe>
77

88
```html
99
<!doctype html>
10-
<html lang="zh-Hans">
10+
<html lang="en">
1111
<head>
12-
<title>路径图</title>
13-
<meta
14-
property="og:description"
15-
content="用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。"
16-
/>
12+
<title>Lines Chart</title>
13+
<meta property="og:description" content="Visualize flight routes and paths with animated lines." />
1714
<meta charset="utf-8" />
1815
<meta name="viewport" content="width=device-width, initial-scale=1" />
1916
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
@@ -38,10 +35,10 @@
3835
const map = new maplibregl.Map({
3936
container: 'map',
4037
style: 'https://www.naivemap.com/demotiles/style.json',
41-
center: [103.834171, 36.06138],
42-
minZoom: 3,
38+
center: [106.547764, 29.565907],
39+
minZoom: 1,
4340
maxZoom: 7,
44-
zoom: 3.4
41+
zoom: 3
4542
})
4643
map.on('load', () => {
4744
const colors = ['#00F8FF', '#00FF00', '#FFF800', '#FF0000']

‎docs/examples/scatter.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11

2-
# 散点（气泡）图
2+
# Scatter (Bubble) Chart
33

4-
涟漪特效散点图。
4+
Display a scatter chart with ripple effects.
55

66
<iframe src="/maplibre-gl-layers/demos/scatter.html" width="100%" style="border:none; height:400px"></iframe>
77

88
```html
99
<!doctype html>
10-
<html lang="zh-Hans">
10+
<html lang="en">
1111
<head>
12-
<title>散点（气泡）图</title>
13-
<meta property="og:description" content="涟漪特效散点图。" />
12+
<title>Scatter (Bubble) Chart</title>
13+
<meta property="og:description" content="Display a scatter chart with ripple effects." />
1414
<meta charset="utf-8" />
1515
<meta name="viewport" content="width=device-width, initial-scale=1" />
1616
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

‎docs/public/demos/image-27770.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Georeferenced Image with EPSG:27770</title>
5+
<meta property="og:description" content="Display an image with a custom defined projection (e.g., EPSG:27770)." />
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
9+
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
10+
<script src="https://unpkg.com/proj4/dist/proj4.js"></script>
11+
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
12+
<style>
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
#map {
19+
height: 400px;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<div id="map"></div>
26+
<script>
27+
proj4.defs(
28+
'EPSG:27700',
29+
'+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
30+
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
31+
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
32+
'+units=m +no_defs'
33+
)
34+
const map = new maplibregl.Map({
35+
container: 'map',
36+
style: 'https://www.naivemap.com/demotiles/style.json',
37+
bounds: [
38+
[105.289838, 32.204171],
39+
[110.195632, 28.164713]
40+
],
41+
fitBoundsOptions: {
42+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
43+
}
44+
})
45+
map.on('load', () => {
46+
const layer = new ImageLayer('image-layer', {
47+
url: './images/2000px-British_National_Grid.png',
48+
projection: 'EPSG:27700',
49+
coordinates: [
50+
[0, 1300000], // top-left
51+
[700000, 1300000], // top-right
52+
[700000, 0], // bottom-right
53+
[0, 0] // bottom-left
54+
]
55+
})
56+
57+
map.addLayer(layer)
58+
})
59+
</script>
60+
</body>
61+
</html>

‎docs/public/demos/image.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!doctype html>
2-
<html lang="zh-Hans">
2+
<html lang="en">
33
<head>
4-
<title>投影图片</title>
5-
<meta property="og:description" content="显示 EPSG:4326 投影的图片。" />
4+
<title>Georeferenced Image with EPSG:4326</title>
5+
<meta property="og:description" content="Display an image with a custom projection (e.g., EPSG:4326)." />
66
<meta charset="utf-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
@@ -36,7 +36,7 @@
3636
})
3737
map.on('load', () => {
3838
const layer4326 = new ImageLayer('image-layer', {
39-
url: 'https://www.naivemap.com/mapbox-gl-js-cookbook/assets/images/4326.png',
39+
url: './images/Terrain_CQ.png',
4040
projection: 'EPSG:4326',
4141
coordinates: [
4242
[105.289838, 32.204171], // top-left

‎docs/public/demos/images/2000px-British_National_Grid.png‎

211 KB
Loading

‎docs/public/demos/images/Terrain_CQ.png‎

1.78 MB
Loading

‎docs/public/demos/lines.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<!doctype html>
2-
<html lang="zh-Hans">
2+
<html lang="en">
33
<head>
4-
<title>路径图</title>
5-
<meta
6-
property="og:description"
7-
content="用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。"
8-
/>
4+
<title>Lines Chart</title>
5+
<meta property="og:description" content="Visualize flight routes and paths with animated lines." />
96
<meta charset="utf-8" />
107
<meta name="viewport" content="width=device-width, initial-scale=1" />
118
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
@@ -30,10 +27,10 @@
3027
const map = new maplibregl.Map({
3128
container: 'map',
3229
style: 'https://www.naivemap.com/demotiles/style.json',
33-
center: [103.834171, 36.06138],
34-
minZoom: 3,
30+
center: [106.547764, 29.565907],
31+
minZoom: 1,
3532
maxZoom: 7,
36-
zoom: 3.4
33+
zoom: 3
3734
})
3835
map.on('load', () => {
3936
const colors = ['#00F8FF', '#00FF00', '#FFF800', '#FF0000']

‎docs/public/demos/scatter.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!doctype html>
2-
<html lang="zh-Hans">
2+
<html lang="en">
33
<head>
4-
<title>散点（气泡）图</title>
5-
<meta property="og:description" content="涟漪特效散点图。" />
4+
<title>Scatter (Bubble) Chart</title>
5+
<meta property="og:description" content="Display a scatter chart with ripple effects." />
66
<meta charset="utf-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

0 commit comments

Comments
 (0)