Many people are not very familiar with WebGIS, especially developers who are new to it. They feel that this thing is boundless and do not know how to start. Therefore, this article combines their own development and learning experience to recommend learning routes and related learning resources for everyone.

Recommendation of learning resources

In terms of web development

Web Development Fundamentals Learning Resources

The basic knowledge of web development is nothing more than the front-end three swordsmen: HTML, CSS, and JavaScript. For the learning of these three knowledge areas, the focus and difficulty actually lie in CSS and JS. Here are some recommended learning websites and resource books for everyone to learn.

1.w3school

Website: https://www.w3school.com.cn/index.html

Resource Type: Documentation

Reason for recommendation: The w3school website should be the first learning website that every front-end novice comes into contact with. It contains rich technical learning materials related to the Web, but here we only need to care about and learn about the knowledge of HTML, CSS, and JavaScript in the website.

2.Novice Tutorial

Website: https://www.runoob.com/

Resource Type: Documentation

Reason for recommendation: Like the w3school website, it is also the first learning website that many front-end professionals come into contact with. However, compared to w3school, it contains more learning materials. Similarly, here we only need to care about and learn about the knowledge of HTML, CSS, and JavaScript in the website.

3.MDN

Website: https://developer.mozilla.org/zh-CN/

Resource Type: Document Type

Highlight: The most authoritative development guide in the field of Web development is not friendly to novices, and is more suitable for front-end developers who have some experience and need advancement. Similarly, just focus on the knowledge of HTML, CSS, and JavaScript within.

4.Modern JavaScript Tutorial

Website: https://zh.javascript.info/

Resource Type: Document Resource

Recommendation reason: If you want to have a long-term career in the field of web development or WebGIS development, JavaScript technical skills must be passed. The tutorial documents on this website are written based on all the new JS features and new syntax so far. After learning the materials here, you can stay young in the JS field forever.

5.B Station [Backman Tutorial]

Website: https://space.bilibili.com/282190994/

Resource type: Video type

Recommendation reason: Bilibili video is free, and the courses inside are more suitable for practical development.

6.Introductory videos

If you have sufficient funds, you can also purchase some introductory videos on MOOCK, which are also very helpful for beginners. We do not recommend too many courses here.

7.CSS Revealing Secrets

Resource type: Book resource

Recommendation reason: CSS First Sister Lea Verou works! The most important CSS technical book in recent years! New solution to classic web design challenges! These three reasons are sufficient.

8.JavaScript Advanced Programming, 4th Edition

Resource type: Book resource

Recommendation reason: Commonly known as the "JS Red Treasure Book", with over 800 pages of work, it can be used as a dictionary.

Web Development Framework Learning Resources (Advanced)

1.Vue

Official website address: https://cn.vuejs.org/

Resource Type: Document Resource

Recommendation reason: Believe me, for Vue's learning, there is no learning resource that is more detailed and easy to interpret than its own official website document. If you want to learn Vue, simply reading its official website documentation is sufficient.

2.React

Official website address: https://reactjs.org/

Resource Type: Document Resource Recommendation Reason，Similar to Vue, official website documents are also the most authoritative documents. However, React official website documents default to English documents, and some Chinese documents may be ambiguous to understand. It is recommended to learn from official website documents as a reference.

GIS development aspect

GIS theoretical knowledge

1.Recommended Books

"Introduction to Geographic Information Systems"

"Geographic Information Technology Practical Training Series Tutorial: 100 Examples of Basic Experimental Operations in Geographic Information Systems"

2.Knowledge Points to Understand

The meaning of basic data types: vector data, raster data, spatial data, etc.

Geographic coordinate system and projection coordinate system, as well as the conversion of various common coordinate systems between the two types

GIS development resources

1.Baidu Maps JavaScript API

Website: http://lbsyun.baidu.com/index.php?title=jspopularGL

Resource Type: Document Resource

Recommendation reason: If you want to learn WebGIS development, if you have completed the knowledge of web development, then for GIS development, you need to learn some map libraries. In other words, you need to learn the API calls provided by various map libraries to developers. For beginners, the Baidu Maps API is undoubtedly the best beginner learning material, as its documentation is in Chinese. If you start reading and learning from the beginning with the documentation, you can easily create a map application.

2.Gaode Map API, Tencent Map API, etc

Website：https://lbs.amap.com/api/javascript-api/summary（Gaode Map JS API ）https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview（Tencent Maps JS API ）

Resource Type: Document Resource

Recommendation reason: Like the Baidu Maps JS API, the documents are all in Chinese and there is not much pressure to learn. You can create a webgis application example according to the document guidelines, and by learning three different map libraries, beginners can have a certain understanding of GIS development in WebGIS development. In other words, they can gradually understand what a map JS library is, which is a development package written by others, you only need to call the API interface inside.

3.ArcGIS API for JavaScript

Website：https://developers.arcgis.com/javascript/

Resource Type: Document Resource

Recommendation reason: Free to use. The first three map JS libraries are just the necessary libraries for development, but ArcGIS provides a complete set of software and solutions from data production, processing, warehousing, publishing to the server, front-end calling, rendering, and analysis. Therefore, by learning the ArcGIS API for JavaScript development package, you will have a complete understanding of the entire project construction of WebGIS.

4.OpenLayers

Website: https://openlayers.org/

Resource Type: Document Resource

Reason for recommendation: Open source and free. However, as it is an open source map development library, when you encounter problems, you can only ask questions in the community without professional technical support from the corresponding technical after-sales personnel. Therefore, beginners should not touch it.

5.Three. js and Cesium JS

Website: https://threejs.org/ （Three.js） https://cesium.com/cesiumjs/ （CesiumJS）

Resource Type: Document Resource

Recommendation reason: If you need 3D scenes in WebGIS, besides the ArcGIS API for JavaScript, there are candidates that are open source and free. However, since it is an English document and 3D itself is relatively difficult, beginners should not touch it, but you can try it out.

6.Suggest learning ArcGIS API for JavaScript

The map JS libraries mentioned above are all document based. If you like to watch videos, it is recommended to go to Bilibili to find free videos. After all, GIS is a niche industry, and if it involves development, it will be even more niche. Therefore, in order to save everyone's time, it is still recommended to learn the ArcGIS API for JavaScript.

Data resources

1.Resource and Environmental Science and Data Center

Website: http://www.resdc.cn/Default.aspx

Recommendation reason: To do WebGIS, it is definitely necessary to handle and publish some necessary data yourself, such as administrative zoning, night light remote sensing data, river data, road network data, etc. These data are difficult to find directly online, so you can go to this website to download. Currently, the data above is quite comprehensive, which is enough for us to learn and use.

2.Map selector

Website: http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

Recommendation reason: You can download geojson data from a certain administrative region on this website, which is very convenient.

3.Geospatial Data Cloud

Website: http://www.gscloud.cn/

Recommendation reason: There are basically all remote sensing image data here, and if you need image data, you can find it on the 18 sides here.

4.Directly Published Services

A.Jietai's base image data service:

Website: http://map.geoq.cn/arcgis/rest/services

Reason for Recommendation: The above service address directory provides 6 ready-to-use map services, which do not require us to find data to publish on our own. Moreover, the map data is all in Chinese, including dark night versions, warm color versions, gray versions, and mobile dedicated base maps.

B.National Sky Map Service

Website: http://lbs.tianditu.gov.cn/server/MapService.html

Recommendation reason: In China, there are highly professional map services available. If you are working on government online projects, it is recommended to take a look at the map services provided by National Sky Map.

Software Resources

1.ArcGIS

Address: https://www.esri.com/zh-cn/arcgis/products/arcgis-pro/trial (ArcGIS Pro Online Application Trial) https://www.arcgis.com/home/index.html （ArcGIS Online ）

Recommendation reason: As mentioned earlier, ArcGIS provides comprehensive support in the entire process of data production, processing, warehousing, publishing to the server, front-end calling, rendering, and analysis in a WebGIS project. For personal learning and use, please apply for two accounts at the above two addresses and use them. At the same time, there is a mature technical community to answer our questions.

2.QGIS

Website: https://www.qgis.org/en/site/

Recommendation reason: Open source, free. It is also an excellent GIS software.