Skip to content

Commit 0784565

Browse files
huangliihuanglii
authored
Support a URL to a GeoJSON file for masking (#4)
* Refactor ImageLayer mask handling and improve typings Refactored mask logic into a dedicated module, supporting async GeoJSON mask loading and improved polygon extraction. Updated ImageLayer and arrugator types for better clarity and consistency, and added new dependencies (@types/geojson, es-toolkit). Updated usage examples and documentation to reflect these changes. * Update Chongqing demo data and images Added chongqing.geojson and Terrain_CQ.jpeg for demo purposes. Updated image-mask.html and image.html to reference new data and images. Removed outdated Terrain_CQ.jpg and Terrain_CQ.png files. * update * Create famous-hands-divide.md
1 parent 445dc5e commit 0784565

File tree

20 files changed

+435
-234
lines changed

20 files changed

+435
-234
lines changed

‎.changeset/famous-hands-divide.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+
Support a URL to a GeoJSON file for masking

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Install the desired package using your favorite package manager:
2626
pnpm add @naivemap/maplibre-gl-echarts-layer echarts maplibre-gl
2727

2828
# Install ImageLayer
29-
pnpm add @naivemap/maplibre-gl-image-layer proj4js maplibre-gl
29+
pnpm add @naivemap/maplibre-gl-image-layer proj4 maplibre-gl
3030
```
3131

3232
### Quick Usage Example (`EChartsLayer`)

‎docs/examples/image-mask.md‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
# Georeferenced Image with Mask
33

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

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

@@ -10,7 +10,10 @@ Display a georeferenced image with a polygon mask to show only a specific area.
1010
<html lang="en">
1111
<head>
1212
<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." />
13+
<meta
14+
property="og:description"
15+
content="Display a georeferenced image with a polygon mask to show only a specific area."
16+
/>
1417
<meta charset="utf-8" />
1518
<meta name="viewport" content="width=device-width, initial-scale=1" />
1619
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
@@ -29,36 +32,25 @@ Display a georeferenced image with a polygon mask to show only a specific area.
2932
container: 'map',
3033
style: 'https://www.naivemap.com/demotiles/style.json',
3134
bounds: [
32-
[105.289838, 32.204171],
33-
[110.195632, 28.164713]
35+
[105.29197, 32.20291],
36+
[110.19401, 28.16587]
3437
],
3538
fitBoundsOptions: {
3639
padding: { top: 10, bottom: 10, left: 10, right: 10 }
3740
}
3841
})
3942
map.on('load', () => {
4043
const layer4326 = new ImageLayer('image-layer', {
41-
url: './images/Terrain_CQ.png',
44+
url: './images/Terrain_CQ.jpeg',
4245
projection: 'EPSG:4326',
4346
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
47+
[105.29197, 32.20291],
48+
[110.19401, 32.20291],
49+
[110.19401, 28.16587],
50+
[105.29197, 28.16587]
4851
],
4952
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-
}
53+
data: './data/chongqing.geojson'
6254
}
6355
})
6456

‎docs/examples/image-v4.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
# Georeferenced Image for maplibre-gl v4
3+
4+
Display an image with a custom projection for maplibre-gl v4.
5+
6+
<iframe src="/maplibre-gl-layers/demos/image-v4.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 for maplibre-gl v4</title>
13+
<meta property="og:description" content="Display an image with a custom projection for maplibre-gl v4." />
14+
<meta charset="utf-8" />
15+
<meta name="viewport" content="width=device-width, initial-scale=1" />
16+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
17+
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
18+
19+
<script src="https://unpkg.com/proj4"></script>
20+
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
21+
<link rel="stylesheet" href="./style.css" />
22+
</head>
23+
24+
<body>
25+
<div id="map"></div>
26+
<script>
27+
const map = new maplibregl.Map({
28+
container: 'map',
29+
style: 'https://www.naivemap.com/demotiles/style.json',
30+
bounds: [
31+
[105.29197, 32.20291],
32+
[110.19401, 28.16587]
33+
],
34+
fitBoundsOptions: {
35+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
36+
}
37+
})
38+
map.on('load', () => {
39+
map.addSource('chongqing', {
40+
type: 'geojson',
41+
data: './data/chongqing.geojson'
42+
})
43+
const layer = new ImageLayer('image-layer', {
44+
url: './images/Terrain_CQ.jpeg',
45+
projection: 'EPSG:4326',
46+
coordinates: [
47+
[105.29197, 32.20291],
48+
[110.19401, 32.20291],
49+
[110.19401, 28.16587],
50+
[105.29197, 28.16587]
51+
]
52+
})
53+
map.addLayer(layer)
54+
map.addLayer({
55+
id: 'chongqing',
56+
type: 'line',
57+
source: 'chongqing'
58+
})
59+
})
60+
</script>
61+
</body>
62+
</html>
63+
64+
```

‎docs/examples/image.md‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,34 @@ Display an image with a custom projection (e.g., EPSG:4326).
2727
container: 'map',
2828
style: 'https://www.naivemap.com/demotiles/style.json',
2929
bounds: [
30-
[105.289838, 32.204171],
31-
[110.195632, 28.164713]
30+
[105.29197, 32.20291],
31+
[110.19401, 28.16587]
3232
],
3333
fitBoundsOptions: {
3434
padding: { top: 10, bottom: 10, left: 10, right: 10 }
3535
}
3636
})
3737
map.on('load', () => {
38-
const layer4326 = new ImageLayer('image-layer', {
39-
url: './images/Terrain_CQ.png',
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.jpeg',
4044
projection: 'EPSG:4326',
4145
coordinates: [
42-
[105.289838, 32.204171], // top-left
43-
[110.195632, 32.204171], // top-right
44-
[110.195632, 28.164713], // bottom-right
45-
[105.289838, 28.164713] // bottom-left
46+
[105.29197, 32.20291],
47+
[110.19401, 32.20291],
48+
[110.19401, 28.16587],
49+
[105.29197, 28.16587]
4650
]
4751
})
48-
49-
map.addLayer(layer4326)
52+
map.addLayer(layer)
53+
map.addLayer({
54+
id: 'chongqing',
55+
type: 'line',
56+
source: 'chongqing'
57+
})
5058
})
5159
</script>
5260
</body>

‎docs/public/demos/data/chongqing.geojson‎

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

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

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<html lang="en">
33
<head>
44
<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." />
5+
<meta
6+
property="og:description"
7+
content="Display a georeferenced image with a polygon mask to show only a specific area."
8+
/>
69
<meta charset="utf-8" />
710
<meta name="viewport" content="width=device-width, initial-scale=1" />
811
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
@@ -21,36 +24,25 @@
2124
container: 'map',
2225
style: 'https://www.naivemap.com/demotiles/style.json',
2326
bounds: [
24-
[105.289838, 32.204171],
25-
[110.195632, 28.164713]
27+
[105.29197, 32.20291],
28+
[110.19401, 28.16587]
2629
],
2730
fitBoundsOptions: {
2831
padding: { top: 10, bottom: 10, left: 10, right: 10 }
2932
}
3033
})
3134
map.on('load', () => {
3235
const layer4326 = new ImageLayer('image-layer', {
33-
url: './images/Terrain_CQ.png',
36+
url: './images/Terrain_CQ.jpeg',
3437
projection: 'EPSG:4326',
3538
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
39+
[105.29197, 32.20291],
40+
[110.19401, 32.20291],
41+
[110.19401, 28.16587],
42+
[105.29197, 28.16587]
4043
],
4144
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-
}
45+
data: './data/chongqing.geojson'
5446
}
5547
})
5648

‎docs/public/demos/image-v4.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>Georeferenced Image for maplibre-gl v4</title>
5+
<meta property="og:description" content="Display an image with a custom projection for maplibre-gl v4." />
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />
9+
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
10+
11+
<script src="https://unpkg.com/proj4"></script>
12+
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
13+
<link rel="stylesheet" href="./style.css" />
14+
</head>
15+
16+
<body>
17+
<div id="map"></div>
18+
<script>
19+
const map = new maplibregl.Map({
20+
container: 'map',
21+
style: 'https://www.naivemap.com/demotiles/style.json',
22+
bounds: [
23+
[105.29197, 32.20291],
24+
[110.19401, 28.16587]
25+
],
26+
fitBoundsOptions: {
27+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
28+
}
29+
})
30+
map.on('load', () => {
31+
map.addSource('chongqing', {
32+
type: 'geojson',
33+
data: './data/chongqing.geojson'
34+
})
35+
const layer = new ImageLayer('image-layer', {
36+
url: './images/Terrain_CQ.jpeg',
37+
projection: 'EPSG:4326',
38+
coordinates: [
39+
[105.29197, 32.20291],
40+
[110.19401, 32.20291],
41+
[110.19401, 28.16587],
42+
[105.29197, 28.16587]
43+
]
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>

‎docs/public/demos/image.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,34 @@
1919
container: 'map',
2020
style: 'https://www.naivemap.com/demotiles/style.json',
2121
bounds: [
22-
[105.289838, 32.204171],
23-
[110.195632, 28.164713]
22+
[105.29197, 32.20291],
23+
[110.19401, 28.16587]
2424
],
2525
fitBoundsOptions: {
2626
padding: { top: 10, bottom: 10, left: 10, right: 10 }
2727
}
2828
})
2929
map.on('load', () => {
30-
const layer4326 = new ImageLayer('image-layer', {
31-
url: './images/Terrain_CQ.png',
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.jpeg',
3236
projection: 'EPSG:4326',
3337
coordinates: [
34-
[105.289838, 32.204171], // top-left
35-
[110.195632, 32.204171], // top-right
36-
[110.195632, 28.164713], // bottom-right
37-
[105.289838, 28.164713] // bottom-left
38+
[105.29197, 32.20291],
39+
[110.19401, 32.20291],
40+
[110.19401, 28.16587],
41+
[105.29197, 28.16587]
3842
]
3943
})
40-
41-
map.addLayer(layer4326)
44+
map.addLayer(layer)
45+
map.addLayer({
46+
id: 'chongqing',
47+
type: 'line',
48+
source: 'chongqing'
49+
})
4250
})
4351
</script>
4452
</body>

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

56.9 KB
Loading

0 commit comments

Comments
 (0)