Skip to content

Commit 445dc5e

Browse files
huangliihuanglii
committed
Add image mask example
1 parent 0b41afc commit 445dc5e

File tree

11 files changed

+155
-88
lines changed

11 files changed

+155
-88
lines changed

‎docs/examples/image-27770.md‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,9 @@ Display an image with a custom defined projection (e.g., EPSG:27770).
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" />
1717
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
18-
<script src="https://unpkg.com/proj4/dist/proj4.js"></script>
18+
<script src="https://unpkg.com/proj4"></script>
1919
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
20-
<style>
21-
* {
22-
margin: 0;
23-
padding: 0;
24-
}
25-
26-
#map {
27-
height: 400px;
28-
}
29-
</style>
20+
<link rel="stylesheet" href="./style.css" />
3021
</head>
3122

3223
<body>
@@ -42,13 +33,9 @@ Display an image with a custom defined projection (e.g., EPSG:27770).
4233
const map = new maplibregl.Map({
4334
container: 'map',
4435
style: 'https://www.naivemap.com/demotiles/style.json',
45-
bounds: [
46-
[105.289838, 32.204171],
47-
[110.195632, 28.164713]
48-
],
49-
fitBoundsOptions: {
50-
padding: { top: 10, bottom: 10, left: 10, right: 10 }
51-
}
36+
center: [-5.24, 56.4],
37+
zoom: 3.2,
38+
hash: true
5239
})
5340
map.on('load', () => {
5441
const layer = new ImageLayer('image-layer', {

‎docs/examples/image-mask.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
2+
# Georeferenced Image with Mask
3+
4+
Display a georeferenced image with a polygon mask to show only a specific area.
5+
6+
<iframe src="/maplibre-gl-layers/demos/image-mask.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 Mask</title>
13+
<meta property="og:description" content="Display a georeferenced image with a polygon mask to show only a specific area." />
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/proj4"></script>
19+
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
20+
<script src="https://unpkg.com/[email protected]"></script>
21+
<link rel="stylesheet" href="./style.css" />
22+
</head>
23+
24+
<body>
25+
<div id="map"></div>
26+
<script>
27+
// const pane = new Tweakpane.Pane()
28+
const map = new maplibregl.Map({
29+
container: 'map',
30+
style: 'https://www.naivemap.com/demotiles/style.json',
31+
bounds: [
32+
[105.289838, 32.204171],
33+
[110.195632, 28.164713]
34+
],
35+
fitBoundsOptions: {
36+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
37+
}
38+
})
39+
map.on('load', () => {
40+
const layer4326 = new ImageLayer('image-layer', {
41+
url: './images/Terrain_CQ.png',
42+
projection: 'EPSG:4326',
43+
coordinates: [
44+
[105.289838, 32.204171], // top-left
45+
[110.195632, 32.204171], // top-right
46+
[110.195632, 28.164713], // bottom-right
47+
[105.289838, 28.164713] // bottom-left
48+
],
49+
mask: {
50+
data: {
51+
coordinates: [
52+
[
53+
[106.44608656573695, 29.874792116904175],
54+
[106.44608656573695, 29.35260054138334],
55+
[108.0312946475434, 29.35260054138334],
56+
[108.0312946475434, 29.874792116904175],
57+
[106.44608656573695, 29.874792116904175]
58+
]
59+
],
60+
type: 'Polygon'
61+
}
62+
}
63+
})
64+
65+
map.addLayer(layer4326)
66+
})
67+
</script>
68+
</body>
69+
</html>
70+
71+
```

‎docs/examples/image.md‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,9 @@ Display an image with a custom projection (e.g., EPSG:4326).
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" />
1717
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
18+
<script src="https://unpkg.com/proj4"></script>
1819
<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>
20+
<link rel="stylesheet" href="./style.css" />
2921
</head>
3022

3123
<body>

‎docs/examples/lines.md‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,7 @@ Visualize flight routes and paths with animated lines.
1717
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
1818
<script src="https://unpkg.com/echarts"></script>
1919
<script src="https://unpkg.com/@naivemap/maplibre-gl-echarts-layer"></script>
20-
<style>
21-
* {
22-
margin: 0;
23-
padding: 0;
24-
}
25-
26-
#map {
27-
height: 400px;
28-
}
29-
</style>
20+
<link rel="stylesheet" href="./style.css" />
3021
</head>
3122

3223
<body>

‎docs/examples/scatter.md‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,7 @@ Display a scatter chart with ripple effects.
1717
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
1818
<script src="https://unpkg.com/echarts"></script>
1919
<script src="https://unpkg.com/@naivemap/maplibre-gl-echarts-layer"></script>
20-
<style>
21-
* {
22-
margin: 0;
23-
padding: 0;
24-
}
25-
26-
#map {
27-
height: 400px;
28-
}
29-
</style>
20+
<link rel="stylesheet" href="./style.css" />
3021
</head>
3122

3223
<body>

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@
99
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
1010
<script src="https://unpkg.com/proj4"></script>
1111
<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>
12+
<link rel="stylesheet" href="./style.css" />
2213
</head>
2314

2415
<body>

‎docs/public/demos/image-mask.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 Mask</title>
5+
<meta property="og:description" content="Display a georeferenced image with a polygon mask to show only a specific area." />
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"></script>
11+
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
12+
<script src="https://unpkg.com/[email protected]"></script>
13+
<link rel="stylesheet" href="./style.css" />
14+
</head>
15+
16+
<body>
17+
<div id="map"></div>
18+
<script>
19+
// const pane = new Tweakpane.Pane()
20+
const map = new maplibregl.Map({
21+
container: 'map',
22+
style: 'https://www.naivemap.com/demotiles/style.json',
23+
bounds: [
24+
[105.289838, 32.204171],
25+
[110.195632, 28.164713]
26+
],
27+
fitBoundsOptions: {
28+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
29+
}
30+
})
31+
map.on('load', () => {
32+
const layer4326 = new ImageLayer('image-layer', {
33+
url: './images/Terrain_CQ.png',
34+
projection: 'EPSG:4326',
35+
coordinates: [
36+
[105.289838, 32.204171], // top-left
37+
[110.195632, 32.204171], // top-right
38+
[110.195632, 28.164713], // bottom-right
39+
[105.289838, 28.164713] // bottom-left
40+
],
41+
mask: {
42+
data: {
43+
coordinates: [
44+
[
45+
[106.44608656573695, 29.874792116904175],
46+
[106.44608656573695, 29.35260054138334],
47+
[108.0312946475434, 29.35260054138334],
48+
[108.0312946475434, 29.874792116904175],
49+
[106.44608656573695, 29.874792116904175]
50+
]
51+
],
52+
type: 'Polygon'
53+
}
54+
}
55+
})
56+
57+
map.addLayer(layer4326)
58+
})
59+
</script>
60+
</body>
61+
</html>

‎docs/public/demos/image.html‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@
99
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
1010
<script src="https://unpkg.com/proj4"></script>
1111
<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>
12+
<link rel="stylesheet" href="./style.css" />
2213
</head>
2314

2415
<body>

‎docs/public/demos/lines.html‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@
99
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
1010
<script src="https://unpkg.com/echarts"></script>
1111
<script src="https://unpkg.com/@naivemap/maplibre-gl-echarts-layer"></script>
12-
<style>
13-
* {
14-
margin: 0;
15-
padding: 0;
16-
}
17-
18-
#map {
19-
height: 400px;
20-
}
21-
</style>
12+
<link rel="stylesheet" href="./style.css" />
2213
</head>
2314

2415
<body>

‎docs/public/demos/scatter.html‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@
99
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
1010
<script src="https://unpkg.com/echarts"></script>
1111
<script src="https://unpkg.com/@naivemap/maplibre-gl-echarts-layer"></script>
12-
<style>
13-
* {
14-
margin: 0;
15-
padding: 0;
16-
}
17-
18-
#map {
19-
height: 400px;
20-
}
21-
</style>
12+
<link rel="stylesheet" href="./style.css" />
2213
</head>
2314

2415
<body>

0 commit comments

Comments
 (0)