[PIE-Engine Studio Study Notes 08] Grading Rendering of Vector Data

0. Preface

The symbolization of data is divided into two categories: vector data rendering and raster data rendering. This section focuses on the various ways in which vector data can be rendered.
Currently, vector data rendering in PIE-Engine Studio includes:

• simple rendering
• unique value rendering
• Graded rendering
• interpolated rendering
• attribute rendering
• mapbox-gl-style style rendering

More PIE-Engine Studio learning articles, please criticize and correct, and learn together:
[PIE-Engine Studio Study Notes 01] Introduction and Installation
[PIE-Engine Studio Study Notes 02] Load vector data
[PIE-Engine Studio Study Notes 03] Load raster data
[PIE-Engine Studio Study Notes 04] Upload local data and export cloud data
[PIE-Engine Studio Study Notes 05] Image Classification - Unsupervised Classification
[PIE-Engine Studio Study Notes 06] Image Classification - Supervised Classification
【PIE-Engine Studio Study Notes 07】Dynamic display of long time series image data - taking Landsat data as an example

1. Example data description

Demonstrate various rendering methods of vector data by uploading the vector of the administrative division of Beijing.

The vector data structure of the administrative divisions of Beijing is as follows:

{
    
    
    "type": "Feature",
    "properties":
    {
    
    
        "adcode": 110101,
        "name": "东城区",
        "color": "#00FFCC",
        "childrenNum": 14,
        "level": "district",
        "parent": 110000,
        "subFeatureIndex": 0,
        "area": 41.795
    },
    "geometry":
    {
    
    
        "type": "MultiPolygon",
        "coordinates": [...]
    }
} 

2. Simple rendering

2.1 Introduction

Simple Rendering performs a single rendering by setting the outer outline border color and inner color. As shown below:

2.2 Sample Code Description

var features = pie.FeatureCollection("user/moreMoney/bjDemo");
Map.centerObject(features,7);
// 设置成绿色填充色、红色边界
Map.addLayer(features, {
    
    color: "#ff0000",fillColor: "#e8fa5b"}, "BJ");

3. Unique value rendering

3.1 Introduction

The unique value rendering is classified rendering according to the selected field, and each type of value of the field corresponds to a rendering method.

3.2 Sample Code Description

var features = pie.FeatureCollection("user/moreMoney/bjDemo");
Map.setCenter(116.461, 40.217, 7);
let values_sld = {
    
    
    type: "values", //渲染类型，唯一值渲染
    keyName: "adcode",
    rules: [
        //样式 value对应的keyName的值，可以是数值、字符串等
        {
    
    
            value: 110101, 
            color: "#6da8ff",
            opacity: 0.2,
        },
        {
    
    
            value: 110102, 
            color: "#2851CC",
            opacity: 0.8,
        },
        {
    
    
            value: 110105,
            color: "#4ff02d",
            opacity: 0.5,
        },
        {
    
    
            value: 110106,
            color: "#f08c2d",
            opacity: 0.2,
        },
        {
    
    
            value: 110107,
            color: "#99CCFF",
            opacity: 1,
        }
    ],
};
// 除values_sld中的，都设置成黄色填充色、红色边界
Map.addLayer(features, {
    
    color: "#ff0000",fillColor: "#e8fa5b",sld: values_sld}, "values");

4. Graded rendering

4.1 Introduction

Hierarchical rendering is to group the values ​​of the classification field first, and then use different symbols or colors to distinguish the set groups, and each group corresponds to a symbol or color. For example, this case is based on the area size of each district in Beijing for hierarchical rendering.

4.2 Sample Code Description

var features = pie.FeatureCollection("user/moreMoney/bjDemo");
Map.setCenter(116.461, 40.217, 7);
let intervals_sld = {
    
    
    type: "intervals", //渲染类型，分级渲染
    keyName: "area",
    rules: [
        //样式 value对应的keyName的值，只能是数值、⽇期等可以⽐⼤⼩的数据
        {
    
    
            value: [50, 100], //默认 左闭右开，也就是 0 <= value < 100
            color: "#ffffff", //color为#ffffff
            opacity: 1, //透明度为0
        },
        {
    
    
            value: [100, 1000], //100 <= value < 1000
            color: "#2851CC",
            opacity: 0.1,
        },
        {
    
    
            value: [1000, 1500], //1000 <= value < 1500
            color: "#2bd781",
            opacity: 0.5,
        },
        {
    
    
            value: [1500, 1800], //1500 <= value < 1800
            color: "#00ffff",
            opacity: 1,
        },
    ],
};
Map.addLayer(features, {
    
    color: "#00ff00",fillColor: "#ff0000",sld: intervals_sld}, "intervals");

5. Interpolated rendering

5.1 Introduction

Interpolation rendering is to group the classification field values ​​first, and interpolate and display multiple colors for the results that match the group.

5.2 Sample Code Description

var features = pie.FeatureCollection("user/moreMoney/bjDemo");
Map.setCenter(116.461, 40.217, 7);
let ramp_sld = {
    
    
    type: "ramp", //渲染类型 插值渲染
    keyName: "area",
    rules: [ //样式 value对应的具体值
        {
    
    
            value: [50, 100],
            color: ["#ffffff", "#2851CC"],
            opacity: 1,//透明度为0
        },
        {
    
    
            value: [100, 1000],
            color: ["#2851CC", "#211F1F"],
            opacity: 1,
        },
        {
    
    
            value: [1000, 1500],
            color: ["#211F1F", "#ffd0a6"],
            opacity: 1,
        },
        {
    
    
            value: [1500, 1800],
            color: ["#ffd0a6", "#ffaa7f"],
            opacity: 1,
        }
    ]
};
// 除ramp_sld中的，都设置成黄色填充色、红色边界
Map.addLayer(features, {
    
    color: "#ff0000",fillColor: "#e8fa5b",sld: ramp_sld}, "ramp");

6. Attribute rendering

6.1 Introduction

Attribute rendering is to classify and render according to the attribute value of the field, and each value of the field corresponds to a rendering color.

6.2 Sample Code Description

var features = pie.FeatureCollection("user/moreMoney/bjDemo");
Map.setCenter(116.461, 40.217, 7);
let property_sld = {
    
    
    type: "property", //渲染类型 属性值渲染
    colorName: "color"
};
Map.addLayer(features, {
    
    color: "#00ff00",fillColor: "#ff0000",sld: property_sld}, "property");

7. Extension: mapbox-gl-style rendering

7.1 Introduction

Mapbox GL JS is a JavaScript library for building web maps and web applications using modern drawing techniques. You can use Mapbox GL JS to display Mapbox maps in web browsers or clients, add user interactivity, and customize the map experience in applications. Compared with other methods, it requires a certain front-end foundation and is a more advanced method. , Flexible rendering methods.
Mapbox GL JS official website address

7.2 Example code description

var features = pie.FeatureCollection("user/moreMoney/bjDemo");

Map.setCenter(116.461, 40.217, 7);
let mapbox_sld = {
    
    
    type: "mapbox", //渲染类型
    keyName: "area",
    rules: {
    
    
        "fill-color": [
            "case",
            ["<", ["get", "area"], 100],
            "#ff0000",
            ["<", ["get", "area"], 1500],
            "#00ff00",
            ["<", ["get", "area"], 3000],
            "#67c23a",
            "#f1f1f1",
        ],
        "line-color": [
            "case",
            ["<", ["get", "area"], 100],
            "#ff0000",
            ["<", ["get", "area"], 1500],
            "#00ff00",
            ["<", ["get", "area"], 3000],
            "#67c23a",
            "#f1f1f1",
        ],
        "fill-opacity": 1,  //透明度
        "line-opacity": 1,
    }, //mapbox⾃定义规则
};
Map.addLayer(features, {
    
    color: "#ff0000",fillColor: "#e8fa5b",sld: mapbox_sld}, "mapbox");

conclusion

Criticisms and corrections are welcome, for learning and communication only. The information comes from the Internet. If there is any infringement, please contact to delete it. You can follow the WeChat official account: [GeoLearning], share some fun and useful stuff from time to time, welcome to pay attention.

References

PIE-Engine Studio Help Documentation
PIE-Engine Technical Community