前言

起因是部门内部在年底要做一系列培训，像数据处理、软件使用、二三维开发等等，而我就是要做三维开发这一块的培训。其实我也是个小菜鸟，技术上我也讲不出什么特别有新意的东西，要是讲一些老套的东西大家听着肯定都要打瞌睡的，于是乎，我决定另辟蹊径，讲一些有意思的东西，最终，我决定给他们一些小小的海拉鲁震撼！

我的灵感源自于这个塞尔达地图攻略网站，地图、POI、点击事件，这几个要素已经足够讲一壶的了，接下来就是进入准备工作了。

数据获取

地图数据

现成的数据就在网页上，F12看一下地图瓦片的请求URL，太棒了这个是我们常用的zxy规范的瓦片形式，但是直接用Cesium加载到地球上会发现，它是覆盖到全球范围的，(因为塞尔达就是天!) 因为在这个二维地图里瓦片就是以左下角为原点的直角坐标系填充排列的，想要正确投影到球上还需要拿到原始影像数据进行配准并重新切片。

获取原始影像数据

安利一款开源的GIS软件------SAS Planet，基础的使用可以参考SAS Planet软件介绍与使用教程，我就要用它把塞尔达的地图down到本地。

打开软件，选择Maps->satellite->Mapbox -satellite，在它的基础上修改资源地址，Setting->Map settings,把模板URL修改为塞尔达地图的在线地址，点击OK,你就会看到一幅海拉鲁王国的地图了！

接下来把它导出成TIF格式的影像图，使用框选工具把全幅框住，在操作界面Download页把8级瓦片进行缓存，因为观察最高到8级，再往后就没有缓存了，待缓存完毕后，在Stitch页进行全幅GeoTIFF导出即可。

影像预处理

这里我用的是QGIS对影像tif进行【配准】，在上一步导出GeoTIFF时，影像已经具有了空间坐标系【EPSG:3857】,配准我们需要一系列控制点，可是海拉鲁大陆在地球上没有具体对应的点位，我们只能推测出它大概位于日本京都。那我们就没法追求精确定位了，这里我选择使用QGIS的一个插件【Freehand raster georeferencer】，它支持对栅格图片进行手动平移缩放旋转等操作，也就是手动配准来代替控制点配准，这对我们来说已经够用了。"配准"完后点击双感叹号按钮进行输出即可。

POI数据获取

这个我们借用一下游戏攻略网站上的数据 map.caimogu.cc/zelda/totk/...

代码实现

略。

Cesium + Vue

点位的坐标需要做一下转换,这个拟合的位置是我根据影像在球上的位置试出来的

ts 复制代码

export const zld2WGS84 = (lat: string | number, lon: string | number) => {
    lat = Number(lat)
    lon = Number(lon)
    return {
        lat: lon * 3 + 140.9,
        lon: lat * 2.4 + 34.3
    }
}

结尾

说实话我不太喜欢代码相关的内容，代码实现并不难，我更有成就感的是前面获取数据处理数据的过程，不知道大家开发的时候有没有遇到过这样的情况，长年累月就对着一两套样例数据搞开发做测试，比如经典的"大雁塔"，久而久之就会"腻了"，而且还会固化我们的开发思维，限制我们脑海中的应用场景。

自己搞一套数据是很有意思的，我会在这个过程中获取成就感，同时在使用自己"造"的数据时，会有新鲜感的刺激，开发思维上也会更加开阔。

附一张成果图

我把塞尔达的地图放到球上了

前言