一起学!把老地图影像加载到Mapbox地图上,并且尽情对比

  • A+
所属分类:地图服务
广告也精彩

一起学!把老地图影像加载到Mapbox地图上,并且尽情对比Geo-referencing Imagery设想一下,你有张30年前的老地图,想把它覆盖在新地图上,并且对比30年前的世界与现在有什么不同。例如,现在繁华的浦东 VS 30年前的荒地浦东,这种对比地图怎么做呢?这个教程就可以帮助你。除了上面这个应用场景,这个教程也适用于以下场景:以非空间图像格式接收卫星图像将历史地图与当前地图进行比较为游戏应用构建虚构的交互式地图等在本教程中,您将使用QGIS(免费的开源地理空间信息系统(GIS)对俄勒冈州历史悠久的波特兰市区的历史地图图像(JPEG格式)进行地理配准。当你从 QGIS 中导出GeoTIFF格式的图像后,你将它上传到您的Mapbox Studio 中作为瓦片集加载到地图上。最后,利用 Mapbox gl-compare的对应代码,快速展示新老地图对比网页!最终的效果是下面这个样子的!!对比超明显的~一起学!把老地图影像加载到Mapbox地图上,并且尽情对比点击链接直接查看:https://docs.mapbox.com/help/demos/georef/index.html在开始前, 我们先要理解地理配准这个概念, 这是将老地图影像加载到最新地图的关键前提。因为刚开始的老地图图像只是一张图片,并不具备空间坐标参考,而地理配准能够赋予图像上的每个像素对应的坐标,这样老地图影像才能成为地理参考图像,可以出现在对应的最新地图位置上!如果您曾经使用过Mapbox Satellite,那么您已经使用了地理参考图像。关于地理配准:地理配准是将地理坐标分配给栅格图像, 以实现基于地图坐标系定义其在世界上的位置的过程。让我们跟着教程试一试吧!前置知识:Mapbox Studio 账号Mapbox GL JS的基础知识QGIS软件的基础使用理解什么是地理配准和地理坐标系统1. 下载老图像本教程使用的是俄勒冈州波特兰市区的JP2(高分辨率JPEG类型)格式的历史地图。点击此处进行历史地图下载一起学!把老地图影像加载到Mapbox地图上,并且尽情对比这张图片是从国会图书馆提供的俄勒冈州摩特诺玛县的地图上截取的。2.在 QGIS 中对图像进行地理配准打开你的 QGIS ,由于 QGIS中的地理配准是通过“ Georeferencer GDAL”插件完成的, 进行如下选取即可。一起学!把老地图影像加载到Mapbox地图上,并且尽情对比然后选择插件,加载JPEG图片。选定4个以上配准的点,输入对应的坐标(图上经纬度交叉处),输入对应的经纬度,然后选择对应参考坐标系 EPSG:900913 or EPSG: 3857 (Web Mercator)作为你的坐标参考系统。具体的GSIS的步骤就不在这里赘述,直接查看下方 QGIS 地理配准教程(针对带有经纬度坐标的地图):http://www.qgistutorials.com/en/docs/3/georeferencing_basics.html最终,在完成对图像的地理配准后,请确保将GeoTIFF文件另存为Downtown-pdx.tif,以便将其上传到Mapbox时使用。3. 作为瓦片集上传到 Mapbox打开你的 Mapbox Studio, 选择 Dataset, 上传在2 中制作完成的 GeoTIFF 文件,发布为瓦片集, 并且以添加新图层的方式加载到你的街景地图中。发布后,记录这个含有老地图的瓦片集的style URL:mapbox://styles/examples/cj173cqom001s2smz3yyvto8z新建一个街景地图,发布,记下对应 Style URLmapbox://styles/examples/cj173dx4q001l2so0pyozfnuf4.制作网页,可进行新旧地图大对比现在,我们想要把新老地图的差别更好得展示出来, 一个网页便不可或缺。这里我们直接用 Mapbox 现成提供的 Mapbox gl compare 神器来实现新老地图对比的网页。进入 Mapbox gl compare 所在的Github页面:https://github.com/mapbox/mapbox-gl-compare一起学!把老地图影像加载到Mapbox地图上,并且尽情对比按照上面的教程进行操作。最主要的是下面几行代码内容的替换:access token含有老地图图层的 Mapbox 街景地图的 styleURL最新街景地图的 Style URLvar before = new mapboxgl.Map({container:'streets',//ContainerID style: 'mapbox://styles/examples/cj173dx4q001l2so0pyozfnuf'});var after = new mapboxgl.Map({ container: 'historical', // Container ID style: 'mapbox://styles/examples/cj173cqom001s2smz3yyvto8z'});// A selector or reference to HTML elementvar container = '#comparison-container';new mapboxgl.Compare(before, after, container, { mousemove: true, // Optional. Set to true to enable swiping during cursor movement. orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical});你可以把页面托管在本地, Github 或者你自己的服务器上。最终,打开来就是这个样子哒 !可以实现左右拖动对比,效果极为流畅。一起学!把老地图影像加载到Mapbox地图上,并且尽情对比是不是很有意思~ 不如开始实践吧,可以试试上海市的30年前的老地图哦!如果你有任何技术上的问题和地图需求, 请联系 Max (mapbox_max)哦,拉你进技术群与大佬们畅所欲言~欢迎大家戳下面的 Mapbox 熊猫,进入 Mapbox.cn 留下你的问题、建议、产品想法等,我们会在 1- 3 个工作日内回复你哦!
点击查看详情

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩
avatar

发表评论

您必须登录才能发表评论!