项目初体验：学习并熟悉leaflet（maker和popup）

目标是还原提瓦特大地图！虽然当前进度只有0.01%… T^T

leaflet的学习(L-control-zoom)和优化（marker,popup）

leaflet比例尺组件：l-control-zoom，位置属性position=“bottomright”，下一个目标！修改比例尺样式！（完成打卡）
修改了marker的icon
修改了popup里的内容，感觉已经把es6的模版字符串用的炉火纯青有没有，里面遇到了一个如何在拼接html的函数里传字符串，传对象的问题（应该有更好的办法拿html而不是手动拼接吧。希望以后能优化出来）

setText(item) {let str = ''str = (item.isMark ? '取消' : '')let classStr = ''classStr = (item.isMark ? 'map-popup__switch--marked' : 'map-popup__switch--unmarked')const expStr = item.exp ? `<div class="map-popup__exp"><label>获取：</label><div><p>` + item.exp + `</p></div></div>` : ''const descStr = item.desc ? `<div class="map-popup__desc"><p><img src="` + this.baseUrl + item.desc + `"></p></div>` : ''const contentStr = (item.desc || item.exp) ? `<div class="map-popup__content">${expStr}${descStr}</div>` : ''const htmlStr =`<div class="map-popup"><span class="map-popup__name-link"><label>名称：</label>${item.name}</span><div class="map-popup__type"><label>类型：</label>${item.type}</div>${contentStr}<div class="map-popup__switch ${classStr}" οnclick=markPoint(` + JSON.stringify(item) + `)>${str}标记</div></div>`return htmlStr}

左侧菜单中panel和tab的切换

细化左侧菜单，主要是panel（观测者标点、我的标点）和tab（海灯节、全地图…）的联动与切换，源代码是通过css样式来实现的（visible和active）

实现切片地图和图片地图（l-tile-layer和l-image-overlay）

走了不少弯路=皿=，还好最后写出来了，有几个注意点如下
注意点①： marker偏移，解决方案→leaflet添加marker出现偏移,修正方法-icon
注意点②：自定义瓦片地图接口，手动修改了了leaflet下的leaflet-src.js（瞎瘠薄改）用以适配原神地图接口入参

//原方法
getTileUrl: function (coords) {var data = {//这些var，是leaflet下的原代码，不是我写的> <！！！r: retina ? '@2x' : '',s: this._getSubdomain(coords),x: coords.x,y: coords.y,z: this._getZoomForUrl()};if (this._map && !this._map.options.crs.infinite) {var invertedY = this._globalTileRange.max.y - coords.y;if (this.options.tms) {data['y'] = invertedY;}data['-y'] = invertedY;}return template(this._url, extend(data, this.options)); },

//改写方法
getTileUrl: function (coords) {var data = {r: retina ? '@2x' : '',s: this._getSubdomain(coords),x: coords.x,y: coords.y,z: this._getZoomForUrl()};if (this._map && !this._map.options.crs.infinite) {var invertedY = this._globalTileRange.max.y - coords.y;if (this.options.tms) {data['y'] = invertedY;}data['-y'] = invertedY;}// catcatconst base='https://uploadstatic.mihoyo.com/ys-obc/2021/02/24/76892539/8b089185befd5f9deec76de5fd40f225_8511148262888359032.jpeg?x-oss-process=image/resize,'const sizeType={4:328,7:287,13:266,//16张（0-798，798/266=3）25:256,50:256,100:256,}const bigType={1:4,2:7,3:13,4:25,5:50,6:100}const size=sizeType[bigType[data.z]]const big=bigType[data.z]function catcat(x,y,z){  //if逻辑优化let b=Math.pow(2,z-1)-1return (x>b||y>b||x<0||y<0)}if(catcat(data.x,data.y,data.z)){return ''}// if(data.x<0||data.y<0){//    return ''// }// if(data.z===1&&(data.x>0||data.y>0)){//11=1  2^0//  return ''// }// if(data.z===2&&(data.x>1||data.y>1)){//22=4 2^1//   return ''// }// if(data.z===3&&(data.x>3||data.y>3)){//44=16 2^2//  return ''// }// if(data.z===4&&(data.x>7||data.y>7)){//88=64 2^3//  return ''// }// if(data.z===5&&(data.x>15||data.y>15)){//1616=256 2^4//     return ''// }// if(data.z===6&&(data.x>31||data.y>31)){//3232=1024 2^5//    return ''// }return `${base}p_${big}/crop,x_${data.x*size},y_${data.y*size},w_${size},h_${size}`// const i = Math.ceil(Math.random() * 4)// return 'http://placekitten.com/256/256?image=' + i},

使用Leaflet.zoomslider插件自定义缩放控件样式

插件的git地址：Leaflet.zoomslider
还是有改它代码，就，不能一步到位的感觉。
①改了leaflet.zoomslider下的L.Control.Zoomslider.js的stepHeight

     var Zoomslider = L.Control.extend({options: {position: 'topleft',// Height of zoom-slider.png in px//stepHeight: 8,//原生stepHeight: 24,//改写// Height of the knob div in px (including border)knobHeight: 6,styleNS: 'leaflet-control-zoomslider'},

②改了vue2-leaflet下的LControlZoom.js的mapObject的赋值

 //catcat// this.mapObject = control.zoom(options); //原生this.mapObject = control.zoomslider(options);//改写

使用方法是在npm install 这个插件之后，在main.js引入

import 'leaflet.zzoomslider'
import 'leaflet.zoomslider/src/L.Control.Zoomslider.css'

这个样式可以自定义重写，具体的不贴了，有更新在git上。
最终的实现效果：（图一是原生，图二是插件css，图三是自定义重写后的样式）

使用leaflet仿原神提瓦特大地图制作日记相关推荐

UE5开发仿原神风格MMOARPG大型网络demo演示
哈喽大家好,我叫人宅,这次为大家带来一套ARPG网络战斗系统制作,我们将会用全新的UE5引擎来打造仿原神风格的游戏. 虽然是MMOARPG但是我们的核心是讲解UE5的网络战斗系统. 战斗系统包含:UE ...
原神—薄樱初绽时（html+css+js仿原神2.5首页，前端课设）
文章目录一.运行效果图二.项目结构三.html 四.css 五.JS 六.总结链接:https://pan.baidu.com/s/1uaRCJXyIrY56NXabau4wjw?pwd=LD ...
unity制作仿原神水面（1）——上色、造浪
文章参考自: https://qiita.com/uynet/items/f8b087d47f5cf316eb7e 最终效果图: 这是一位日本友人的教程,按照他的方法制作出的水面虽然有着一些缺点,但是 ...
【Unity3D小工具】Unity3D中实现仿真时钟、表盘、仿原神时钟
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦. 一.前言 ...
计算机组装图纸手画,原神玩家为造家园能有多拼？工科大佬直接画出图纸，成品效果惊人...
在<原神>1.5版本更新后,提瓦特大陆上顿时掀起了一波装修浪潮,不知大家把自己的家园布置得怎样了呢?反正雪奈我可是好好地肝了一番,并将海岛的那块"荒地"成功改造成了现在 ...
html把一张图片动态的代码,原神：4张动态图演示168皮肤琴的实机效果，三种玩家可入手...
原神这款游戏凭借着"细腻的角色设计""有趣的剧情路线"迅速走火,但是玩久了的老玩家很容易发现这款游戏的弊端,真的是太缺核心玩法了.本来原神的核心玩法应该是探索新 ...
跟《原神》学学怎么让用户上瘾
随着互联网产业的发展,游戏已经成为成年人必备的娱乐方式之一.最近,游戏<原神>非常流行.它的内在逻辑是什么,让用户如此上瘾?本文将根据游戏<原神>分析用户上瘾的原因. < ...
原神ios android,原神ios-原神苹果版预约 v1.0_5577安卓网
原神手游ios版重磅上线!这是米哈游推出的全新一款开放大世界冒险游戏,根据同名经典动漫改编而来,延续了经典的崩坏风格.还原经典英雄人物,搭配酷炫二次元动作系统,自由的角色养成模式,在这里展开属于你们的 ...
米哈游再发干货，分享《原神》新角色魈的创作历程
不知不觉,距离<原神>与大家正式见面已经过去了近五个月,各位在提瓦特大陆的旅行进展得如何呢?自公测以来,<原神>收到了许多宝贵的建议与反馈,均已由制作组成员逐一整理记录. 其中 ...

使用leaflet仿原神提瓦特大地图制作日记