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

前言

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

我的灵感源自于这个塞尔达地图攻略网站,地图、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
    }
}

结尾

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

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

附一张成果图

相关推荐
不浪brown2 天前
爽翻了!Cesium手撸一个动态视锥体工具用于开发调试,效率翻倍(附完整源码)
cesium
木子李i2 天前
Cesium离线使用和部署地图影像
前端·cesium
全宝4 天前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
不浪brown12 天前
地下管网的产品经理问我:能不能用Cesium在地表挖一个洞,让我直观的看到地下的管道(附开源代码)
cesium
熟悉不过17 天前
cesium项目之cesiumlab地形数据加载
前端·javascript·vue.js·cesium·webgis·cesiumlab
前端小菜鸟一枚s18 天前
`ConstantPositionProperty` 的使用与应用
前端·javascript·cesium
前端小菜鸟一枚s18 天前
`ConstantProperty` 的使用与应用
前端·javascript·cesium
不浪brown18 天前
【实战篇】Cesium Shader实现军事级雷达探测波!数字孪生开发者必学(附开源代码)
cesium
阿铎前端20 天前
Cesium系列:从入门到实践,打造属于你的3D地球应用
vue·cesium
放逐者-保持本心,方可放逐23 天前
Cesium 核心思想及基础概念应用
scene·cesium·camera·entity·primitive·viewer