地理信息系统与互联网技术的进步,使得网络地理信息系统(WebGIS)也发展迅速。在大数据时代背景下,传统的网络地理信息系统面临诸多缺点,出图效率低、渲染速度慢,如何实现数据的高效传输使用的问题阻碍了网络地理信息系统的进一步发展。而HTML5技术的出现,特别是Canvas等新技术的加入,为网络地理信息系统的发展提出了新的解决方案。基于瓦片的传输方式,有效的提高了 WebGIS中的数据传输效率,瓦片数据主要包括栅格瓦片与矢量瓦片两种方式。使用比较广泛的是栅格瓦片技术。当使用栅格瓦片技术时,客户端获得的是已加工好的图片,无法进行进一步的分析。矢量数据可以满足客户端的数据分析与交互。本研究在WebGIS中采用了矢量瓦片的传输模式,通过研究矢量瓦片在WebGIS中的存储方式、可视化、索引方式、缓存策略等构建了基于矢量瓦片的WebGIS的整体解决方案,确定了整体流程,实现了矢量瓦片在WebGIS中的高效传输与可视化。与基于栅格瓦片的WebGIS相比,矢量瓦片在保证传输效率的基础上实现了客户端的瓦片地图交互。根据形成的解决方案利用HTML5、VUE框架等技术构建了基于矢量瓦片的WebGIS的应用实例。本研究针对瓦片数据传输时造成的服务器与网络压力过大、响应时间长的问题,重点研究了矢量瓦片在客户端的缓存替换策略。在客户端建立缓存机制,构建瓦片缓存索引,分别提出了瓦片数据的GUH缓存替换算法与VEAT缓存替换算法。通过对比实验,本研究所提出的两种算法对比传统算法在瓦片命中率和字节命中率方面均具有较大优势。其中,GUH算法更适合于中小范围的金字塔瓦片地图操作,VEAT算法在小缓存容量情况下优势显著。