Vue3 + TS + Leafletjs 打造企业级原神大地图「完结」

xia仔ke：quangneng.com/5368/

获取资源：上方URL获取资源

使用 Vue3 + TypeScript + Leaflet.js 构建企业级《原神》大地图应用

《原神》是一款广受欢迎的角色扮演游戏，其开放世界的设计让玩家可以在不同的国度中探索。为了更好地帮助玩家理解游戏中的地理布局，创建一个交互式的大地图应用会非常有用。本文将指导你如何使用 Vue3、TypeScript 和 Leaflet.js 开发这样一个应用。

一、项目规划

1. 需求分析：定义地图应用的目标和功能，例如标记关键地点、显示NPC位置、用户上传自定义标记等。
2. 技术选型：选择前端框架（Vue3）、类型系统（TypeScript）和地图库（Leaflet.js）。
3. UI/UX 设计：设计美观且直观的用户界面。

二、技术栈

• 前端框架：Vue3 (基于 Composition API)
• 类型系统：TypeScript
• 地图库：Leaflet.js
• 状态管理：Pinia
• 路由管理：Vue Router
• 样式：Tailwind CSS
• 构建工具：Vite

三、项目搭建

1. 初始化项目：使用 Vite 创建一个 Vue3 项目。
2. bash深色版本

npm init vite@latest

# 选择 "Vue" 作为框架

• # 选择 "Typescript" 作为项目语言
• 安装依赖：
• bash深色版本

npm install leaflet

npm install @types/leaflet -D

bash深色版本

npx tailwindcss init -p

更新 vite.config.ts 文件，添加 Tailwind CSS 配置。

javascript深色版本

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import { fileURLToPath, URL } from 'url';

import tailwindcss from 'tailwindcss';

// https://vitejs.dev/config/

export default defineConfig({

 plugins: [vue(), tailwindcss()],

 resolve: {

 alias: {

 '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  },

 css: {

 preprocessorOptions: {

 scss: {

 additionalData: `@import "@/assets/scss/variables.scss";`

      }

    }

  }

javascript深色版本

module.exports = {

 content: ["./src/**/*.{html,js}"],

 theme: {

 extend: {},

  },

 plugins: [],

1. };

四、地图组件开发

1. 创建地图组件：
2. typescript深色版本

// src/components/Map.vue

<template>

  <div ref="mapRef" class="map-container"></div>

</template>

<script lang="ts">

import { defineComponent, onMounted, ref } from 'vue';

import * as L from 'leaflet';

export default defineComponent({

  setup() {

 const mapRef = ref<HTMLDivElement | null>(null);

    onMounted(() => {

 if (mapRef.value) {

 const map = L.map(mapRef.value).setView([37.7749, -122.4194], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

          attribution: '? <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',

          maxZoom: 18,

        }).addTo(map);

      }

    });

 return {

      mapRef,

    };

  },

});

</script>

<style scoped>

.map-container {

  height: 600px;

  width: 100%;

}

typescript深色版本

// 添加到 Map.vue 中

const addMarker = () => {

 if (mapRef.value && map) {

 const marker = L.marker([37.7749, -122.4194]).addTo(map);

    marker.bindPopup("A popup").openPopup();

  }

};

// 在 mounted 钩子中调用

onMounted(() => {

 if (mapRef.value) {

 const map = L.map(mapRef.value).setView([37.7749, -122.4194], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

      attribution: '? <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',

      maxZoom: 18,

    }).addTo(map);

    addMarker();

  }

1. });

五、功能扩展

1. 添加搜索功能：允许用户搜索特定的位置。
2. 添加用户标记：让用户可以保存自己的标记。
3. 加载《原神》地图数据：从API或数据库加载游戏内的地标和NPC位置。

六、部署与维护

1. 部署：使用 Vercel 或 Netlify 进行部署。
2. 持续集成：使用 GitHub Actions 或 GitLab CI/CD 设置自动化构建和部署流程。
3. 性能优化：考虑使用 Webpack 或 Vite 进行代码分割、懒加载等功能。

七、总结

通过以上步骤，你可以构建一个功能丰富、交互性强的《原神》大地图应用。使用 Vue3 和 TypeScript 可以保证代码质量和可维护性，而 Leaflet.js 则提供了强大的地图功能。继续完善应用，加入更多交互性和个性化选项，你的应用将会成为《原神》玩家的宝贵工具。

请注意，本文只是一个概述性的指南。在实际开发过程中，你可能还需要处理更多的细节，例如错误处理、状态管理等。希望这个指南能够为你提供一个良好的起点。