WebGIS framework -- kalrry

One 、 brief introduction

1. First understand ,WebGL It's a kind of 3D Drawing protocol , It's just a standard , Based on this standard , You can write MapBox-GL, You can also write three-GL Other framework , They're all about web End rendering 3D graphics ( Rendering ) engine

2. On the difficulty ,thingjs( frame )<threejs( engine )<webgl( Interface )
   be based on WebGL Of 3D Application of technology in web pages ThingJS

3. Often pass arcgis Publish 2D map or 3D map , Then call... On the client side json Realization webgl Rendering .

Two 、 Why do we need WebGL?

because html5 Although support Canvas, But you can only draw two-dimensional graphics on it , So we need to WebGL To draw three-dimensional graphics .

3、 ... and 、 Why WebGL It also needs to be mapbox-gl and three-gl？

because WebGL Basic class libraries are like C++ The basic functions inside are the same , Another layer of encapsulation is needed , Can be provided for various purposes 3D The user to use .

Four 、WebGIS frame

1、OpenLayers---- Open source -2D

2、Leaflet---- Open source -2D

1. Official website
   Leaflet It is a modern map developed for mobile devices 、 Open source JavaScript library . It is from Vladimir Agafonkin Lead a team of professional contributors to develop , Although the code is only 38 KB, But it has most of the capabilities that developers develop online maps .

2. Commonly used in 2D Map rendering

3. Reference resources
   Reference resources
   course

3、Arcgis---- charge

1. brief introduction
   Official website
   ArcGIS It's a comprehensive system , Users can use it to collect 、 organization 、 management 、 analysis 、 Exchange and release geographic information . As the world's leading geographic information system (GIS) Build and apply platforms ,ArcGIS It can be used by people all over the world to apply geographical knowledge to government 、 Enterprises 、 Technology 、 Education and media .ArcGIS You can publish geographic information , So that everyone can access and use . The system can be used anywhere through web browser 、 Mobile devices （ For example, smart phones and desktop computers ） To use .
2. Reference resources
   Reference resources 1

4、Cesium---- Open source — Give priority to this

1. brief introduction
   Introduce
   Official website
   Third party Chinese website
   Cesium It's a 3D Earth and map oriented , World class JavaScript Open source products . It provides the basis JavaScript Language development kit , Convenient for users to quickly build a zero plug-in Virtual Earth Web application , And in the performance , precision , Rendering quality and multi platform , High quality assurance in ease of use .

2. How to use

//1、npm Way to install 
npm install cesium
//2、 Or download directly from the official website 
[ Download from the official website ](https://cesium.com/downloads/)

4. Reference resources
   Reference resources 1
   Reference resources 2

5、Mapbox---- Open source

1. brief introduction
   Chinese official website
   Official website
   Mapbox Committed to creating the most beautiful personalized map in the world .
   In an accidental search for map related materials, I found a very magical and beautiful map , This map supports highly customized map elements , such as , road , River system , Green space , building , Background color , wait .Mapbox To build the Mapbox studio Map making virtual studio , It is a perfect personalized editor for map elements . in addition , We can also upload the geographic information data of our own project to Mapbox Cloud , Then show it on the client side of your project .
   Mapbox Map data comes from Open Street Map（OSM） Other map data providers , and Google Map、Apple Map The map data sources of map manufacturers are similar .
2. Reference resources
   Tutorial reference

5、 ... and 、 Environment building

1、 Preface

1. WebGIS There are many forms of development , For example, someone uses Arcgis for JS api Development , Someone uses OpenLayers Development , Someone uses it MapboxGL Development , Someone uses it Cesium Development . Have a look , These development forms are different , But they all belong to WebGIS Development , Are developed using interfaces , There are encapsulated class properties and methods , We just need to learn to call and do these properties and methods .

2. WebGIS frame
   These map development platforms , among Arcgis for JS api Not an open source map development platform , and OpenLayers,MapboxGL,Cesium Are open source map development platforms . About the development of two-dimensional and three-dimensional maps , among Cesium Mainly used for 3D map development , Its function in this respect is relatively powerful , Of course, it can also do the development of two-dimensional maps . and OpenLayers The development of 3D map is not supported , It only supports the development of two-dimensional maps ,MapboxGL and Arcgis for JS api Both 2D and 3D support , If the learning difficulty is compared , If five stars are full , Study Arcgis for JS api It can be said that there is 4 Star level difficulty , Study MapboxGL and OpenLayers Should have 3 The difficulty of stars , Study Cesium It's relatively simple , There are many cases online for us to learn , Learn the difficulty level of two stars , But as long as you master the doorway , Learning is relatively fast , And this is just the tip of the iceberg we know .

3. To sum up , The degree of learning and mastering ：
   Understanding the mainstream WebGIS frame , Include Openlayers, Cesium, MapboxGL, Leaflet, ArcGIS API for js
   Try installing 1-2 Seed frame .

2、 Environment building

3. Quickly build arcgis as well as cesium Environmental Science

4. Configure the reference ---- adopt leaflet、cesium、mapBox Create map

6、 ... and 、 Expand

1、QGIS---- be based on QT

1. QGIS---- Open source
2. QGIS Making maps

2、 understand Three.js

1. Learning reference
2. Learning reference
3. Webgl Chinese web reference
4. The illustration WebGL And Threejs working principle