feat: add mapbox demo

Author: coderhyh

.vitepress/config.ts

@@ -10,16 +10,16 @@ import nav from './nav'
 import sidebar from './sidebar'
 
 export default defineConfig({
-  title: ' ',
-  description: 'coding-playground是一个vitepress的起始模板',
+  title: 'Coding Playground',
+  description: 'Coding Playground 是一个代码案例集合库，用于存放各种实用的代码示例和最佳实践。',
   base: '/coding-playground',
   lastUpdated: true,
   head: [
     [
       'link',
       {
         rel: 'icon',
-        href: './vue-icon.svg',
+        href: 'https://cn.vuejs.org/logo.svg',
       },
     ],
     [
@@ -31,7 +31,7 @@ export default defineConfig({
     ],
   ],
   themeConfig: {
-    logo: '/logo.svg',
+    // logo: '/logo.svg',
     nav,
     sidebar,
     socialLinks: [{ icon: 'github', link: 'https://github.com/coderhyh/coding-playground' }],

.vitepress/sidebar.ts

@@ -19,6 +19,7 @@ export default <DefaultTheme.Sidebar>[
       { text: 'Mapbox入门', link: '/packages/gis/mapbox/getting-started' },
       { text: '点击飞行效果', link: '/packages/gis/mapbox/fly-to' },
       { text: '地球自转效果', link: '/packages/gis/mapbox/rotation' },
+      { text: '添加图片', link: '/packages/gis/mapbox/add-img' },
     ],
   },
 ]

index.md

@@ -1,12 +1,8 @@
 ---
-title: coding-playground入手指南
-titleTemplate: vitepress的起始模板
+title: Coding Playground
+titleTemplate: coding-playground
 ---
 
-# coding-playground
+# Coding Playground
 
-coding-playground是一个vitepress的起始模板
-
-## ✨ 特性
-
-- 🏄🏼‍♂️ 结构简洁实用
+这是一个代码案例集合库，用于存放各种实用的代码示例和最佳实践。

package.json

@@ -19,11 +19,10 @@
     "node": ">=18.18.2"
   },
   "scripts": {
-    "build": "npm run clean && vue-tsc --noEmit && vite build",
     "lint": "eslint packages/ --fix",
-    "docs:dev": "vitepress dev",
-    "docs:build": "vitepress build",
-    "docs:preview": "vitepress preview",
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview",
     "postinstall": "npx simple-git-hooks"
   },
   "dependencies": {

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="h-500px">
+    <div ref="mapRef" class="h-100% w-100%" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import mapboxgl from 'mapbox-gl'
+import { MapboxEnum } from '~/enums/mapbox'
+
+mapboxgl.accessToken = MapboxEnum.ACCESS_TOKEN
+const mapRef = ref<HTMLDivElement>()
+const map = ref<mapboxgl.Map>()
+
+onMounted(() => {
+  map.value = new mapboxgl.Map({
+    container: mapRef.value!,
+    style: 'mapbox://styles/mapbox/standard',
+    center: [120.153576, 30.287459],
+    projection: 'globe',
+    zoom: 1,
+  })
+
+  map.value.on('style.load', () => {
+    map.value?.addSource('image', {
+      type: 'image',
+      url: '/coding-playground/avatar.jpg',
+      coordinates: [
+        [120.153576, 30.287459],
+        [120.153576 + 10, 30.287459],
+        [120.153576 + 10, 30.287459 + 10],
+        [120.153576, 30.287459 + 10],
+      ],
+    })
+
+    map.value?.addLayer({
+      id: 'image',
+      source: 'image',
+      type: 'raster',
+    })
+  })
+})
+</script>

packages/gis/mapbox/add-img/index.md

@@ -0,0 +1,7 @@
+# 添加图片
+
+:::preview 说明 || Mapbox 添加图片
+
+demo-preview=./demo.vue
+
+:::

packages/gis/mapbox/fly-to/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative h-500px">
-    <div class="absolute left-5px top-5px z-999 w200px">
+    <div class="absolute left-5px top-5px z-1 w200px">
       <el-button type="primary" @click="flyTo([121.5, 31.23])">
         To 上海
       </el-button>

packages/gis/mapbox/getting-started/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative h-500px">
-    <div class="absolute left-5px top-5px z-999 w200px">
+    <div class="absolute left-5px top-5px z-1 w200px">
       <el-select v-model="mapStyle" placeholder="Select Map Style" size="small" @change="changeMapStyle">
         <el-option label="标准" value="standard" />
         <el-option label="街道" value="streets-v12" />