Development And Optimization Of WebGIS Front-end Based On JavaScript

Geographic Information System (GIS) is a interdiscipline composed by manysubjects and technologies. The development of these subjects and technologies hasgreat effect on this subject. Due to the rapid development of GIS, computertechnology and internet technology, web service providing the technical support forinformation sharing and interoperability, GIS system needs networked interoperabilityand data sharing. WebGIS is most prominent one of the network GIS, becomes ashining star of GIS.This paper relies on the project named “Jilin Province Town Planning andConstructing Information Platform” which depended on the low degree ofinformatization of town planning and construction in our country. At the same time,information has scattered sources, various kinds of information integration is still low,and we have not take full use of these information. The collection of geographicallyscattered information is difficult. Our team construct the “Jilin Province TownPlanning and Constructing Information Platform”, in this system, application and GISsystem is closely related, providing geographic information business.In recent years, the scale of web client development become larger and largerand has many complicated web page files developed by AJAX, and there are manyscripts of client side, thus the front-end development has many problems such as thequantity of code, organizing, reusing and maintaining the code, Investigating thereason, front-end development does not attach importance to the design pattern, justrealizing the interactive function. So front-end architecture design and modulardevelopment emerge in the front-end development. Modular front-end development isdividing into many small modules according to the layout and function of the front,each module has its specific function, then gathering these modules into a system. Themodular development of front-end can greatly reduce the interference of programmers,and collaborative development becomes more quickly, so it can improve the browsingspeed, the network information organization and maintenance become more efficient,the codes can also be streamlined.Firstly, this paper analyzes many related technologies such as HTML5,Openlayers, RequireJS and Backbone, constructs a lightweight, opened WebGISsystem model based on JavaScript combined with advantages of these technologies, then describes the design idea, and realizes the WebGIS system preliminarily. At theend, this paper applies some front-end optimization techniques to the implementationof the project, and analyzes the performance optimization effect each of them.