DUOLABS
作品集

网页地图服务建设

我们参与开发了一家炼油企业的网页地图服务,向顾客指引全国加油站位置与周边设施。当时的网页地图大多靠拖动静态图片来移动,这项服务则选择在浏览器内直接拖动、缩放地图。那时网速很慢,地图打开迟缓或图块看起来错位,位置指引本身就失去意义。我们负责把地图图块与原始地图数据对齐到屏幕坐标、减少数据传输量,以及平移与缩放的过渡效果。

Launch
2007
Client
韩国炼油企业
Type
地图·空间信息

01 / 04

不再拖动图片,而是在浏览器内移动的地图

这项网页地图服务让顾客在浏览器中查找全国加油站位置与周边设施。当时的网页地图大多靠横向拖动图片来移动。这项服务选择在浏览器内直接响应拖动与缩放操作。我们参与了开发,把地图库与原始地图数据结合起来实现这张地图。

不再拖动图片,而是在浏览器内移动的地图
02 / 04

让地图图块与原始数据不再错位的对位

网页地图把切分好的小地图图片(图块)拼接显示,再把原始地图数据中的位置叠加上去。两者坐标稍有偏差,加油站标记就会落在错误的位置。我们负责把图块与原始地图数据对齐到屏幕坐标,并找出服务界面上看起来错位的地方,修正地图图片。

让地图图块与原始数据不再错位的对位
03 / 04

为慢速网络也能打开地图而减少的传输量

网页地图每次都要接收填满屏幕的地图数据,而当时的网络光是接收这些数据就要花不少时间。我们减少地图数据的传输量并改进显示方式,让地图在慢速线路上也能打开。与服务器交换的数据也从用标签包裹的笨重格式改为更简短的写法,降低了通信量。

为慢速网络也能打开地图而减少的传输量
04 / 04

拖动与缩放时不丢失位置的画面过渡

拖动或缩放地图时画面若生硬跳变,用户就会搞不清自己正在看哪里。我们在平移与缩放之间加入流畅的过渡效果,让比例尺变化时也能跟上位置。这项服务中打造的地图技术,后来被移植到加油站位置指引服务、新城公交信息地图以及海外服务。

拖动与缩放时不丢失位置的画面过渡

项目亮点

01

在浏览器内拖动与缩放的网页地图

02

把地图图块与原始地图数据对齐到屏幕坐标

03

减少数据传输量,让慢速网络也能打开地图

洞察

查看全部博客