[3D Map] Development Strategy - Detailed explanation of "GeoJSON" technology and application scenarios

GeoJSON , a data format for storing geographic information. GoeJSON objects can represent geometries, features or feature collections, supporting: point, line, polygon, multipoint, multiline, multipolygon, and geometry collections. A data type that needs to be used in flat maps and three-dimensional maps.
Due to the excellent properties of this format in 3D maps, using it we can not only easily implement map functions, but also have extraordinary performance in 3D effect display.

GeoJSON data structure diagram

Read the introduction:

• GeoJSON is a format for encoding various geographic data structures.
• GeoJSON objects can represent Geometry, Feature, or FeatureCollection.
• GeoJSON supports the following geometry types: Point, Line, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection.
• A feature in GeoJSON contains a geometric object and other properties, and a feature collection represents a series of features.

A complete GeoJSON data structure can be called an object. In GeoJSON, objects are composed of name/value pairs - also known as collections of members.
After understanding the concept, we are more mysterious about GeoJSON, what exactly can it do? As we mentioned above, GeoJSON is a data structure of geographic information, so how is this data recorded?
Next, I will give you a detailed introduction to the entire data structure of GeoJSON.

A standard GeoJSON structure:

 {
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

Outermost layer:

• type: "Feature" represents a feature element, "FeatureCollection" represents a collection of feature elements
• geometry: stores the actual shape description of the feature
• properties: store the properties of the feature

geometry:

• type: storage feature type (Point (point), LineString, Polygon, MultiPoint (multi-point), MultiLineString (multi-line) and MultiPolygon (multi-face))
• coordinates: coordinates (stores graphics coordinates)

The basic structure of GeoJSON is clearly understood, and the next step is how to use it in practical cases. Let's take a look at some of the implementation effects:
animation shot

Post a map

flying line

Heatmap

dot plot

three-dimensional view

Mass Point Icon

Through the above effects, you can see that there are many and very cool display effects based on the map. A new understanding of the application areas of GeoJSON. And these features are based on the map. Next, we will introduce the technical application from the basic field to the display field.
Basic application of GeoJSON: map
Advanced Applications of GeoJSON: webGL

Technology application solutions

Based on the basic knowledge we have learned, GeoJSON is composed of points, lines and surfaces. Therefore, map software such as AutoNavi Map and Baidu Map have also launched corresponding APIs to parse GeoJSON. relatively mature.
Here we take AutoNavi map as an example to introduce the technical solution for technicians to apply GeoJSON based on AutoNavi map.
The above functions are based on the Loca data visualization of AutoNavi Maps, which is a high-performance map data visualization library based on AutoNavi Maps JS API 2.0.

Advanced visualization implementation

Loca.GeoJSONSource: Bind a data source in geojson format, a data source can provide data to multiple layers at the same time. A geojson data source can have data types of points, lines, and surfaces at the same time. When each layer is drawn, it will automatically obtain the appropriate data type for rendering.
display effect:

Sample code:

 <script>
        var map =  new AMap.Map('map', {
            zooms: [4, 8],
            zoom: 4.5,
            showLabel: false,
            viewMode: '3D',
            center: [105.425968, 35.882505],
            mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
        });

        var loca = new Loca.Container({
            map,
            opacity:0,
        });

        var geo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json',
        });

        var pl = window.pl = new Loca.PointLayer({
            zIndex: 10,
            blend: 'lighter',
        });

        var style = {
            radius: 3.5,
            unit: 'px',
            color: '#3C1FA8',
            borderWidth: 0,
            blurWidth: 3.5,
        }
        pl.setSource(geo);
        pl.setStyle(style);
        loca.add(pl);

        var dat = new Loca.Dat();
        dat.addLayer(pl);
    </script>

You can see from the sample code: To parse GeoJson, you only need to call Loca.GeoJSONSource, and you need a few lines of code to achieve cool effects. The understanding of the underlying technology has been greatly reduced.
Let's look at another example: area coverage.

Sample code:

 <script type="text/javascript">
    var map = new AMap.Map('container', {
        center: [107.943579, 30.131735],
        zoom: 7
    });
    
    ajax('../chongqing.json', function(err, geoJSON) {
        if (!err) {
            var geojson = new AMap.GeoJSON({
                geoJSON: geoJSON,
                getPolygon: function(geojson, lnglats) {
                    return new AMap.Polygon({
                        path: lnglats,
                        fillOpacity: 1,    
                        strokeColor: 'white',
                        fillColor: 'red'
                    });
                }
            });
            map.add(geojson);
            log.success('GeoJSON 数据加载完成')
        } else {
            log.error('GeoJSON 服务请求失败')
         }
    })
</script>
其中加载GeoJson关键代码部分为：
var geojson = new AMap.GeoJSON({
                geoJSON: geoJSON,
                getPolygon: function(geojson, lnglats) { 
                    return new AMap.Polygon({
                        path: lnglats,
                        fillOpacity: 1,    // 透明度
                        strokeColor: 'white',
                        fillColor: 'red'
                    });
                }
            });
            map.add(geojson);

In the example, the amount of code has been reduced to a minimum, and you only need to understand the basic front-end code to achieve it.
The GeoJson code excerpt referenced in this case:

 {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "id": "500242",
                "name": "酉阳土家族苗族自治县",
                "cp": [
                    108.8196,
                    28.8666
                ],
                "childNum": 1
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            108.3142,
                            28.9984
                        ],
                        [
                            108.3252,
                            29.0039
                        ],
                        [
                            108.3142,
                            28.9984
                        ]………………………
                    ]
                ]
            }
        }
    ]
}

The readme of this code: I am a piece of area code, which includes several sets of subitems. As my immediate boss, the type is FeatureCollection. My little brothers are all in the features node, which defines each person's personality, their The header tag includes several types of Feature, properties nodes, with their ID, name, and location information, of course, including how many subordinates they have. The basic content of GeoJson in the base map is that simple.

The geometry node of each little brother is their active area, the type is Polygon, and the coordinates here represent the active area.
So according to the method, bind GeoJson and it can be displayed in the map.
The map is the battlefield of GeoJson. Currently, all maps on the market are based on the format of GeoJson.
Through analysis, it is found that GeoJson is not so mysterious.

The previous ones are all based on two-dimensional maps. Next, I will introduce the advanced usage of GeoJson and how to implement and apply the high-level format.
3D effect example

Code example:

 var geo = new Loca.GeoJSONSource({
            url: 'geo.json',
        });
var pl = new Loca.PolygonLayer({
            zIndex: 120,
            shininess: 10,
            hasSide: true,
            cullface: 'back',
            depth: true,
        });
pl.setSource(geo);


对应GeoJson格式：
{
    "type": "FeatureCollection",
    "name": "sh_building_center",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn"
        }
    },
    "features": [
        {
            "type": "Feature",
            "properties": {
                "mainKey": 50001,
                "h": 18
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            121.480519,
                            31.250787
                        ],
                        [
                            121.480127,
                            31.250616
                        ],
                        [
                            121.480132,
                            31.25061
                        ],
                        [
                            121.480374,
                            31.25061
                        ],
                        [
                            121.480578,
                            31.250707
                        ],
                        [
                            121.480519,
                            31.250787
                        ]
                    ]
                ]
            }
        }
    ]
}

properties in the features node
After reading the code, I found that the processing process of 3D and flat map is almost the same, which is also reflected from the side. In fact, in the current use of GeoJson, it is implemented based on the API opened by the map. The innovation of technology allows basic developers to realize advanced map application functions. In a word, GeoJson was born to make map application development easier and easier to use.

Application scenarios

When we develop map plug-ins based on GetJSON, we often do not end up displaying a map animation independently, but need to realize "map visualization", convert geographic data into a visual form, and visualize the surface by converting the data with regional characteristics or data analysis results. Now on the map, it is easier for users to understand data laws and trends. Map visualization can display business data in related geographic data, showing business data more directly.

Many BI tools solve the function of large-screen display of data visualization, but the native styles provided in map visualization display will have many styles and functional limitations. Therefore, BI tools also open visual plug-in development for developers to develop based on the plug-in development mechanism. To realize the development of visual plug-ins that meet the needs of the project.

In addition, if you are interested, you can try to experience the online demo:
https://www.grapecity.com.cn/solutions/wyn/demo