InteractiveMap

交互地图 API

交互地图目前提供了可嵌入网站使用的独立库，可接入类似 wiki 的浮动地图，提供给各攻略站参考使用。

链接到我们

你可以直接通过以下链接跳转到我们的网站上，提供独立的交互地图：

https://map.wakingsands.com/#f=mark&id={id}&x={x}&y={y}

其中 id 参数为 Map 表所对应的 id（请注意，并非 Territory 表），而 x 和 y 参数则对应想要标注的地点。

在线演示

https://jsfiddle.net/m0arnqzL/2/

安装

本模块依赖 jquery，请确保 window.$ 可以获取 jquery。

你可以通过 HTML 标签引入 css 和 js:

<link rel="stylesheet" href="https://code.bdstatic.com/npm/[email protected]/dist/leaflet.css"><!--一定要先引用 leaflet 的 css-->
<link rel="stylesheet" href="https://code.bdstatic.com/npm/@thewakingsands/[email protected]/dist/map.css">
<script src="https://code.bdstatic.com/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://code.bdstatic.com/npm/@thewakingsands/[email protected]/dist/map.js"></script>

在 DOM 中创建地图容器：

<section class="erozea-map-outer">
  <div class="eorzea-map-glass"></div>
  <div class="eorzea-map-inner" id="eorzea-map"></div>
  <div class="eorzea-map-resize-handler"></div>
</section>

使用

初始化

目前，代码引入后会在 window 上暴露一些 API，可以直接调用：

// TODO: 改成模块化的，不要瞎搞

const el = document.querySelector('#eorzea-map') // 地图容器

window.YZWF.eorzeaMap.create(el)
.then(function (map) { // 请注意这里需要异步获取 map 实例
  map.loadMapKey(92) // 92 为地图编号（游戏内 Map 表）
  .then(function () {
    // ... 插棋子或者改窗口位置啥的，都在 load 完成后处理
  })
})

修改 CDN

默认 CDN 位于海外；流量有限，请大流量站点自建 CDN 代理源站。源站 URL 为：https://map-cdn.wakingsands.com/assets

以下代码需要在初始化之前调用。

window.YZWF.eorzeaMap.setCdnUrl('https://your-domain.example.com/assets')

增加标记（插旗）

const iconUrl = window.YZWF.eorzeaMap.loader.getIconUrl('ui/icon/060000/060561.tex') // 小旗子标记；注意地图 CDN 上只有地图用到的图标
// const iconUrl = 'https://http.cat/204' // 也可以直接是 URL；如果没有的图标也可以从 cafemaker 上拿

const marker = window.YZWF.eorzeaMap.simpleMarker(
  x, // 游戏 2D 坐标 X
  y, // 游戏 2D 坐标 Y
  iconUrl, // 图标 url
  map.mapInfo // 直接照抄就行了，这是从 map 实例上拿的地图信息
)

map.addMaker(marker)

setTimeout(() => {
  map.setView(map.mapToLatLng2D(x, y), 0) // 移动到视角中心；setView 参考 leaflet 用法即可
}, 100)

标记 3D 坐标

你可能从游戏的 Level 表中获得了一些 3D 坐标。请拿到其中的 X 和 Z 作为平面地图的 X 坐标和 Y 坐标，然后：

const [mapX, mapY] = map.toMapXY3D(levelX, levelZ)

取得地图 XY 坐标后正常标点即可。