Skip to content

Commit 42e7dd6

Browse files
huangliihuanglii
authored
Update docs (#2)
* update docs * update docs * update docs * update docs * update docs * Create stale-boats-carry.md
1 parent 5719afe commit 42e7dd6

File tree

27 files changed

+504
-473
lines changed

27 files changed

+504
-473
lines changed

‎.changeset/stale-boats-carry.md‎

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

‎docs/.vitepress/config/index.mts‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { fileURLToPath } from 'node:url'
44
import { ReflectionKind } from 'typedoc'
55
import type { DefaultTheme } from 'vitepress'
66
import { defineConfig } from 'vitepress'
7-
import apiJSON from '../../api/echarts-layer/api.json'
7+
import apiJSON1 from '../../api/echarts-layer/api.json'
8+
import apiJSON2 from '../../api/image-layer/api.json'
89
import { pascalToKebab, singularToPlural } from './util'
910

1011
// https://vitepress.dev/reference/site-config
1112
export default defineConfig({
1213
lang: 'zh-Hans-CN',
13-
title: 'maplibre-gl-layers',
14-
// titleTemplate: 'Lib',
15-
description: '自定义图层集',
14+
title: 'Custom layers',
15+
// description: '自定义图层集',
1616
base: '/maplibre-gl-layers/',
1717
head: [['link', { rel: 'icon', href: '/maplibre-gl-layers/logo.svg' }]],
1818
cleanUrls: true,
@@ -34,27 +34,27 @@ export default defineConfig({
3434
dark: '/logo.svg'
3535
},
3636
nav: [
37-
{ text: '快速开始', link: '/starter' },
38-
{ text: 'API', link: '/api' },
39-
{ text: '示例', link: '/examples' }
37+
{ text: 'Guide', link: '/guide' },
38+
{ text: 'API References', link: '/api' },
39+
{ text: 'Examples', link: '/examples' }
4040
],
4141
sidebar: {
4242
// '/api': sidebarApi(),
4343
api: [
4444
{
45-
text: 'echarts-layer',
45+
text: 'EChartsLayer',
4646
link: '/api/echarts-layer',
47-
items: sidebarApi('echarts-layer')
47+
items: sidebarApi('echarts-layer', apiJSON1)
4848
},
4949
{
50-
text: 'image-layer',
50+
text: 'ImageLayer',
5151
link: '/api/image-layer',
52-
items: sidebarApi('image-layer')
52+
items: sidebarApi('image-layer', apiJSON2)
5353
}
5454
],
5555
'/examples': [
5656
{
57-
text: '示例',
57+
text: 'Examples',
5858
link: '/examples',
5959
items: sidebarExamples()
6060
}
@@ -68,60 +68,60 @@ export default defineConfig({
6868
],
6969
editLink: {
7070
pattern: 'https://github.com/naivemap/maplibre-gl-layers/edit/main/docs/:path',
71-
text: '在 GitHub 上编辑此页面'
71+
// text: '在 GitHub 上编辑此页面'
7272
},
7373
footer: {
7474
// message: '基于 MIT 许可发布',
75-
copyright: `版权所有 © 2025-${new Date().getFullYear()} naivemap`
76-
},
77-
docFooter: {
78-
prev: '上一篇',
79-
next: '下一篇'
75+
copyright: `Copyright © 2025-${new Date().getFullYear()} naivemap`
8076
},
77+
// docFooter: {
78+
// prev: '上一篇',
79+
// next: '下一篇'
80+
// },
8181
outline: {
82-
label: '目录',
82+
// label: '目录',
8383
level: [2, 3]
8484
},
8585
lastUpdated: {
86-
text: '最后更新于',
86+
// text: '最后更新于',
8787
formatOptions: {
8888
dateStyle: 'short',
8989
timeStyle: 'medium'
9090
}
9191
},
92-
langMenuLabel: '多语言',
93-
returnToTopLabel: '回到顶部',
94-
sidebarMenuLabel: '菜单',
95-
darkModeSwitchLabel: '主题',
96-
lightModeSwitchTitle: '切换到浅色模式',
97-
darkModeSwitchTitle: '切换到深色模式',
98-
skipToContentLabel: '跳转到内容',
99-
notFound: {
100-
title: '找不到页面',
101-
quote: '抱歉，我们无法找到您需要的页面。',
102-
linkLabel: '返回首页',
103-
linkText: '返回首页'
104-
},
92+
// langMenuLabel: '多语言',
93+
// returnToTopLabel: '回到顶部',
94+
// sidebarMenuLabel: '菜单',
95+
// darkModeSwitchLabel: '主题',
96+
// lightModeSwitchTitle: '切换到浅色模式',
97+
// darkModeSwitchTitle: '切换到深色模式',
98+
// skipToContentLabel: '跳转到内容',
99+
// notFound: {
100+
// title: '找不到页面',
101+
// quote: '抱歉，我们无法找到您需要的页面。',
102+
// linkLabel: '返回首页',
103+
// linkText: '返回首页'
104+
// },
105105
search: {
106106
provider: 'local',
107107
options: {
108-
translations: {
109-
button: {
110-
buttonText: '搜索文档',
111-
buttonAriaLabel: '搜索文档'
112-
},
113-
modal: {
114-
displayDetails: '显示匹配详情',
115-
resetButtonTitle: '清除查询条件',
116-
backButtonTitle: '关闭搜索',
117-
noResultsText: '无法找到相关结果',
118-
footer: {
119-
selectText: '选择',
120-
navigateText: '切换',
121-
closeText: '取消'
122-
}
123-
}
124-
}
108+
// translations: {
109+
// button: {
110+
// buttonText: '搜索文档',
111+
// buttonAriaLabel: '搜索文档'
112+
// },
113+
// modal: {
114+
// displayDetails: '显示匹配详情',
115+
// resetButtonTitle: '清除查询条件',
116+
// backButtonTitle: '关闭搜索',
117+
// noResultsText: '无法找到相关结果',
118+
// footer: {
119+
// selectText: '选择',
120+
// navigateText: '切换',
121+
// closeText: '取消'
122+
// }
123+
// }
124+
// }
125125
}
126126
}
127127
}
@@ -130,12 +130,12 @@ export default defineConfig({
130130
/**
131131
* 生成 API 侧边栏
132132
*/
133-
function sidebarApi(pkg: string): DefaultTheme.SidebarItem[] {
133+
function sidebarApi(pkg: string, api: any): DefaultTheme.SidebarItem[] {
134134
/**
135135
* 按类型分组 Kinds of reflection:
136136
* URL_ADDRESS * https://typedoc.org/api/enums/Models.ReflectionKind.html
137137
*/
138-
const groups = Map.groupBy(apiJSON.children, (item) => {
138+
const groups = Map.groupBy(api.children, (item) => {
139139
return ReflectionKind[item.kind]
140140
})
141141

‎docs/guide/index.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Guide
2+
3+
This repository provides a collection of custom layer implementations for MapLibre GL JS, designed to extend its visualization capabilities.
4+
5+
## Introduction
6+
7+
EChartsLayer ([@naivemap/maplibre-gl-echarts-layer](https://www.npmjs.com/package/@naivemap/maplibre-gl-echarts-layer)): Integrates Apache ECharts with MapLibre GL JS, specifically enabling the use of **Lines graphs** and **Scatter (bubble)** charts as a map layer. This allows for visualizing connections, paths, and point-based data with the rich styling capabilities of ECharts.
8+
9+
ImageLayer ([@naivemap/maplibre-gl-image-layer](https://www.npmjs.com/package/@naivemap/maplibre-gl-image-layer)): A versatile layer for displaying georeferenced images with **various projections** on the map. It supports loading and correctly positioning images from different coordinate systems, making it ideal for integrating non-standard raster data, historical maps, or aerial imagery.
10+
11+
## Getting Started
12+
13+
### [EChartsLayer](../api/echarts-layer/)
14+
15+
#### Install
16+
17+
::: code-group
18+
19+
```sh [pnpm]
20+
$ pnpm add @naivemap/maplibre-gl-echarts-layer
21+
```
22+
23+
```sh [npm]
24+
$ npm add @naivemap/maplibre-gl-echarts-layer
25+
```
26+
27+
```sh [yarn]
28+
$ yarn add @naivemap/maplibre-gl-echarts-layer
29+
```
30+
31+
:::
32+
33+
### Usage
34+
35+
```ts
36+
import EChartsLayer from '@naivemap/maplibre-gl-echarts-layer'
37+
38+
const layer = new EChartsLayer('echarts-layer', option)
39+
map.addLayer(layer)
40+
```
41+
42+
### [ImageLayer](../api/image-layer/)
43+
44+
#### Install
45+
46+
::: code-group
47+
48+
```sh [pnpm]
49+
$ pnpm add @naivemap/maplibre-gl-image-layer
50+
```
51+
52+
```sh [npm]
53+
$ npm add @naivemap/maplibre-gl-image-layer
54+
```
55+
56+
```sh [yarn]
57+
$ yarn add @naivemap/maplibre-gl-image-layer
58+
```
59+
60+
:::
61+
62+
### Usage
63+
64+
```ts
65+
import ImageLayer from '@naivemap/maplibre-gl-image-layer'
66+
67+
const layer = new ImageLayer('image-layer', option)
68+
map.addLayer(layer)
69+
```

‎docs/index.md‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,28 @@
33
layout: home
44

55
hero:
6-
name: 'maplibre-gl-layers'
7-
text: '自定义图层集'
6+
name: 'Custom layers'
7+
text: 'for MapLibre GL JS'
88
tagline:
99
image:
1010
src: /logo.svg
1111
alt: maplibre-gl-layers
1212
actions:
1313
- theme: brand
14-
text: 快速开始
15-
link: /starter
14+
text: Get started
15+
link: /guide
1616
- theme: alt
1717
text: API References
1818
link: /api
1919

2020
features:
21-
- title: Feature A
22-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
23-
- title: Feature B
24-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
25-
- title: Feature C
26-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
21+
- icon: 📊
22+
title: EChartsLayer
23+
link: ./api/echarts-layer/
24+
- icon: 🖼️
25+
title: ImageLayer
26+
link: ./api/image-layer
27+
- icon: ✨
28+
title: One More Thing
29+
link: https://github.com/naivemap/maplibre-gl-layers
2730
---

‎docs/starter/index.md‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎examples/image.js‎ renamed to ‎examples/image.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1+
import maplibregl from 'maplibre-gl'
2+
import 'maplibre-gl/dist/maplibre-gl.css'
3+
import ImageLayer from '../packages/maplibre-gl-image-layer/src'
4+
15
const map = new maplibregl.Map({
26
container: 'map',
37
style: 'https://www.naivemap.com/demotiles/style.json',
48
hash: true,
59
bounds: [
610
[105.289838, 32.204171],
7-
[110.195632, 28.164713],
11+
[110.195632, 28.164713]
812
],
913
fitBoundsOptions: {
10-
padding: { top: 10, bottom: 10, left: 10, right: 10 },
11-
},
14+
padding: { top: 10, bottom: 10, left: 10, right: 10 }
15+
}
1216
})
1317

1418
map.on('load', () => {
@@ -19,8 +23,8 @@ map.on('load', () => {
1923
[105.289838, 32.204171], // top-left
2024
[110.195632, 32.204171], // top-right
2125
[110.195632, 28.164713], // bottom-right
22-
[105.289838, 28.164713], // bottom-left
23-
],
26+
[105.289838, 28.164713] // bottom-left
27+
]
2428
})
2529

2630
map.addLayer(layer4326)

‎examples/lines.js‎ renamed to ‎examples/lines.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import maplibregl from 'maplibre-gl'
2+
import 'maplibre-gl/dist/maplibre-gl.css'
3+
import EChartsLayer, { type ECOption } from '../packages/maplibre-gl-echarts-layer/src'
4+
15
const map = new maplibregl.Map({
26
container: 'map',
37
style: 'https://www.naivemap.com/demotiles/style.json',
@@ -21,7 +25,7 @@ map.on('load', () => {
2125
}
2226
}
2327

24-
const data = [
28+
const data: [number, number, number, number, string, number][] = [
2529
[113.26388, 23.12946, 106.547764, 29.565907, '广州', 60],
2630
[108.939839, 34.34127, 106.547764, 29.565907, '西安', 5],
2731
[113.624931, 34.74725, 106.547764, 29.565907, '郑州', 12],
@@ -55,8 +59,8 @@ map.on('load', () => {
5559
[101.777819, 36.617289, 106.547764, 29.565907, '西宁', 2]
5660
]
5761

58-
const scatterData = []
59-
const lineData = []
62+
const scatterData: any[] = []
63+
const lineData: any[] = []
6064

6165
for (let i = 0; i < data.length; i++) {
6266
const item = data[i]
@@ -70,11 +74,11 @@ map.on('load', () => {
7074
lineData.push({
7175
name: name,
7276
value: value,
73-
coords: [item.slice(0, 2), item.slice(2, 4)]
77+
coords: [item.slice(0, 2).map(Number) as [number, number], item.slice(2, 4).map(Number) as [number, number]]
7478
})
7579
}
7680

77-
const option = {
81+
const option: ECOption = {
7882
tooltip: {
7983
trigger: 'item',
8084
textStyle: {

0 commit comments

Comments
 (0)