Skip to content

Commit ee4ede2

Browse files
huangliihuanglii
authored
Fix update mask (#5)
* add updateMask * Create breezy-bananas-bet.md
1 parent 397e541 commit ee4ede2

File tree

17 files changed

+297
-61
lines changed

17 files changed

+297
-61
lines changed

‎.changeset/breezy-bananas-bet.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@naivemap/maplibre-gl-image-layer': patch
3+
---
4+
5+
Add updateMask method for ImageLayer

‎docs/examples/image-27770.md‎

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

2-
# Georeferenced Image with EPSG:27770
2+
# Image with EPSG:27770
33

44
Display an image with a custom defined projection (e.g., EPSG:27770).
55

@@ -9,7 +9,7 @@ Display an image with a custom defined projection (e.g., EPSG:27770).
99
<!doctype html>
1010
<html lang="en">
1111
<head>
12-
<title>Georeferenced Image with EPSG:27770</title>
12+
<title>Image with EPSG:27770</title>
1313
<meta property="og:description" content="Display an image with a custom defined projection (e.g., EPSG:27770)." />
1414
<meta charset="utf-8" />
1515
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎docs/examples/image-3857.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
2+
# Image with EPSG:3857
3+
4+
Display an image with a custom projection (e.g., EPSG:3857).
5+
6+
<iframe src="/maplibre-gl-layers/demos/image-3857.html" width="100%" style="border:none; height:400px"></iframe>
7+
8+
```html
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<title>Image with EPSG:3857</title>
13+
<meta property="og:description" content="Display an image with a custom projection (e.g., EPSG:3857)." />
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+
<link rel="stylesheet" href="./style.css" />
21+
</head>
22+
23+
<body>
24+
<div id="map"></div>
25+
<script>
26+
const map = new maplibregl.Map({
27+
container: 'map',
28+
style: 'https://www.naivemap.com/demotiles/style.json',
29+
bounds: [
30+
[105.29197, 32.20291],
31+
[110.19401, 28.16587]
32+
],
33+
fitBoundsOptions: {
34+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
35+
}
36+
})
37+
map.on('load', () => {
38+
map.addSource('chongqing', {
39+
type: 'geojson',
40+
data: './data/chongqing.geojson'
41+
})
42+
const layer = new ImageLayer('image-layer', {
43+
url: './images/Terrain_CQ_3857.jpeg',
44+
projection: 'EPSG:4326',
45+
coordinates: [
46+
[105.29197, 32.20291],
47+
[110.19401, 32.20291],
48+
[110.19401, 28.16587],
49+
[105.29197, 28.16587]
50+
]
51+
})
52+
map.addLayer(layer)
53+
map.addLayer({
54+
id: 'chongqing',
55+
type: 'line',
56+
source: 'chongqing'
57+
})
58+
})
59+
</script>
60+
</body>
61+
</html>
62+
63+
```

‎docs/examples/image-mask.md‎

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

2-
# Georeferenced Image with Mask
2+
# Image with Mask
33

4-
property="og:description"
4+
Display an image with a polygon mask to show only a specific area.
55

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

88
```html
99
<!doctype html>
1010
<html lang="en">
1111
<head>
12-
<title>Georeferenced Image with Mask</title>
13-
<meta
14-
property="og:description"
15-
content="Display a georeferenced image with a polygon mask to show only a specific area."
16-
/>
12+
<title>Image with Mask</title>
13+
<meta property="og:description" content="Display an image with a polygon mask to show only a specific area." />
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" />
@@ -27,7 +24,9 @@
2724
<body>
2825
<div id="map"></div>
2926
<script>
30-
// const pane = new Tweakpane.Pane()
27+
const pane = new Tweakpane.Pane({
28+
title: 'Image Layer Option'
29+
})
3130
const map = new maplibregl.Map({
3231
container: 'map',
3332
style: 'https://www.naivemap.com/demotiles/style.json',
@@ -39,22 +38,77 @@
3938
padding: { top: 10, bottom: 10, left: 10, right: 10 }
4039
}
4140
})
41+
4242
map.on('load', () => {
43-
const layer4326 = new ImageLayer('image-layer', {
43+
const layer = new ImageLayer('image-layer', {
4444
url: './images/Terrain_CQ.jpeg',
4545
projection: 'EPSG:4326',
4646
coordinates: [
4747
[105.29197, 32.20291],
4848
[110.19401, 32.20291],
4949
[110.19401, 28.16587],
5050
[105.29197, 28.16587]
51-
],
52-
mask: {
53-
data: './data/chongqing.geojson'
54-
}
51+
]
5552
})
5653
57-
map.addLayer(layer4326)
54+
map.addLayer(layer)
55+
56+
const PARAMS = {
57+
opacity: 1.0,
58+
resampling: 'linear',
59+
maskType: 'in',
60+
maskData: './data/chongqing.geojson'
61+
}
62+
pane.addInput(PARAMS, 'opacity', { min: 0, max: 1, step: 0.1 }).on('change', (e) => {
63+
layer.updateImage({ opacity: e.value })
64+
})
65+
pane
66+
.addInput(PARAMS, 'resampling', {
67+
options: {
68+
linear: 'linear',
69+
nearest: 'nearest'
70+
}
71+
})
72+
.on('change', (e) => {
73+
layer.updateImage({ resampling: e.value })
74+
})
75+
const MASK_PARAMS = {
76+
type: 'in',
77+
data: ''
78+
}
79+
const maskPane = pane.addFolder({ title: '遮罩属性' })
80+
maskPane
81+
.addInput(MASK_PARAMS, 'type', {
82+
options: {
83+
in: 'in',
84+
out: 'out'
85+
}
86+
})
87+
.on('change', (e) => {
88+
layer.updateImage({ mask: { type: e.value } })
89+
})
90+
maskPane
91+
.addInput(MASK_PARAMS, 'data', {
92+
options: {
93+
None: '',
94+
CQ: './data/chongqing.geojson',
95+
BBOX: {
96+
coordinates: [
97+
[
98+
[106.0233, 29.86176],
99+
[106.0233, 29.37936],
100+
[108.32478, 29.37936],
101+
[108.32478, 29.86176],
102+
[106.0233, 29.86176]
103+
]
104+
],
105+
type: 'Polygon'
106+
}
107+
}
108+
})
109+
.on('change', (e) => {
110+
layer.updateMask({ mask: { data: !!e.value ? e.value : undefined } })
111+
})
58112
})
59113
</script>
60114
</body>

‎docs/examples/image-v4.md‎

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

2-
# Georeferenced Image for maplibre-gl v4
2+
# Image for maplibre-gl v4
33

44
Display an image with a custom projection for maplibre-gl v4.
55

@@ -9,7 +9,7 @@ Display an image with a custom projection for maplibre-gl v4.
99
<!doctype html>
1010
<html lang="en">
1111
<head>
12-
<title>Georeferenced Image for maplibre-gl v4</title>
12+
<title>Image for maplibre-gl v4</title>
1313
<meta property="og:description" content="Display an image with a custom projection for maplibre-gl v4." />
1414
<meta charset="utf-8" />
1515
<meta name="viewport" content="width=device-width, initial-scale=1" />

‎docs/examples/image.md‎

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

2-
# Georeferenced Image with EPSG:4326
2+
# Image with EPSG:4326
33

44
Display an image with a custom projection (e.g., EPSG:4326).
55

@@ -9,7 +9,7 @@ Display an image with a custom projection (e.g., EPSG:4326).
99
<!doctype html>
1010
<html lang="en">
1111
<head>
12-
<title>Georeferenced Image with EPSG:4326</title>
12+
<title>Image with EPSG:4326</title>
1313
<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" />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<title>Georeferenced Image with EPSG:27770</title>
4+
<title>Image with EPSG:27770</title>
55
<meta property="og:description" content="Display an image with a custom defined projection (e.g., EPSG:27770)." />
66
<meta charset="utf-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Image with EPSG:3857</title>
5+
<meta property="og:description" content="Display an image with a custom projection (e.g., EPSG:3857)." />
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+
<link rel="stylesheet" href="./style.css" />
13+
</head>
14+
15+
<body>
16+
<div id="map"></div>
17+
<script>
18+
const map = new maplibregl.Map({
19+
container: 'map',
20+
style: 'https://www.naivemap.com/demotiles/style.json',
21+
bounds: [
22+
[105.29197, 32.20291],
23+
[110.19401, 28.16587]
24+
],
25+
fitBoundsOptions: {
26+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
27+
}
28+
})
29+
map.on('load', () => {
30+
map.addSource('chongqing', {
31+
type: 'geojson',
32+
data: './data/chongqing.geojson'
33+
})
34+
const layer = new ImageLayer('image-layer', {
35+
url: './images/Terrain_CQ_3857.jpeg',
36+
projection: 'EPSG:4326', // Use EPSG:4326 for coordinates
37+
coordinates: [
38+
[105.29197, 32.20291],
39+
[110.19401, 32.20291],
40+
[110.19401, 28.16587],
41+
[105.29197, 28.16587]
42+
],
43+
arrugatorStep: 0, // Set to 0 to disable arrugator
44+
})
45+
map.addLayer(layer)
46+
map.addLayer({
47+
id: 'chongqing',
48+
type: 'line',
49+
source: 'chongqing'
50+
})
51+
})
52+
</script>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)