WebGIS information system-Element project combat

Element installation

In the root directory of the project, first press Shift+right mouse button, and select "Open command line window here" in the pop-up right-click menu; then execute the command in the command line window: insert image description here

You can start downloading and installing Element. After successfully installing Element, open the package.json file, and you can find that the value corresponding to the "dependencies" key contains element-ui, as shown in Figure 1-11. insert image description here

Figure 1-11 The value corresponding to the "dependencies" key contains element-ui

OpenLayers installation

In the root directory of the project, press Shift+right mouse button, select "Open command line window here" in the pop-up right-click menu, and then execute the command in the command line window: insert image description here

You can start downloading and installing OpenLayers. After successfully installing OpenLayers, open the package.json file, and you can find that the value corresponding to the "dependencies" key contains ol, as shown in Figure 1-12.
insert image description here

Figure 1-12 The value corresponding to the "dependencies" key contains ol

Configure the development environment by direct reference

For beginners, it is the simplest and easiest to understand to configure the development environment by direct reference.

Download the Vue file

Open the Vue official website, first click the "Start" button, then click the "Install" button on the page, then find the "Development Version" button and the "Production Version" button on the page, and finally click the "Development Version" button. Download the Vue file to the local, as shown in Figure 1-13. insert image description here

Figure 1-13 Click the "Development Version" button to download the Vue file
Readers can also use the CDN to directly reference the Vue file online, as shown in Figure 1-14. insert image description here

Figure 1-14 Use CDN to directly reference Vue files online

Download the Element file

Open the official website of Element, first click the "Components" button on the homepage of the official website, and then click "unpkg.com/element-ui" on the new page, as shown in Figure 1-15 insert image description here
Figure 1-15 After clicking the "Components" button Click on "unpkg.com/element-ui"

, and the UNPKG page is displayed, as shown in Figure 1-16. insert image description here

Figure 1-16 UNPKG page
Open the file index.js in the folder lib in Figure 1-16, as shown in Figure 1-17. Click the "View Raw" button in Figure 1-17 to get the JavaScript code of Element, as shown in Figure 1-18 (only part of the code is shown).
Figure 1-17 The page after opening the file index.js insert image description here

Figure 1-18 Element's JavaScript code
Press the key combination Ctrl+S to save the page's JavaScript code locally. Open the file index.css in "lib\theme-chalk", click the "View Raw" button on the page, and press the key combination Ctrl+S to save the JavaScript code of index.css locally.
Readers can also directly reference Element files through CDN on Element's official website, as shown in Figure 1-19 insert image description here

Figure 1-19 Directly reference Element files through CDN

Download the OpenLayers file

Open the OpenLayers official website, find and click "Get the Code", as shown in Figure 1-20. Click "v6.0.0-dist.zip" in the opened page, as shown in Figure 1-21, you can download the compressed package of the OpenLayers file, after decompression, copy the ol.css file and ol.js file Copy it into your own project.
Figure 1-20 Click "Get the Code" insert image description here

Figure 1-21 Click "v6.0.0-dist.zip" insert image description here

Readers can also directly refer to OpenLayers files, as shown in Figure 1-22. insert image description here

Figure 1-22 Directly refer to the OpenLayers file
At this point, we can create a folder named app, first create a folder lib under this folder to store the local resources that the project needs to reference; then in the lib folder Create a Vue folder, an Element folder, and an OpenLayers folder, and store the downloaded Vue files, Element files, and OpenLayers files in corresponding folders. The directory structure of the project is shown in Figure 1-23. Readers can also customize the directory structure of the project according to their personal habits.
Figure 1-23 The directory structure of the project insert image description here

Choose an editor that suits you (the editor used in this book is Visual Studio Code), create an HTML file in the app folder, and import the various library files just downloaded into the HTML file, as shown in the figure insert image description here