| 297 | 13 | 96 |
| 下载次数 | 被引频次 | 阅读次数 |
基于Lea?et在线地图开源类库,设计了一种基于HTML5标准中Canvas标签的矢量瓦片显示方法。前端通过Ajax异步请求访问后台Web服务,后台服务对数据库中的空间数据进行空间和属性查询,并以GeoJSON的格式返回到前端进行绘制,从而实现移动端在线地图中矢量数据的高效显示。
Abstract:In this paper, based on Leaflet online map open source class library, we designed a display method for vector tile based on Canvas tag in HTML5. Ajax request was sent asynchronously to backend server in order to avoid blocking the main thread of the fore-end and therefore to ensure fluent user experience. Vector data in GeoJSON format were organized by a SOAP Web service after querying the Oracle database by spatial and attribute conditions.
[1]王晓.基于HTML5的矢量地图发布关键技术研究[D].南京:南京师范大学, 2011
[2]陈新泽,杨斌,仲维亮.基于HTML5的移动终端地理信息应用设计[J].成都信息工程学院学报, 2013,28(2):119-123
[3]叶娜,雒伟民,张峰,等.基于WebGIS的图形加载性能优化研究[J].福建电脑, 2013(11):9-11
[4]胡达天,胡庆武.基于开源系统的跨平台地图客户端开发[J].测绘科学, 2015,40(7):142-145
[5]李正学,许捍卫.基于开源的轻量级WebGIS开发框架的研究与实现[J].测绘与空间地理信息, 2015,38(5):53-55
[6]Leaflet. AnOpen-SourceJavaScriptLibraryforMobileFriendly Interactive Maps[EB/OL].(2011-05-13)[2017-04-01].http://leaf letjs.com
[7]Dino Ravni?. HTML5 Canvas:an Open Standard for High Performing GIS Map Visualization in Web Browsers[EB/OL].(2012-04-05)[2017-04-01]. http://www.directionsmag.com/entry/html5-canvas-an-openstandard-for-high-performing-gis-map-visualizatio/243519
[8]GIS Cloud. On-line Vector Map of Germany Road Netword[EB/OL].[2017-04-01]. http://editor.giscloud.com/map/16594/germany-6000000-features
[9]孙晨龙.基于矢量瓦片的矢量数据组织方法研究[J].测绘与空间地理信息, 2016,39(4):122-124
[10]何猛,蔡忠亮,任福.移动地图中的矢量瓦片组织方法研究[J].测绘地理信息, 2015,40(2):74-76
[11]Apache. The Tomcat JDBC Connection Pool[EB/OL].(2017-03-09)[2017-04-01].https://tomcat.apache.org/tomcat-7.0-doc/jdbcpool.html
基本信息:
中图分类号:P208
引用信息:
[1]顾振雄.基于Leaflet和Web服务的移动端矢量瓦片显示系统[J].地理空间信息,2019,17(03):24-26+9.
2019-03-21
2019-03-21
2019-03-21