地图工具

简单说明

大地图工具，用于开发世界类型的游戏。
本工具属于大型工具，本页面不对源码进行展开，需要二改的可以前往原址自行研究。

使用说明

第一步:搬运框架

将如下两个文件导入您的WIKI（特殊:导入页面）

Map3.0Widget.xml

包含如下页面：

Map3.0Gadget.xml

包含如下页面：

然后添加下内容至MediaWiki:Gadgets-definition页面：

* Map3[ResourceLoader|rights=edit]|leaflet.css|leaflet.js|leaflet.canvas-markers.js|leaflet.pm.css|leaflet.pm.min.js|proj4.js|proj4leaflet.min.js|Md5.min.js|Map3.js

您必须在目标Wiki上拥有管理员和界面管理员权限才能执行以上两步操作。

第二步:替换底图

为地图添加底图：在widget:Map3/main中寻找方法getTileUrl，将return coords后的链接修改成地图瓦片的保存路径

getTileUrl: function(coords) {
				coords = function (coords) {
					var y = -coords.y + -1, r = Math.ceil((1 << coords.z - 4)/4 * 10);
					return ( -r <= coords.x && coords.x <= r  && -r <= y && y <= r && 
						{x: coords.x, y: -coords.y + -1, z: coords.z})
				}(coords);
				return coords ? `https://prod-patch-wiki.biligame.com/res/ys/map2/tiles/${coords.z}/tile-${coords.x}_${coords.y}.png?v=${mapModel.srcVersion()}` :
					`https://prod-patch-wiki.biligame.com/res/ys/map/tiles/default.png?v=${mapModel.srcVersion()}`;
			},			
			setGeoData: function () {
				mapModel.areaData(JSON.parse($("#mapData #mapAreaData").text().trim()));
				// mapModel.routeData(JSON.parse($("#mapData #mapAreaData").text().trim()));
			},

例如：

原神的瓦片地址为：https://prod-patch-wiki.biligame.com/res/ys/map2/

只修改路径其他的不要改

如何获得瓦片地图

使用瓦片地图制作工具即可，稍后提供一个工具地址。

瓦片地图如何存放

第三步:创建点位

创建地图的对应点位信息。

Map维护

第四步:输出地图

以原神地图为例

<!--地图必须结构勿动-->
<div id="mapData" style="display:none">
	<div id="categoryData">{{:Data:Map/type/json}}</div>
	<div id="markerWithInfo">{{#ask:[[~Data:Map/point/*]][[!~*/json]]|link=none|limit=1000|searchlabel=}}, {{#ask:[[~Data:Map/point/*]][[!~*/json]]|link=none|limit=1000|offset=1000|searchlabel=}}</div>
<!--以下部分为地图分区功能，如果不需要分区可以删掉-->
	<div id="mapAreaData">
		[
			{"name":"提瓦特", "icon":"world", "inside":"", "geojson": null, "center": null},
			{"name":"蒙德", "icon":"mengde", "inside":"蒙德", "geojson": {{:Data:Map/蒙德.json}}, "center": [19.88871, 4.312327]},
			{"name":"璃月", "icon":"liyue", "inside":"璃月", "geojson": {{:Data:Map/璃月.json}}, "center": [-23.182214, -20.965561]},
			{"name":"雪山", "icon":"xueshan", "inside":"雪山", "geojson": {{:Data:Map/雪山.json}}, "center": [2.301491, 0.448894]},
			{"name":"稻妻", "icon":"daoqi", "inside":"稻妻", "geojson": {{:Data:Map/稻妻.json}}, "center": [-51.085105, 38.289228]}
		]
	</div><!--分区结束-->
</div>
<div>
{{#widget:Map3/css}}
{{#widget:Map3/icon}}
{{#widget:Map3/mapc}}
{{#widget:Map3/main}}
{{#widget:Md5}}
<div>
<!--地图end-->

替换地图菜单上的logo

widget:Map3/mapc页面中如下代码替换图片链接即可。

			<div class="mapMenu">
				<div class="wiki-logo">
					<img src="https://patchwiki.biligame.com/resources/assets/images/logo/logo_ys.png?t=2021052411&v=41" alt="">
				</div>

如何打点

在第三步要定义好所有需要打的点
打点教程：Map教程

分区

划分区域（如果需要分区功能）：教程暂缺

作者

迦洛翎

+关注

依赖页面

框架（Widget）

框架（Gadget）

内容

详见：Map维护

已使用该功能的页面

原神地图

更新日志

从3.0版本进行的重构
- 重构底层代码
- 重构打点功能
- 新增点位分区
- 新增点位标记状态储存功能