feat: learn mapbox

Author: coderhyh

.vitepress/config.ts

@@ -47,9 +47,10 @@ export default defineConfig({
     },
   },
   vite: {
-    resolve: { alias: { 'coding-playground': resolve(__dirname, '../packages') } },
+    resolve: { alias: { '~': resolve(__dirname, '../packages') } },
     plugins: [
       AutoImport({
+        imports: ['vue'],
         dts: true,
         resolvers: [ElementPlusResolver()],
       }),

.vitepress/sidebar.ts

@@ -16,7 +16,9 @@ export default <DefaultTheme.Sidebar>[
   {
     text: 'GIS',
     items: [
-
+      { text: 'Mapbox入门', link: '/packages/gis/mapbox/getting-started' },
+      { text: '点击飞行效果', link: '/packages/gis/mapbox/fly-to' },
+      { text: '地球自转效果', link: '/packages/gis/mapbox/rotation' },
     ],
   },
 ]

.vitepress/theme/index.ts

@@ -4,6 +4,7 @@ import DefaultTheme from 'vitepress/theme'
 import '@vitepress-demo-preview/component/dist/style.css'
 import './base.css'
 import 'virtual:uno.css'
+import 'mapbox-gl/dist/mapbox-gl.css'
 
 export default {
   ...DefaultTheme,

auto-imports.d.ts

@@ -6,5 +6,66 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

components.d.ts

@@ -8,6 +8,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
   }
 }

eslint.config.js

@@ -14,6 +14,8 @@ export default antfu(
       'no-sequences': 'off',
       'perfectionist/sort-objects': 'off',
       'unused-imports/no-unused-vars': 'off',
+      'antfu/top-level-function': 'off',
+      'vue/html-self-closing': 'off',
       'vue/attributes-order': 'error',
       'vue/block-order': ['error', {
         order: ['template', 'script', 'style'],

package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "element-plus": "^2.9.6",
+    "mapbox-gl": "^3.10.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

packages/enums/mapbox.ts

@@ -0,0 +1,3 @@
+export enum MapboxEnum {
+  ACCESS_TOKEN = 'pk.eyJ1IjoiY29kZXJoeWgiLCJhIjoiY204ZDYwaTA1MDM0ajJqb2R4dXh5ZHlzZCJ9.rXI13A4HGl4TIvbtCjLblQ',
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="relative h-500px">
+    <div class="absolute left-5px top-5px z-999 w200px">
+      <el-button type="primary" @click="flyTo([121.5, 31.23])">
+        To 上海
+      </el-button>
+      <el-button type="primary" @click="flyTo([116.46, 39.92])">
+        To 北京
+      </el-button>
+    </div>
+    <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>()
+
+const flyTo = (center: [number, number]) => {
+  map.value?.flyTo({
+    center,
+    zoom: 10,
+    speed: 1,
+  })
+}
+
+onMounted(() => {
+  map.value = new mapboxgl.Map({
+    container: mapRef.value!,
+    style: 'mapbox://styles/mapbox/standard',
+    center: [121.5, 31.23],
+    projection: 'globe',
+    zoom: 1,
+  })
+})
+</script>

packages/gis/mapbox/fly-to/index.md

@@ -0,0 +1,7 @@
+# 点击飞行效果
+
+:::preview 说明 || Mapbox 飞行效果
+
+demo-preview=./demo.vue
+
+:::