I have read a little bit of OpenLayer source code for work reasons, although I was dizzy at that time, but through a glimpse of the basic principles of some of these map components, they initiated their own writing a similar small toy idea. After a delay of nearly half a year, I finally spent a few nights in the earlier part of the year to have a rough version.
Ok, without further ado, this article mainly introduces the pre-knowledge, if you are familiar with GIS knowledge, you can also skip this article.
Coordinate system
We usually contact the most is latitude and longitude coordinates, the scientific name of this coordinate system is EPSG:4326 coordinate system (or WGS84 coordinate system), for users this is the most intuitive and familiar coordinate system. Of course, this geocenter coordinate system is established in three-dimensional space, and the map component described in this paper is actually a plane map (like Baidu Map and Autonavi Map), so we will use the Mercator projection coordinate system to build a plane map.
The Mercator projection spreads out the three-dimensional sphere into a rectangular surface. Combined with the tile map, we can divide the flat map into four layers and cut it into a pyramid model.
Map of tiles
At present, many map software will use tile map, as shown in the figure above, tile map is composed of progressive grid layers, using this format of map service has many advantages:
- Can ensure the clarity of loading
- Preprocessing, no need for back-end real-time rendering
- Block loading improves loading efficiency
When the map software zoom in, it will load the next layer of tiles, and when the map software zoom out, it will load the previous layer of tiles, so as to ensure that at different heights of the lens, the resolution of tiles can be kept within a stable range.
In browser Map applications, the Web Map Tile Service (WMTS) protocol developed by Google Maps is often used. WMTS is constructed using the EPSG:3857 coordinate system, as shown in the figure below
Oddly enough, the origin of EPSG:3857 coordinates is in the lower left corner of the map, while the origin of WMTS tiles is in the upper left corner, which makes the code more cumbersome.
Field of view (FOV) versus the map’s visual range
We can think of the map software window as the camera shot picture, because the window width and height does not change, but the height of the camera (abstract understanding). That at the time of the camera height change, how do we determine the scope of the visual map (Windows), here we need to introduce the camera fov concept, as shown in the figure below, suppose we have a video camera hanging over a flat map, we can use the camera height and Angle of the camera fov, calculate the map and visual range.
This article only provides a brief overview of the GIS knowledge needed for the rest of the article. If you don’t understand it, it will be more specific to the code implementation later on. I am a computer professional background, not geographical information professional background, the above article has a wrong description, please criticize.