@2003scape/rsc-world-map 中文文档教程

Question

rsc-world-map

runescape classic 的交互式世界地图。

观看视频演示< /a>

特点：

• mobile and tablet support with touch controls (still WIP)
• works with any height x width >= 300px x 300px
• four levels of zoom with crisp, pixelated landscape and anti-aliased text
• overview box for quick navigation across ends of the map
• go up and down plane levels to view dungeons and upstairs areas
• search box with automatic suggestions
• toggle labels, object and points of interest
• native javascript with zero framework dependencies, just import and specify a block container element
• zero additional HTTP requests - everything packed inside the javascript

install

$ npm install @2003scape/rsc-world-map

usage

const WorldMap = require('@2003scape/rsc-world-map');

const container = document.createElement('div');
container.style.height = '300px';
container.style.width = '300px';
container.style.border = '1px solid #f0f';

const worldMap = new WorldMap({ container });

worldMap.init().then(() => {
    console.log('loaded');
});

document.body.style.background = '#000';
document.body.appendChild(container);

api

worldMap = new WorldMap({ container, labels?, points?, objects? })

创建一个新的worldMap实例。

container 是任何块元素。

其余属性可选，默认为官方runescape 经典条目（位于 ./res）：

labels 用于地图上的文本叠加：

{
    "text": "Kingdom of\nKandarin",
    "x": 7705,
    "y": 6821,
    "size": 12,
    "align": "center" || "left",
    "bold": true, // optional
    "colour": "rgb(254, 165, 0)" || "#ff00ff" || "red" // optional
}

points 用于点-地图上的兴趣符号。 有一个清单 ./res/key.json 中的点类型：

{ "type": "altar", "x": 7253, "y": 7272 }

点和标签的坐标是绝对的。

objects 用于在地图上散布的 + 符号：

{ "id": 0, "x": 345, "y": 538 }

对象的坐标是游戏中的坐标 @2003scape/rsc-data （注意这里不需要direction）。 树（id 0）是绿色的 而其余的是橙色的。

worldMap.init()

加载图像，附加事件处理程序并填充容器元素。

static map images

要生成世界地图的静态 PNG，请使用 CLI 工具 @2003scape/rsc-landscape

你也可以用它来生成 plane-x.png ./res/ 中的图像。

license

版权所有 (C) 2021 2003Scape Team

本程序是免费软件：您可以重新分发和/或修改 它根据 GNU Affero 通用公共许可证的条款作为 由自由软件基金会发布，无论是第 3 版 许可，或（由您选择）任何更高版本。

这个程序是分发的，希望它有用， 但没有任何保证； 甚至没有默示保证 特定用途的适销性或适用性。 见 GNU Affero 通用公共许可证了解更多详情。

您应该已经收到 GNU Affero 通用公共许可证的副本 随着这个程序。 如果没有，请参阅 http://www.gnu.org/licenses/。