Skip to content

kongying-tavern/map_front_v3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

842b16f · Sep 22, 2024
Aug 27, 2024
Sep 22, 2024
Aug 1, 2022
Sep 12, 2023
Aug 1, 2022
Aug 16, 2023
Sep 12, 2023
Oct 27, 2023
Oct 29, 2022
Aug 18, 2023
Jun 9, 2024
Aug 1, 2022
Jun 30, 2024
Aug 1, 2022
Sep 12, 2023

Repository files navigation

原神地图v3 (yuanshenmap-v3)

本项目基于quasar-vite构建

项目相关

安装依赖

yarn
# or
npm install

进入开发模式

quasar dev

构建

quasar build

地图相关功能

鉴权

在页面登录前,鉴定是否有gitee的oauth2相关的token,若没有的话,则以游客方式登录

Gitee Api文档

游客登录请求是本项目的接口,并非gitee api)

鉴权实现在 router/index.js文件内

Router.beforeEach((to, from, next) => {
    //鉴定是否存在token,若否,默认以游客身份登录
    if (get_user_token() == null) {
      quest_request().then(res => {
        set_user_token(res.data.access_token, res.data.expires_in)
        next();
      })
    }
    else {
      next();
    }
  })

地图构建

地图构建相关函数在api/map.js文件内

地图相关参数及构建方法已经封装,无须了解其具体功能

生成地图时,首先在页面上生成其容器dom

<!-- id为map的div为容器,其余两个为地图的背景蒙层 -->
<div class="map_containor">
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div id="map"></div>
</div>

然后在mounted时,生成地图

import { map, createMap } from "../api/map_obj";
......
mounted() {
    //生成地图
    createMap();
  },

地图容器需要定义其高度和宽度,地图蒙层容器需要样式,可直接引用旧版样式文件

@import url("https://yuanshen.site/css/background.css");/* 地图蒙层样式 */

#map {
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
    background: radial-gradient(transparent 70%, rgba(0, 0, 0, 0.5));
}

点位选择

概述

在本项目中,点位筛选逻辑分为四级

地区(area)_→点位类型(type)→点位集合(item)→单个点位(layer)

注意

在地区筛选等级中,由于每个地区划分为多个子地区,因此规定,后续筛选等级于子地区为基准

点位类型的相关数据在每个地区‘基本’一致,因此在页面构建时点位类型便已被请求并渲染至物品选择器中

点位选择逻辑

本项目的点位请求逻辑如下:

首先渲染所有父级地区

选择父级地区之后,请求其子级地区的数据后,用户可以选择子地区

(上述即是页面上方地区选择器的功能)

选择完毕后,用户可以在右侧类型选择器选择点位类型

选择后,即查询该子地区下所选类型的所有点位集合,并渲染至类型的下拉列表之中

选择某一或某多个点位集合后,请求这些点位集合下所有单个点位的数据

点位生成

点位生成的相关函数在api/layer.js下

leaflet的点位的api

leaflet的点位组的api

具体的渲染过程和存储过程较为复杂,可参考 pages/IndexPage.vue 文件中的具体实现