# Summary of Undergraduate Graduation Design

After the admission, I was too lazy to write. I just did the final design without taking notes. I will sort it out before the defense.

First of all, the basic idea has been determined, which is to use the Dijkstra algorithm to find the shortest path. The problem lies in the following points.

## One, server configuration

This can be regarded as adding some difficulty to Bishe, otherwise the difficulty is unreasonable. The server configuration is detailed in the cloud server column of the blog. At first, Nginx was configured, then dynamic and static separation and HTTPS protocol were configured, and finally Mysql was also configured.

## Second, location acquisition

Navigation definitely requires geographic location, so you need to obtain the location information of the mobile phone on the browser side. However, for security reasons, browsers require that the accessed web pages use the https protocol to ensure security, so this involves SSL in the server configuration certificate.

After obtaining the latitude and longitude coordinates, because the geographic coordinates and latitude and longitude coordinates used by the Baidu map interface are still different, conversion is required to convert the latitude and longitude coordinates to Baidu coordinates, and then use the interface provided by Baidu to display on the map. The conversion coordinate code is as follows:

``````var pi = 3.14159265358979324;
var a = 6378245.0;
var ee = 0.00669342162296594323;
var x_pi = 3.14159265358979324*3000.0/180.0;

//世界大地坐标转为百度坐标
function wgs2bd(lat,lon) {
var wgs2gcjR = wgs2gcj(lat, lon);
var gcj2bdR = gcj2bd(wgs2gcjR, wgs2gcjR);
return gcj2bdR;
}

function gcj2bd(lat,lon) {
var x = lon, y = lat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
var bd_lon = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
var result = [];
result.push(bd_lat);
result.push(bd_lon);
return result;
}

function wgs2gcj(lat,lon) {
var dLat = transformLat(lon - 105.0, lat - 35.0);
var dLon = transformLon(lon - 105.0, lat - 35.0);
var radLat = lat / 180.0 * pi;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
var mgLat = lat + dLat;
var mgLon = lon + dLon;
var result = [];
result.push(mgLat);
result.push(mgLon);
return result;
}

function transformLat(lat,lon) {
var ret = -100.0 + 2.0 * lat + 3.0 * lon + 0.2 * lon * lon + 0.1 * lat * lon + 0.2 * Math.sqrt(Math.abs(lat));
ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lon * pi) + 40.0 * Math.sin(lon / 3.0 * pi)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(lon / 12.0 * pi) + 320 * Math.sin(lon * pi  / 30.0)) * 2.0 / 3.0;
return ret;
}

function transformLon(lat,lon) {
var ret = 300.0 + lat + 2.0 * lon + 0.1 * lat * lat + 0.1 * lat * lon + 0.1 * Math.sqrt(Math.abs(lat));
ret += (20.0 * Math.sin(6.0 * lat * pi) + 20.0 * Math.sin(2.0 * lat * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lat * pi) + 40.0 * Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(lat / 12.0 * pi) + 300.0 * Math.sin(lat / 30.0 * pi)) * 2.0 / 3.0;
return ret;
}
``````

## Three, interface use

The weather interface also needs to be used in the interface to directly display the weather that appears on the homepage. Bishili uses the Hefeng Weather interface. When the geographic location is passed to this interface, a weather information in JSON format will be returned. For details, please refer to Hefeng Weather. Development documentation.

## Fourth, exit to modify the weight

Bi Set uses dynamic weights to modify the operation of Dijkstra's algorithm at any time, mainly because the weight increases when the page is opened, and decreases when the page is closed. The former is easy to implement, but the latter is not easy to implement. Here, the navigator and sendBeacon methods are used to hand over the asynchronous request to the browser for execution, so there is no need to worry about the priority of closing the page and sending the request. For details, please refer to the article on withdrawal from deletion.

## Five, effect demonstration

Since the loading of the interface takes a certain amount of time, a loading page is displayed after opening the web page. Try to avoid the situation where the screen is full of white and waiting to be loaded. If the program is used outside the park area, the picture on the right will be displayed. PS Here is a picture of three-color painted love.

After entering, the main interface is displayed. The top of the main interface is a map, and the current location is directly displayed using the Baidu map interface. The three information bars below correspond to weather, visits to the park, and park broadcasts. The visits and broadcasts are from the database through the back-end program using ajax owned. Users can use two ways to navigate, one is to directly enter the desired scenic spot in the above address bar, and the other is to directly click on the desired scenic spot in the recommended scenic spot.

The recommended attractions page was added later, the principle is not difficult, it is to filter the attractions from the database, and then dynamically insert the code. Click Go now to display the route directly.

The route display interface directly displays the route. The icon on the right side of the route indicates the current congestion degree of the road. It is judged and inserted according to the number of people. The route and time can be adjusted according to the actual situation.

## Six, summary

In general, even if the water is over, there is no big difficulty, that is, the server configuration section can be a little bit difficult, anyway, the undergraduate design will not be too good, and it will be over. Later, I should start to record some knowledge of SLAM and ROS, and start to roll it up.