Write in front
This article was written one day and night after I developed the project for two years with ArcGIS API for JavaScript (hereinafter collectively referred to as "ArcGIS JS API"). I wrote this article for two purposes. The first reason is definitely to provide a learning route for more and more GISers engaged in WebGIS development. Of course, the learning route I provided is just a reference; the second The reason is that I want to write an article. I was busy working on the project in August and forgot to update my blog.
When is it suitable to read this article
- Before I was bored at school and wanted to learn WebGIS development
- When you participate in the Esri National Developer Contest (the latest name should be "Esri National Developer Contest")
- When project development at work involves the development of map functional modules
- When you are interested in the technical principles behind AutoNavi Maps, Baidu Maps, etc., or if you have strong technical capabilities and want to implement a similar map application platform by hand
The above are some of the scenarios I thought of. If there are any more than listed, please leave a message below to add. Next, let's first introduce some basics.
Introduction to ArcGIS JS API
Having said so much, today's protagonist has not yet appeared, so let's talk about what ArcGIS JS API is.
The full name of ArcGIS JS API is "ArcGIS API for JavaScript". It has two major versions so far: one is version 3.X, and the other is version 4.X. Among them, version 3.X is the earliest released version. The control of the two-dimensional map is more detailed. The 4.X version is the later released version, which mainly adds the content of the three-dimensional map scene. At present, the two versions are updated at the same time. The latest version of the 3.X version is 3.33, 4. The latest version of the .X version is 4.16. The introduction of the version is here for the time being, and we will introduce it in detail later.
ArcGIS JS API, if we split its name, we can get the following information:
- ArcGIS JS API is actually the API provided by the ArcGIS software (in fact, it is some function methods, you just need to pass parameters and call according to its rules, similar to libraries such as jQuery.js and moment.js)
- This API is written in the JavaScript programming language, so it is related to front-end development
If the above information is recombined, it is not difficult to get the following definition: ArcGIS JS API is some of the interfaces written through JS provided by ArcGIS software. If we call these interfaces according to the requirements of the official website documentation of ArcGIS JS API, we will get the expected return value.
If you don't understand the above text, it doesn't matter, let's continue to read the next content.
What is ArcGIS
The above mentioned the word ArcGIS when introducing the ArcGIS JS API. If you are not a GIS student, you may be very new to ArcGIS, so we still have to spend some time to introduce ArcGIS.
ArcGIS is a very good GIS data processing software, this is its essence. Don't be confused and confused by the various comments on Baidu Baike and the Internet. All the friends only need to remember the sentence just now. In fact, ArcGIS has developed to this day. The description just now is somewhat inaccurate. A more accurate description should be: ArcGIS is not a software, but a platform. We call it "ArcGIS platform".
As a GISer, in our work and study, we actually use and touch the three software ArcGIS Desktop, ArcGIS for Server, ArcGIS Pro, these three software are actually only the ArcGIS software system There are only three of them. You may know too little about other software on the ArcGIS platform. Let's take a look at what the complete ArcGIS platform looks like and what it includes:
As you can see from the above picture, the ArcMap and ArcGIS Pro we usually use the most are in the upper left corner of the above picture, and the ArcGIS Server we use is in the lower left position of the above picture, so everyone should have a basic understanding. These three softwares are not at the same level.
With the above recognition, we continue to look at the above picture. The above picture can actually be divided into three parts: the upper, middle and lower parts. The uppermost layer is the application layer, which includes some application software on the desktop, mobile, and PC, mainly for data The work of collecting, processing, rendering and displaying; the bottom layer is the server layer, including the ArcGIS Server that you often use, GA Server for processing big data, GE Server for processing real-time data, Image Server for processing images, and There are the latest scientific computing Notebook Server, etc. These server servers support the operation of the entire ArcGIS platform. As for the Data Store, it is actually responsible for the data storage in the platform; the top and bottom layers are connected by Portal for ArcGIS, so Portal is actually In the entire platform, it acts as a control center. If our top-level application wants to call the data service in the bottom-level server, it must go through the Portal, which is such a process.
Because of the addition of Portal, the above process may cause some confusion for students who have been using ArcMap+Server before. You only need to imagine the connection between ArcMap and Server as a small road, and Portal as the middle of this road. One door is enough. Once the door is closed, ArcMap and Server can no longer communicate, so we can't access the services in Server on the front end, ArcMap, or mobile terminal. This means it is not too complicated.
ArcGIS JS API learning route
ArcGIS JS API is used for WebGIS development. You must know this. It can't do mobile and desktop. Of course, if you use Yeluzi, it can also be done. For detailed steps, please see my follow-up article. So after everyone knows that "ArcGIS JS API is for WebGIS development", let's take a look at what WebGIS is:
In fact, WebGIS is composed of two parts: Web and GIS. The Web is the front-end development we talked about, also known as Web development. Since it involves front-end development, you can't hide from the three basic front-end technologies. You must learn and master the three elements of HTML, CSS, and JavaScript. Otherwise, give up the development of WebGIS as soon as possible, let alone develop the ArcGIS JS API. These three pieces of content actually don’t require you to be more proficient. If you can write an html page, display it on the front end, and explain clearly how the three technologies of HTML, CSS, and JS are used together. As for the following H5, CSS3, Vue, React, these are all advanced content of front-end development. If you have energy in the later stage, let's learn it.
In GIS, we can roughly divide it into two parts: GIS theoretical knowledge and GIS development. There are many theoretical knowledge of GIS and it is also very complicated. It is a compulsory course of GISer during the university period. I won’t introduce more here. After you have mastered the knowledge of front-end development, if you clarify the data and coordinate system in GIS in GIS theory, it will be enough; in GIS development, we only introduce the development of B/S architecture, that is, WebGIS development, C/ The desktop development of the S architecture is currently available on the market to see the recruitment requirements, the demand is not large, so I won't introduce too much. For the development of B/S architecture, we actually only need to master a map library, because we need to call some interfaces in the map library to instantiate maps and layers, and then perform some map interactions, so you can know that ArcGIS JS API is actually a map library, this map library is written by JS. In addition to ArcGIS's JS map library, there are actually SuperMap's JS map library, Baidu Map's JS map library, Gaode Map's JS map library, etc. There are also many open source map libraries.
So after the introduction of the above content, everyone should have a basic understanding of the learning route of ArcGIS JS API: first learn the basic knowledge of HTML, CSS, JS, write a simple html page and display it in the front-end browser ; Then go to learn the basics of ArcGIS JS API, instantiate a map and display it in the front-end browser; finally try to learn more on the ArcGIS JS API official website, to implement a small demo system, to achieve layer increase Delete, modify, check, rendering, spatial analysis and other functions. If you need it, I will take the time to organize a project practice course of ArcGIS JS API later. You can follow the video course and learn it.
ArcGIS JS API version selection
At the beginning, we introduced the next two versions of ArcGIS JS API: 3.X and 4.X. So when everyone is learning and using, which version should I choose? In fact, this question has already given a reference answer on the official website:
- If the project has no 3D requirements or the 3D requirements are not considered in the future, it is recommended to choose the 3.X version
- If the project has three-dimensional requirements, you must choose version 4.X
The above is a reference for version selection on the official website, but in the current actual project development, everyone basically chooses 4.X for development, so bloggers still recommend using 4.X, because the official website is currently updated for the 3.X version If it only fixes some remaining bugs, it will not add new functions. On the contrary, for the 4.X version, a lot of new functions and new features will be added every time it is updated, so in terms of development trends, 4.X Becoming the mainstream is the general trend.
ArcGIS JS API usage process
After a large part of the introductory content above, we will introduce how to simply use ArcGIS JS API in this section. We will finally implement a two-dimensional map as shown below:
If you are curious about the implementation process of the above map, follow the article to implement it together.
First, we first create a txt file in a certain file directory on our computer, and change the file suffix to html and the file name to HelloWorld.html.
Next, open this file with a txt editor or a VS Code editor, and add the following code. This part of the code has a very simple function, that is, it initializes a html page structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HelloWorld MapView</title>
</head>
<body></body>
</html>On the basis of the above code, we introduce the ArcGIS JS API development kit and style package through the <script> tag and <style> tag, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HelloWorld MapView</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/init.js"></script>
</head>
<body></body>
</html>Then create a new dom node of type <div> in the <body> tag, give it an id attribute, and set the style. This dom node is actually used to store the map, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HelloWorld MapView</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/init.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>Next, create a <script> tag in the <body> tag and add the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HelloWorld MapView</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/init.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "map",
map: map,
zoom: 4,
center: [15, 65]
});
});
</script>
</body>
</html>Finally, we copy the HelloWorld.html file to the local server path of Tomcat or IIS, and then access it through the address "http://localhost/HelloWorld.html" in the browser.
The above is the complete process of using ArcGIS JS API. Let's sort it out and let everyone see it more clearly.
1. Create a new HTML file and initialize the HTML page structure.
2. Load the js development package and css style package of ArcGIS JS API.
3. Create a new DOM node for storing the map and set the style.
4. Write the logic code for instantiating the map
4.1. Pass the require function Load the required API module
4.2, do parameter mapping
in the callback function of the require function 4.3, instantiate each API module in the callback function body of the require function
5. Move the html file to the local server directory and access it through localhost
With the above sorting, everyone should be very clear about the entire ArcGIS JS API usage process. When we do projects later, we actually follow this process. The only difference is in the fourth step, this step Because it involves loading different modules, you may find it more difficult that you don’t know which modules you need to load when you first get started. The best way to solve this is to Baidu and check the official website documents. If you are not sure. , You can contact the blogger for consultation. As long as you are more familiar with ArcGIS JS API, you can easily find the API module you need when you want to implement the function later.
end
This article is here for the time being. If you have something you think of later, you can update it again. If you encounter any problems in your study and work, you can contact the blogger for consultation. At the end of the article, I will answer a few questions for everyone, and then give some relevant learning resources.
Attach:
1. ArcGIS JS API frequently asked questions (basic knowledge, continuous update):
A: Are there Chinese documents for ArcGIS JS API, and the English official website documents cannot be read?
Q: There is no Chinese document. If you really can't understand English, just use the translation function of Google Chrome to learn.
A: Is there a domestic deployment address for ArcGIS JS API, and the address of the official website loads slowly?
Q: No, you need to deploy a set locally. For detailed operation documents, please see other bloggers' articles.
A: I have published some data services on ArcGIS Server. Which APIs should I use to instantiate service layers?
Q: When instantiating the service layer, the choice of API depends on the specific service type. The blogger lists several most commonly used service types and the API (version 4.X) for instantiating the corresponding service. You can refer to it. :
| Service type | Service Description | Required API | Remarks |
| Dynamic service | Generally, the services that we publish directly without processing are usually dynamic services. The service address ends with "MapServer", and there is no slice information in the service information. | "esri/layers/MapImageLayer" | This is for reference only, please see the official website document for detailed usage |
| Slicing service | The service is sliced when publishing the service, the service address ends with "MapServer", and the slice information can be viewed in the service information | "esri/layers/TileLayer"或者"esri/layers/WebTileLayer" | This is for reference only, please see the official website document for detailed usage |
| Image service | For services after the tif data is released, the service address ends with "ImageServer" | "esri/layers/ImageryLayer" | This is for reference only, please see the official website document for detailed usage |
| Element service | The service type is selected as the element when publishing the service, and the data elements of the service can be edited. The service address ends with "FeatureServer" | "esri/layers/FeatureLayer" | This is for reference only, please see the official website document for detailed usage |
2. Learning resources
1. ArcGIS JS API official website document
2. The CSDN column of X Beichen North "ArcGIS JS API 3.X Learning"
3. The CSDN column of X Beichen North "ArcGIS JS API 4.X Learning"
4. Video of Station B of X Beichen North