It’s time to meet again, beanskin fans. This time, 👏, Kakashi from Bytedance’s data platform introduces babies to cheese related to “geographic information visualization” 😘.
How to design and implement a geographic information visualization system?
Reading the full text: about 8 minutes
By Kakashi
One, foreword
1.1 define
Geographic information visualization is a process of expressing geographic information in the form of map driven by geographic database. (Subsequent articles will also introduce the two parts of data generation and presentation.) It is mainly based on geographic information science, computer science, cartography, cognitive science, information transmission science and geographic information system. And through computer technology, digital technology, multimedia technology dynamic, intuitive, image performance, interpretation, transmission of geographic information space and reveal its laws, is about information expression and transmission of theory, methods and technology of a discipline. With the help of graphics, computer graphics and image processing technology, the results and data of geo-information input, processing, query, analysis and prediction are displayed and interactive in visual forms such as graphic symbols, ICONS, words, forms and videos.
1.2 significance
Let me give you two examples
🌰:2016 New York Times state-by-state presidential election results
It’s very intuitive to show the results of each state’s election.
You can see the blue state Democrats are mostly on the West Coast and in the Northeast. These regions are deeply divided between the elite and the underprivileged, the beneficiaries of elite privilege and state welfare respectively. Red-state Republicans (Trump) are mostly in the middle. These areas are traditionally agricultural/industrial, relatively conservative, self-made, and anti-big government.
🌰: Baidu Map migration flow before the Spring Festival in 2017
It can be seen from this emigration chart that in the more developed eastern regions, a large number of migrant workers go home for the Spring Festival and “escape from the North to Guangzhou and Shenzhen” for a short time. Soon after the Spring Festival, they will gather here again to strive for their dreams and life. Conclusion: can be seen from the above, the visualization of geographic information data will originally dreary onerous data in the form of popular eton is presented to us, we can from multiple dimensions (time, distribution, migration direction) to tap the value of the data, to understand the beauty of the data, it is more intuitive than words and language, more persuasive.
Second, generate geographic data
First, there are two broad categories of data. Base image data and custom visualization layer data. The base map is usually only used to express geographical information, such as MapBox, Google Maps, etc. The general process is to add different custom visualization layers on the basis of the geographic information base map, such as bar charts, thermal maps, fly-line breathing points, or some mark marks, etc. (more on the Data custom Data layer later). The relationship is roughly as follows:
Ps: These two types of data are not necessary for every scenario. In many cases we just do simple geographical visualizations without loading the base map.
2.1 GeoJSON (base map)
2.1.1 profile
GeoJSON is a format for encoding various geographic data structures and is a tree-like JSON object. Each piece of data is called a Feature, and there are mainly six types of data:
• Point: Point, MultiPoint
• Line: LineString, MultiLineString
• Face: Polygon, MultiPolygon for example:
{
Copy the code2.1.2 instructions
You’ve probably seen geoJSON files with different suffixes on the web, and coordinate systems for maps. What’s the difference?
• Data includes basic information and GEO data
• Labeled as *.info.json for base information (country name, code, capital information, etc.) • labeled as *.geo. • *.dist. Json is a commonly used structured data that can be used directly, basically meeting the needs of building maps and other needs
• A description of coordinate systems
•WGS84 is a geodetic coordinate system, which is also used in the GPS global positioning system. •GCJ02: Also known as Mars coordinate system, it is a geographic coordinate system formulated by the National Bureau of Surveying and Mapping of China, and the coordinate system obtained after encryption by WGS84. •BD09: Baidu coordinate system, encrypted again on the basis of GCJ02 coordinate system. Bd09ll represents latitude and longitude coordinates of Baidu and BD09MC represents Mercator metric coordinates of Baidu.
2.1.3 Key, key, key
According to article 10, article 11, Article 38, Article 52 and Article 62 of the Surveying and Mapping Law of the People’s Republic of China [1]**
The coordinate system based on GCJ02 must be used in the People’s Republic of China; BD09 coordinate system is based on GCJ02 encryption, and can also be directly used.
Therefore, when using map-related services within the territory of the People’s Republic of China, please be sure to follow national laws and regulations. Do not find one from a small website or make one yourself. It is recommended to use the standard map service provided by the Map Technical Review Center of the Ministry of Natural Resources: bzdt.ch.mnr.gov.cn/
2.2 Customizing Data (Visual Layers)
The data format of the base map is relatively uniform, but if we add a lot of custom data (such as Mark Mark) on the map and want to export the map for others to import and use, how to design the data format of Mark? There is no unified statement, the conventional file type can be, like TXT is no problem.
•GeoJSON supports all standard spatial data formats such as point, line, plane, etc. •CSV Supports data types such as points, lines, and arcs. •JSON supports simple point, line, and plane data types, but does not support multi-point, multi-line, and multi-plane data formats. However, it is recommended that custom data continue to use the GeoJson format, because the tree structure and the schema format are generally accepted and uniform.
The second data is usually a tile pyramid model, which is a multi-resolution hierarchical model, from the bottom of the tile pyramid to the top, the resolution is lower and lower, but the geographical range of the representation remains the same. In simple terms, when we look at a map and zoom in, we see more detail, which leads to better performance and viewing experience.
3. Display map data
Data-driven view, got the map geographic data, how to reasonably present it?
3.1 Context bottom layer
The base map is to tell the user where, what to see, roughly have an overall perception.
For example, to draw a Map of China, the base map can be simplified with a world map. In order to make users familiar with the physical environment, users can better determine the location. Or a three-dimensional earth, with the base map at the bottom of the map.
3.2 Data Custom Data layer
After analysis and comparison with ANTV L7, MapV and Loca JS, the custom data layer can be roughly divided into five categories:
3.2.1 Point type data Layer
How to understand the point type data layer, the key is the point type, for example, a place to place a bar chart is also a point type data layer. Because when designing points or markers, points stand for: accuracy and mapping, which is simply the data from a single XYZ coordinate to determine the location. Our province name, graphic mark, breath point, scatter chart, bar chart and so on all belong to point type data layer
3.2.2 Line type data Layer
A line is actually easier to understand. A line describes a relationship between the beginning and the end. Data and presentation understanding are unified, such as urban road congestion maps, train lines, flight lines (population flow, flight information).
3.2.3 Surface Type Data Layer
The type of surface is also easier to understand, that is, to form a plane (thickness is also counted). Is a closed block, commonly known as a province, country, etc.
3.2.4 Thermal Type Layers
In the 3d map scene, the height can also be used to enhance the three-dimensional sense. Thermal map can monitor/compare data changes more clearly and sensitively, which has great reference value for analysis data.
3.2.5 Other Data model layers
Such as DBSCAN and contour map, the data format is relatively special and will not be described in detail here.
3.3 Control Map Control layer
Map component is to assist users to change the UI component of browsing map commonly used controls are:
• Zoom in and out •Pan (usually inherent when dragging maps)• Search by location/geollocation • Reset to default • Change base image • Full screen • Turn layers on and off
3.4 Interaction Layer
Interaction is how people can find more details and information on a map. • Clear selection or filtering by designing good selection status. • A clearly defined hierarchy that prioritizes information and is designed in a way that is obvious to those who use the map. • How to use transitions and animations to support hierarchy and selection. For example, to search for filtering information, rerender is triggered by the user’s modification of the data in the interaction layer, which is strongly bound to the requirements of the business scenario. Generally, the drawing library opens the API to external business developers to call.
For a more detailed understanding of how to design layered maps, check out this article # What to Think About When Designing maps [2]
Fourth, to achieve their own geographic information visualization system
4.1 Analyzing Service Scenarios
Business areas: GIS, land monitoring, digital city, transportation and logistics, meteorology, business location. Different business scenarios, the display form may be slightly different, resulting in different selection solutions. One is the infrastructure to realize more general geographic data application, which needs to be developed again after being introduced by different business parties. One is that the business side directly introduces the mature map library according to the business scenario, so there is no need to consider the later part of the design architecture. Mature products such as MapBox are not well benefited here.
4.2 Design Architecture
If you want to achieve a more general map library for others to use. MVC bottom-up design simple discussion of the idea and optimization.
2 Model
Data loading is actually one of the bigger issues in map scenes, such as loading new data after zooming in and out of view (the tile pyramid model mentioned earlier) can cause lag and delay. The optimization scheme in the industry is also more mature.
1. Mapbox-like TileCache, an LRU (least recently used) caching algorithm. 2. Local storage of IndexedDB is equivalent to making a secondary cache
4.2.2 Controller
Data processing is also core, because basically scene updates are passed in a very large raw data. CPU computing may be blocked. The main optimization ideas are as follows: 4.Web Assembly, the hottest new Web technology in the past two years, solves the problem of slow JS computation (this is the same as above). Whether negative optimization is caused depends on the complexity of business scenarios.)
Holdings View
Finally, render. The basics of WebGL and how to render text are not discussed. Use mature GL libraries such as Three, Babylon, etc. The overall schematic diagram is as follows:
References
[1] of the People’s Republic of China on CeHuiFa “: www.npc.gov.cn/npc/xinwen/… [2] # What to think about when designing maps: smallmultiples.com.au/articles/wh…
The End
Reference:
Step into geographic information visualization