爱与勇气：L7VP 与塞尔达公主有个约定

站长

2023年07月23日 03:29 · 阅读数 16

万众期待的《塞尔达——王国之泪》发布已经有一段时间了，相信各位小伙伴都已经开始在海拉鲁大陆上探索、解锁神庙了吧。为了让大家更好地享受游戏，我们基于 L7VP 开发了一款塞尔达王国之泪的地图攻略应用。快来扫描下方二维码，开始你的探险之旅吧！

1. 地图概览

扫描上方二维码即可立即体验塞尔达王国之类收集地图，更多惊喜敬请探索

爱与勇气：L7VP 与塞尔达公主有个约定

2. 背景

上面的地图是完全基于 L7VP 搭建的。那么什么是 L7VP ？为什么要选择 L7VP 呢？

简单来说 L7VP 是一款地理可视化研发平台，提供丰富的地理可视化效果、洞察分析功能、地图应用搭建工具和开放扩展能力。L7VP 的核心研发目标是提高地理空间智能应用的研发效率，并且可扩展、研发简单快。

基于 L7VP 提供的 SDK 强大能力，研发一个塞尔达收集小地图简直小菜一碟～下面开始一步一步介绍如何基于 L7VP 从 0 到 1 搭建塞尔达王国之泪收集地图，开始之前，先简单设计一个原型：

爱与勇气：L7VP 与塞尔达公主有个约定

3. 数据处理

3.1. 瓦片地图

感谢 TOTK-Interactive-Map 项目的作者提供了王国之泪的天空、陆地、地下全量瓦片图床，瓦片图片按照地图类型/地图缩放层级 z / x / y 坐标的路径存放。对地图瓦片不熟悉的同学可以了解下 Slippy map tilenames

爱与勇气：L7VP 与塞尔达公主有个约定

接着我们利用 jsDelivr 平台作为 CDN 来加快瓦片图片的下载速度，得到一个瓦片服务的 URL ：

https://fastly.jsdelivr.net/gh/Slluxx/TOTK-Interactive-Map@tiles/assets/tiles/{mapType}/{z}/{x}/{y}.png

有了塞尔达的地图服务，现在可以通过 L7VP 快速生成一个在线地图应用了，只需要两步：首先添加塞尔达的瓦片地图数据服务，连续添加天空、陆地、地下三个瓦片数据服务，添加成功后数据集列表可见。

爱与勇气：L7VP 与塞尔达公主有个约定

接着，添加三个瓦片图层把天空、陆地、地下分别添加到地图上去，效果如下：

爱与勇气：L7VP 与塞尔达公主有个约定

3.2. 标记物数据

我们收集整理了王国之泪中神庙、鸟望台、宝箱等标注点位的数据。

爱与勇气：L7VP 与塞尔达公主有个约定

点位标注数据使用的是平面坐标系来表示其位置信息，经过脚本对数据进行坐标系转换、数据平铺等一系列操作后，只需要将数据文件上传到 L7VP 里面，上传数据的目的是为了给资产消费，接下来就是研发资产。

爱与勇气：L7VP 与塞尔达公主有个约定

4. 资产研发

根据原型设计，我们需要自定义研发筛选面板、图层控制器、标记物这三个资产，瓦片图层和地图层级缩放器则使用 L7VP 官方提供的。

4.1. 图层控制器

图层控制器用于控制天空、陆地、地下三个地图的切换，考虑到灵活性，通过配置化的方式，控制组件渲染位置和渲染图层属性，需要注意的是，当地图切换的时候，上一个状态的标记物要通信绘制资产清除掉。整体实现逻辑如下所示

import type { ImplementWidgetProps } from '@antv/li-sdk';
import { useEventPublish, useLayerList } from '@antv/li-sdk';
import type { Properties } from './registerForm';

interface ZeldaLayerControlProps extends Properties, ImplementWidgetProps {}

const ZeldaLayerControl: React.FC<ZeldaLayerControlProps> = (props) => {
  const { position, undergroundLayerId, groundLayerId, skyLayerId } = props;
  const layerList = useLayerList();
  const eventPublisher = useEventPublish();

  const zeldaLayerList = // layerList filter underground,ground,sky

    const handleActiveLayer = (layer) => {
    // zeldaLayer show or hide, setActiveLayerId
  };

  const onClickLayer = (layer, value) => {
    // handleActiveLayer
    // eventPublisher('zelda-layer-change', value);
  };

  return (
    <CustomControl position={position}>
      {zeldaLayerList.map((layer) => (
      <div
        key={layer.id}
        onClick={() => onClickLayer(layer, layer.value)}
        />
    ))}
    </CustomControl>
  );
};

4.2. 标记物

考虑到标记物一般在地图上同时可以展示多个的情况，这里设计为同时可以渲染多个 Marker，点击其中一个 Marker 时，打开气泡信息框，比如展示鸟望台的位置描述信息和通关技巧视频。

const Marks = (props) => {
  const { locations } = props;
  const [activedMark, setActivedMark] = useState();

  const onClickMark = (mark) => {
    setActivedMark(mark);
  };


  return (
    <>
      {locations.map((location) => {
      return (
        <Marker
          lngLat={{ lng: location.longitude, lat: location.latitude }}
          onClick={() => onClickMark(location)}
          />
      );
    })}

      {activedMark !== undefined && (
      <Popup
        lngLat={{ lng: activedMark.longitude, lat: activedMark.latitude }}
        onHide={() => setActivedMark(undefined)}
        >
        <PopupContent location={activedMark} />
      </Popup>
    )}
    </>
  );
};

4.3. 筛选面板

筛选面板需要拿到所有的标记物数据，做分类筛选后，就可以在面板里面渲染出所有的种类了，当点击其中一个就把标记物渲染到地图上。除此之外，当地图切换到天空或陆地到时候，需要监听一下清除选择的标记物。考虑到 PC 端筛选面板的交互和移动端不太一样，我们给 PC 端做一个适配。

import { useDataset, useEventPublish, useEventSubscribe } from '@antv/li-sdk';

const FilterPanel: React.FC<FilterPanelProps> = (props) => {
  const { datasetId, onFilterChange } = props;
  const [dataset] = useDataset(datasetId);
  const [layerType, setLayerType] = useState('ground');
  const eventPublisher = useEventPublish();

  const handleSelected = (selectedGroups) => {
    // onFilterChange
  };

  // 监听图层切换
  useEventSubscribe('zelda-layer-change', (value) => {
    setLayerType(value);
  });


  const renderHeader = () => {
    //...
  };

  const renderMarkList = () => {
    //...
  };

  const renderBody = () => {
    if (showSearchPanel) {
      return <SearchBody />;
    }
    return renderMarkList();
  };

  const content = (
    <>
      {renderHeader()}
      {renderBody()}
    </>
  );

  return isMobile ? (
    <FloatingPanel>
      {content}
    </FloatingPanel>
  ) : content;
};