Openlayers practical tutorials are divided into ** graphic version ** and ** video version **, here is the graphic version, including basic knowledge introduction and * actual source code *, the example effect is displayed in the form of gif animation . **Video version** is being recorded and will be online soon, so stay tuned~ If you have any questions, you can add vx to consult gis-dajianshi
This practical tutorial loads the openlayers program on the basis of vue2.X to develop various sample programs.
Practical tutorial project environment configuration:
1. Download and install nodejs
Download address: https://nodejs.org/en/download/ Choose different versions of software to download according to the user's own machine conditions. This tutorial example uses Windows 64-bit system software.
The installation process is simple, one step at a time.
The installation is successful, test whether the installation is successful, run CMD, and enter node -v and npm -v to view the version numbers of node and npm respectively.
can be found, indicating that the installation was successful.
2. Install vue-cli
Installation can refer to: https://cli.vuejs.org/zh/guide/installation.html
installation command:
npm install -g @vue/cli
or yarn global add @vue/cli (try not to use this method, yarn will not configure environment variables by itself, and running vue -V will prompt an error)
After installation, you can view the version number of the current vue-cli through vue -V or vue --version.
3. Create an openlayers actual combat project
Find a folder in the system, such as d:/demos, open the cmd window, and use vue create vue-openlayers to create the basic project
Vue-router and vuex are selected in the project, which is convenient for future routing and component data transfer.
4. Install openlayers
Go to the vue-openlayers folder, open the cmd window, and use npm install ol --save to install the openlayers component
5. Install element UI
For the convenience of operation in the project, we directly reference the elementUI component, which is convenient for adding some buttons, pop-up windows, etc.
Go to the vue-openlayers folder, open the cmd window, and use npm i element-ui -S to install the elementUI component
Add in src/main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
The above is the final main.js file content.
The final package.json file is as follows:
So far, the environment setting of the most basic actual combat project has been successfully set up. All that's left is to write the vue code.