Skip to content

Commit 20d8b69

Browse files
coderhyhcoderhyh
committed
feat: learn mapbox
1 parent 1123828 commit 20d8b69

File tree

17 files changed

+368
-46
lines changed

17 files changed

+368
-46
lines changed

‎.vitepress/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default defineConfig({
3131
],
3232
],
3333
themeConfig: {
34-
// logo: '/logo.svg',
34+
logo: 'https://blog.coderhyh.cn/logo.png',
3535
nav,
3636
sidebar,
3737
socialLinks: [{ icon: 'github', link: 'https://github.com/coderhyh/coding-playground' }],

‎.vitepress/sidebar.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import type { DefaultTheme } from 'vitepress'
22

33
export default <DefaultTheme.Sidebar>[
44
{
5-
text: '指引',
6-
items: [{ text: '入手指南', link: '/' }],
5+
text: '开始',
6+
items: [{ text: '指引', link: '/' }],
77
},
88
{
99
text: '性能优化',
@@ -13,13 +13,22 @@ export default <DefaultTheme.Sidebar>[
1313
text: 'HOOKS',
1414
items: [{ text: 'useSum', link: '/packages/hooks/useSum' }],
1515
},
16+
{
17+
text: 'CSS',
18+
items: [
19+
{ text: '使元素保持宽高比', link: '/packages/css/aspect-ratio' },
20+
{ text: '聚焦input父元素改变背景颜色', link: '/packages/css/focus-within' },
21+
],
22+
},
1623
{
1724
text: 'GIS',
1825
items: [
1926
{ text: 'Mapbox入门', link: '/packages/gis/mapbox/getting-started' },
2027
{ text: '点击飞行效果', link: '/packages/gis/mapbox/fly-to' },
2128
{ text: '地球自转效果', link: '/packages/gis/mapbox/rotation' },
2229
{ text: '添加图片', link: '/packages/gis/mapbox/add-img' },
30+
{ text: '添加图层', link: '/packages/gis/mapbox/add-layer' },
31+
{ text: '添加标记以及弹窗', link: '/packages/gis/mapbox/add-marker-popup' },
2332
],
2433
},
2534
]

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@vitepress-demo-preview/plugin": "^1.4.0",
3939
"eslint": "^9.22.0",
4040
"eslint-plugin-format": "^0.1.3",
41+
"less": "^4.2.2",
4142
"lint-staged": "^15.5.0",
4243
"simple-git-hooks": "^2.11.1",
4344
"ts-loader": "^9.5.2",

‎packages/css/aspect-ratio/demo.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="aspect-ratio">
3+
<img src="https://blog.coderhyh.cn/logo.png" alt="logo" />
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
9+
</script>
10+
11+
<style scoped lang="less">
12+
.aspect-ratio {
13+
width: 200px;
14+
aspect-ratio: 1 / 1;
15+
overflow: hidden;
16+
}
17+
</style>

‎packages/css/aspect-ratio/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# 使元素保持宽高比
2+
3+
:::preview 说明 || 使元素保持宽高比
4+
5+
demo-preview=./demo.vue
6+
7+
:::

‎packages/css/focus-within/demo.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<input type="text" />
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
9+
</script>
10+
11+
<style scoped lang="less">
12+
div {
13+
padding: 10px;
14+
border: 1px solid #ccc;
15+
border-radius: 4px;
16+
17+
&:focus-within {
18+
background-color: pink;
19+
}
20+
21+
input {
22+
width: 100%;
23+
border: 1px solid #ccc;
24+
background-color: #fff;
25+
border-radius: 4px;
26+
}
27+
}
28+
</style>

‎packages/css/focus-within/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# 聚焦input父元素改变背景颜色
2+
3+
:::preview 说明 || 聚焦input父元素改变背景颜色
4+
5+
demo-preview=./demo.vue
6+
7+
:::

‎packages/gis/mapbox/add-img/demo.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,16 @@ onMounted(() => {
2020
projection: 'globe',
2121
zoom: 1,
2222
})
23-
23+
map.value.addControl(new mapboxgl.FullscreenControl())
2424
map.value.on('style.load', () => {
2525
map.value?.addSource('image', {
2626
type: 'image',
2727
url: '/coding-playground/avatar.jpg',
2828
coordinates: [
2929
[120.153576, 30.287459],
3030
[120.153576 + 10, 30.287459],
31-
[120.153576 + 10, 30.287459 + 10],
32-
[120.153576, 30.287459 + 10],
31+
[120.153576 + 10, 30.287459 - 10],
32+
[120.153576, 30.287459 - 10],
3333
],
3434
})
3535

‎packages/gis/mapbox/add-layer/demo.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="h-500px">
3+
<div ref="mapRef" class="h-100% w-100%" />
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts">
8+
import mapboxgl from 'mapbox-gl'
9+
import { MapboxEnum } from '~/enums/mapbox'
10+
import urbanAreas from './ne_50m_urban_areas.json'
11+
12+
mapboxgl.accessToken = MapboxEnum.ACCESS_TOKEN
13+
const mapRef = ref<HTMLDivElement>()
14+
const map = ref<mapboxgl.Map>()
15+
16+
onMounted(() => {
17+
map.value = new mapboxgl.Map({
18+
container: mapRef.value!,
19+
style: 'mapbox://styles/mapbox/streets-v12',
20+
center: [120.153576, 30.287459],
21+
projection: 'globe',
22+
zoom: 1,
23+
})
24+
map.value.addControl(new mapboxgl.FullscreenControl())
25+
map.value.on('load', () => {
26+
map.value?.addSource('urban-areas', {
27+
type: 'geojson',
28+
data: urbanAreas as GeoJSON.GeoJSON,
29+
})
30+
31+
map.value?.addLayer({
32+
id: 'urban-areas',
33+
source: 'urban-areas',
34+
type: 'fill',
35+
paint: {
36+
'fill-color': '#f08',
37+
'fill-opacity': 0.4,
38+
},
39+
})
40+
})
41+
})
42+
</script>

‎packages/gis/mapbox/add-layer/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# 添加json图层
2+
3+
:::preview 说明 || Mapbox 添加json图层
4+
5+
demo-preview=./demo.vue
6+
7+
:::

0 commit comments

Comments
 (0)