Codes►项目

大地图

大地图

需求

大地图开发日志

参考

参考原神官方大地图原神地图

目标

可以快速完成一个游戏的大地图搭建，并且完成基础功能。

开发环境

Node

Node.js — 下载 Node.js®

1
2
3
4
5
6
7
8
9
10
# 安装 fnm (快速 Node 管理器)
winget install Schniz.fnm
# 配置 fnm 环境
fnm env --use-on-cd | Out-String | Invoke-Expression
# 下载并安装 Node.js
fnm use --install-if-missing 22
# 验证环境中是否存在正确的 Node.js 版本
node -v # 应该打印 `v22.12.0`
# 验证环境中是否存在正确的 npm 版本
npm -v # 应该打印 `10.9.0`

Vue3

Quick Start | Vue.js

1
npm create vue@latest

Leaflet

Download - Leaflet - a JavaScript library for interactive maps

切瓦片工具

  • ps
  • tilemap
  • tiler
  • gdal2tiles py 自动切瓦片

开发流程

  • 开发环境安装
    • node
    • Vue3
  • 准备瓦片 tiles
    • gdal2tiles
  • 初始化项目
    • 创建 vue3
    • 删除多余文件
    • 安装 less
    • 安装 leaflet
  • 初始化 leaflet
    • 载入地图 (坐标系调整)
    • 设置 zoom 范围
    • 设置拖拽边界
    • 批量添加地名
    • 批量添加标注点
    • 封装地图相关接口
  • 初始化筛选栏 UI
    • 完成静态筛选栏
  • axios 与 mockjs
    • 安装 axios
      • 请求基类
    • 安装 mockjs
      • npm i mockjs
      • mock index
      • mock 数据
      • main. ts 载入
  • 组件联动通信
    • 安装 pinia
      • npm i pinia
      • store home. ts
      • main. ts 载入
    • 多组件数据交换
  • 地名动态展示
    • 全局变量
  • 标点动态展示
  • 缩放 UI-zoomslider 插件
  • 标点弹窗展示
  • 多个地图管理

更新

  • 搜索功能
  • 离线地图?