openlayers officially provides many examples, which are worth reading and learning. But in the learning process, if you just look at its code, simpler examples are fine, but when encountering complex examples, we must use code debugging tools to understand the logic behind them more specifically.
Currently, the sample pages of openlayers3, openlayer4, and openlayer6 official websites all provide editing functions. Click Edit on the page to open the online editor to edit and modify the code. The openlayers5 example page does not see Edit. Although the online editor is very convenient, it can be used even without registration. But occasionally it is restricted by the network, and even cannot be opened.
Starting from openlayrs5, the examples on the official website have been developed using front-end engineering. You can see that the import method is used in js, and there is a package.json file at the same time. The engineering writing method is very convenient, and it is OK if it is used in an online editor. But when the network is not strong, or online editing is difficult to debug and other reasons, we hope to quickly get the code to develop and debug locally.
Let's learn how to quickly build openlayers6 localization development.
development tools
vscode
node version 12+
process
1. Create ol application
npx create-ol-app my-app
my-app is your project name.
After the execution is complete, the my-app directory will be created. The directory structure is as follows:
2. cd to the my-app directory
cd map-app
then run
npm start
Startup project.
3. Copy the official website code
Find the example you want to run locally, such as: https://openlayers.org/en/latest/examples/canvas-tiles.html
Copy the main.js and index.html codes and paste them into the corresponding files.
In index.html, refer to the location of main.js, plus type='module'. as shown in the picture
4. Code fine-tuning
- Basemap
In some examples, the resulting basemap requires a key to be displayed. If the basemap cannot be displayed, try another basemap. - Resources
Data resources: directly add the complete resource address to the code to request, or download it to the local project, and then load it.
Image resource: You can directly download it locally, and then modify the image address in the code.
5. Start the project
run
npm start
If the project has already been started, you can skip this step, or run it again after confirming the terminal ctrl + C.
6. Code debugging
Under normal circumstances, the project can run normally here. At this time, if you want to understand some changes in the code running, you can go to the browser to break the point to debug.
Although the project is packaged, it supports source file debugging. Therefore, mian.js can be found in the browser for debugging.