2.1

Related technology

The system is implemented based on WebGIS, using ArcGIS Server to publish and manage layers, stores spatial data in PostgreSQL database, stores system business data in MySQL database, and realizes unified access to data by configuring multiple data sources at the back end. The front-end map visualization adopts ArcGIS API for JavaScript + Leaflet technology, and combines with Vue.js, Java, Spring, Mybatis, and other open-source frameworks for system architecture and development.

2.2

Overall architecture

The system is developed with B/S architecture, and the overall structure of the system is shown in Figure 1.

Figure 1.

Overall architecture of the system.

Figure 2.

Data layer structure.

2.3

Module division

The system is divided into modules such as city appearance and environmental map browsing, city appearance and environmental data maintenance, city appearance and environmental thematic statistics, city appearance and environmental thematic map production, system management, and system monitoring. The functional structure of each module is shown in Figure 3.

Figure 3.

System functional structure.

3.1

Module division

This system adopts the MVVM model based on the SpringBoot microservice architecture⁷. The MVVM model can completely separate the view layer displayed to the user from the business logic layer of the back end⁸. The front end transmits data to the back end by sending Ajax requests, and the back end responds and returns the corresponding content after receiving the request, as shown in Figure 4.

Figure 4.

MVVM model.

3.2

Leaflet with ArcGIS API for JavaScript

The map visualization function of this system adopts the technology of Leaflet with ArcGIS API for JavaScript, which is an open-source JavaScript library for Web interactive maps and mobile devices. Because of its lightweight characteristics, it has good compatibility when loading various layers, and the speed of loading map data is very fast.

ArcGIS API for JavaScript will correspondingly convert the user’s operation into HTTP request according to the format of the REST API provided by ArcGIS Server⁹. After receiving the request, ArcGIS Server will call the data for processing, and return the result to ArcGIS API for JavaScript in JSON format. Then ArcGIS API for JavaScript will analyse the result and display it visually through the API, and finally return it to the application program¹⁰. The specific operation flow is shown in Figure 5.

Figure 5.

Workflow of ArcGIS API for JavaScript.

Although the ArcGIS API for JavaScript provides more comprehensive functions than Leaflet and can publish maps made in ArcMap to ArcGIS Server for calling, its own module is too large, resulting in a slow page loading speed¹¹. ArcGIS API for JavaScript has supported importing modules through Npm since version 4.18, eliminating the operation of local deployment in the previous version to improve the map loading speed. However, the requirements for network speed is still very high. Because of its lightweight characteristics, Leaflet has greatly improved the speed of loading maps compared with ArcGIS API for JavaScript. According to the respective characteristics of these two JS libraries and the overall requirements of the system, they are used in the home page and the city appearance environment thematic map generation module respectively. Since the home page needs to load maps frequently, the Leaflet with afaster loading speed is selected, and the city appearance and environment thematic map generation module needs to call the Changchun administrative division map published in the ArcGIS Server. Therefore, ArcGIS API for JavaScript is used to load the basic base map of the city appearance environment and the administrative division map.

3.3

ECharts data visualization

ECharts is the most widely used JS charting library in the market¹². It relies on the canvas class library zender to realize the visualization of chart data. ECharts can directly use various data formats without conversion, realize the front-end display of tens of millions of data, multi-dimensional data filtering, view scaling and other interactive operations, support multiple rendering methods, and meet the needs of most users. The basic process of making statistical charts using ECharts is shown in Figure 6.

Figure 6.

Basic flow of ECharts.

4.1

Interface design

After the project is successfully started, you can successfully log in to the system by visiting the corresponding website and entering the correct account number, password and picture verification code, as shown in Figure 7.

Figure 7.

System login interface.

The interface of the system is mainly divided into three parts, the function bar on the top, the navigation bar area on the left and the main content display area of the page, as shown in Figure 8.

Figure 8.

System main interface.

4.2

System home

The content area of the homepage of this system is the road map of Gaode map, and the displayed area is the main urban area of Changchun City. The blue marked points on the map are the coordinate point of the city’s appearance and environmental problem data stored in the database. Click the marked point to see the information data of the point in the pop-up box, as shown in Figure 9.

Figure 9.

Data information display

The two controls in the upper left corner of the map are respectively used to control the zoom of the map, drawing points, lines, and faces, and measure distance and range area. The layer control in the upper right corner of the map can control the switching between road map and satellite image. The four buttons below the layer control are used to enlarge the map, reduce the map, restore the map to its original position, and display the administrative division range.

4.3

Business data management module

The data management module under the maintenance of the city appearance and environmental data in the sidebar is mainly used to store the business data of the system, that is, the city appearance and environmental problem data. In this module, the city appearance and environmental problem data stored in the MySQL database is displayed in the form of a list.

At the top of the data list is the search area and the adding, modifying, deleting, and exporting buttons. After selecting the time range, event type and administrative area to be searched. Clicking search, the system will query the data that meets the search criteria and update the data list, as shown in Figure 10.

Figure 10.

Data list of urban environment problems.

Through the adding button below, you can add new data of urban appearance and environment problems to the database. In the pop-up dialog box, fill in the corresponding contents. The latitude and longitude coordinate data cannot be entered by manually filling in the data. Instead, clicking the “get coordinates” button to obtain the longitude and latitude coordinates from the map, as shown in Figure 11.

Figure 11.

Add cityscape environmental issues data window.

After clicking the getting coordinates from map button, the system will automatically jump to the home page. You can click the administrative region button in the upper right corner to display the administrative region range on the map, so that you can find the location you want to mark. After you find the location you want to mark by zooming the map, double-click the map to mark on the map.

After the mouse double clicks on other positions on the map, the previously marked point will be cancelled and remarked on the new position. After completing the relevant operations, click the return list button below the map to jump back to the data management interface. At the same time, the system will automatically fill in the latitude and longitude coordinates of the just marked points in the corresponding area. After completing the entry of basic information, the data can be added to the data list, after selecting the checkbox in front of the data to be deleted in the data list, click the delete button to quickly delete multiple data; the operation process of the export function is similar to that of delete. If you directly click the export button without selecting data, the system will prompt whether to delete the list Export all the data in the file, or select the data you want to export, click Export, and select the save location of the file to download.

There are three options under the operation tab of each data in the data list: edit, delete and location. To click Edit to see all the information about this piece of data onto the pop-up dialog box, and you can modify the data in real time on this interface. If you want to modify the latitude and longitude coordinates, you also need to click to get the coordinates from the map, the system will jump to the home page and locate the view to the location of the point, and double click the position you want to modify to remark it. To click the positioning option, you can see the location of the point in the home page and highlight it, as shown in Figure 12.

Figure 12.

View the location of the point on the map through the positioning option.

4.4

Statistical analysis module

This module summarizes the data of city appearance and environmental issues. The content area is mainly divided into the query area and the chart area. The chart area is divided into three parts, as shown in Figure 13. The statistical analysis chart of administrative district complaints in the upper left corner is mainly used to count the number of urban appearance and environmental problems in each administrative district. The statistical analysis chart of complaint types in the upper right corner is mainly used to calculate the number of each type of city appearance and environmental problems, which is displayed in the form of a bar chart. The trend graph of the number of city appearances and environmental problems below is used to count the number of city appearances and environmental problems in the past ten months. In the query area above the chart area, select the administrative area and date range, and click search. The system will query the data that meets the requirements, and the chart below will also change according to the data.

Figure 13.

View the results after selecting the date range you want to query.

4.5

Thematic map production and output model

The content area of this module is the road map of Gaode map and the administrative division map of the main urban area of Changchun City. The road map of Gaode map is loaded through the custom TileLayer provided by ArcGIS API for JavaScript. The administrative division map of the main urban area of Changchun is processed and rendered in ArcMap and imported from the spatial database. After that, it is published as FeatureLayer by ArcGIS Server. The published layer is called in the code and superimposed on the basic base map.

To click the generate thematic map button in the lower left corner. In the generate thematic map interface popped up in the upper left corner of the map, select the date and event type, and then click generate thematic map. According to the selected restriction conditions, the system will assign the corresponding value of the corresponding field of the layer in the spatial data base after classification and statistics by administrative region and render it, as shown in Figure 14.

Figure 14.

Setting user permissions.

To click the print button and the export interface pops up in the upper right corner. After selecting the file format and setting the height and width, enter the file name and click export to print the thematic map, as shown in Figure 15.

Figure 15.

Set the thematic map export style.

4.6

System management

The system management module can configure and manage the system in real-time according to the needs, and set the use rights that only for administrators. The display and hiding of each module in the system can be configured through menu management.