Outline
Today interest dictates, when read ArcGIS API for JavaScript official website, found esri-loader with different methods can be used to develop another way of JS API in Vue, React and Angular this mainstream framework, and its operation recorded for people in need of reference partners. If you want to learn how to use the development esri-loader JS API in Vue, React and Angular this mainstream framework, please move to the other two articles:
- "[] React special episode in the development of the use of ArcGIS JS API 4.14"
- "Vue】 【special episode in the development of the use of ArcGIS JS API 4.14"
Steps
1, the installation @ arcgis / cli scaffolding
Open a command line tool, globally installed @ arcgis / cli scaffolding with the following command:
npm install -g @arcgis/cli
You can see by the above command, our scaffolding tool installation is successful, then we create JS API application templates based on ArcGIS different framework through the relevant command.
2, cli scaffolding tools for creating template-based application framework by Vue @ arcgis /
2.1, in the appropriate directory location of JS API to create applications based on a template Vue framework through the following command:
arcgis create arcgis-vue-app -t vue
When entering the above command to create application templates found that when the schedule came as position unusually slow no good to the Internet through scientific methods, then switch to the source npm Taobao source does not work, so we can only use the following methods to solve, He hits a king, hee hee.
After playing more than 40 minutes of a king, found progress bar is almost over, so we wait for the project to create success, as follows:
2.2, the project is successfully created, we enter into the project root directory, then start with the following command:
npm run serve
2.3, after the start of the project will automatically open the browser, the default port is 8080, then there will be a certificate trust issues, we only need to click the trust, then you can proceed as follows:
The above figure can be seen, the project is successfully launched, but the map does not instantiate it, open the console look, there are seven error:
This time we go back to the root directory of the project created, read the README file:
Can be seen by the document, our "npm run serve" command is run the program locally, in the case of local resources and provide needed only to start by this command, so just being given the resources likely to be loaded locally and why they did not find the error, so we start with the correct command to start.
2.4 in the project root directory, run the following command to correct the project by:
npm start
At this point you can see, our project is running correctly, and instantiate a map, and add a legend and a business component layer, and the layer turned Identify mouse click query capabilities.
After the successful operation of the project, we look at the structure of the code.
2.5, editor opened with item code, here with open VS Code, then the code structure can be seen as follows:
We can see from the above code organization structure, we created the project is based on the framework of the Vue, more accurate point that is based on the underlying webpack to build the project. Where {node_modules} file directory is stored under various types of plug-in installed package project; stored in the file directory under {public} is our main page to initialize some template files; {src} directory with our usual vue project engineering Like, all types of component code in our system, create a <header> here default and <WebMap> two components, namely the project page head assembly and instantiate the map component; at {tests} directory is stored for a test <Header> assembly, not useful here; in addition to the several directory folders, as well as under item Eslint root profile, the profile Babel, WebPACK configuration files, so this It is a project with a Eslint, WebGIS mainstream project babel these mainstream plug-in tool framework, the framework to write all the code currently using mainstream TypeScript completed.
2.6, this project used ArcGIS JS API is the latest version 4.14, the address referenced is the official website address. If we use an offline version of the API, we can be configured by modifying the following documents:
src/worker-config.ts
And that we passed Scaffolding Vue framework based application template, if we were to develop, it can be modified to customize the code in this project to develop. Next we look at how to build a template-based application framework React with scaffolding.
3, cli scaffolding tool to create application templates based React framework by @ arcgis /
3.1, above we have the @ arcgis / cli scaffolding installation tool, so then we just need to create the template-based application framework React to the appropriate directory with the following command:
arcgis create reactjsapi -t react
When you create a project here, the progress is very fast, as we first create template-based application Vue call as a king, this is because the first time we have created in the native cached, so subsequently created will be faster.
3.2, to create a good project into the root directory, then start the project with the following command, here is the first reading before we start the project at the README file, to avoid re-start command wrong:
npm start
Can be seen from the above results, it also creates a template-based application framework React, also instantiates a base map and a business layer, and add a legend components and opened a mouse click query capabilities.
3.3, open the project with the code editor you can see, the organizational structure of its code with the code structure template-based application framework created similar Vue, is a template-based application framework built React, can index.tsx files in the src directory by determining, using a variant of the grammar TSX JSX be written as follows:
3.4 Similarly, if we want to change the address JS API references, may change to the following directory:
src/worker-config.ts
These are the application templates based React process framework we create by scaffolding. Follow-up if there is a demand, you can directly modify the code to customize this template basis.
to sum up
This article on how to install @ arcgis / cli scaffold by introduction, how to create and use templates based on Vue React framework to introduce another way of application development ArcGIS API for JavaScript in the mainstream framework by scaffolding. This development approach compared with previous methods esri-loader, it has its own advantages but also disadvantages, for details see another article - "use [evaluation] @ arcgis / cli scaffolding and esri-loader ways ArcGIS JS API development of evaluation. "
