Kiểu của các tính năng trong thành phần FeatureView được chỉ định bằng các quy tắc được xác định trong đối tượng JavaScript. Bạn có thể đặt kiểu trong quá trình xác định ban đầu của FeatureViewLayer hoặc bất cứ lúc nào sau đó. Hệ thống định kiểu cho phép bạn đặt các quy tắc kiểu chung áp dụng cho các nhóm tính năng lớn, cũng như các quy tắc cụ thể hơn cho các tính năng cụ thể. Bạn có thể xác định kiểu đối tượng bằng giá trị không đổi hoặc dựa trên dữ liệu, dựa trên các đặc điểm của đối tượng.
Đối tượng kiểu
Cấu trúc cơ bản của đối tượng kiểu được hiển thị bên dưới. Có hai loại quy tắc: quy tắc chung và quy tắc cụ thể. Quy tắc chung ảnh hưởng đến tất cả tính năng trong một thành phần FeatureView, còn quy tắc cụ thể ảnh hưởng đến một tập hợp con tính năng.
{
// Broad style rules.
opacity: …,
polygonFillColor: …,
// Specific style rules.
rules: [
{ … },
{ … }
]
};
Quy tắc chung
Để áp dụng các thuộc tính kiểu cho tất cả các đối tượng (hoặc các đối tượng thuộc một loại hình học cụ thể), hãy chỉ định các thuộc tính kiểu ở cấp cao nhất trong đối tượng kiểu.
{
opacity: 0.5,
pointShape: 'triangle',
lineWidth: 10,
polygonFillColor: 'green'
};
Quy tắc cụ thể
Để áp dụng các thuộc tính kiểu cho một nhóm nhỏ các tính năng, hãy sử dụng trường rules. Trường rules chấp nhận danh sách đối tượng JavaScript, mỗi đối tượng có một filter chọn các tính năng theo điều kiện do đối tượng ee.Filter xác định, theo sau là một loạt thuộc tính kiểu. Trong ví dụ bên dưới, có một quy tắc chỉ đặt polygonStrokeWidth và polygonFillColor nếu thuộc tính "REP_AREA" nhỏ hơn 100. Các quy tắc cụ thể sẽ ghi đè các thuộc tính kiểu của quy tắc chung và các quy tắc gần cuối danh sách rules sẽ ghi đè các quy tắc gần đầu danh sách (các quy tắc cụ thể được đánh giá từ đầu đến cuối).
{
rules: [
{
filter: ee.Filter.lt('REP_AREA', 100),
polygonStrokeWidth: 0.5,
polygonFillColor: 'blue'
},
{ … } // Optionally include additional rules.
]
};
Đặt kiểu
Bạn có thể đặt kiểu tính năng khi khai báo FeatureViewLayer hoặc bất cứ lúc nào sau đó.
Nội dung khai báo FeatureViewLayer
Để đặt các tham số hình ảnh khi khai báo FeatureViewLayer, hãy sử dụng tham số visParams.
var visParams = {
opacity: 0.5,
lineWidth: 10,
polygonFillColor: 'purple'
};
var layer = ui.Map.FeatureViewLayer({
assetId: 'WCMC/WDPA/current/polygons_FeatureView',
visParams: visParams
});
Map.add(layer);
FeatureViewLayer hiện tại
Để đặt các tham số trực quan cho một FeatureViewLayer hiện có, hãy sử dụng hàm setVisParams. Thuộc tính này sẽ thay thế mọi quy tắc kiểu đã chỉ định trước đó; các thuộc tính chưa chỉ định sẽ được đặt thành mặc định.
var layer = ui.Map.FeatureViewLayer('WCMC/WDPA/current/polygons_FeatureView');
Map.add(layer);
layer.setVisParams({
opacity: 0.5,
lineWidth: 10,
polygonFillColor: 'purple'
});
Biểu tượng học
Đối với mỗi thuộc tính kiểu, bạn có thể chỉ định quy tắc kiểu không đổi hoặc quy tắc kiểu dựa trên dữ liệu. Tuỳ chọn dựa trên dữ liệu sử dụng các giá trị thuộc tính của đối tượng để xác định biểu tượng, có thể là dạng phân loại hoặc nội suy. Để biết danh sách đầy đủ các thuộc tính kiểu, hãy xem bảng thuộc tính kiểu.
Hằng số
Quy tắc kiểu không đổi bao gồm một thuộc tính kiểu cần đặt và giá trị của thuộc tính đó. Ví dụ sau đây đặt màu tô đa giác thành màu xanh dương.
var visParams = {
polygonFillColor: 'blue'
};
Thống kê dạng danh mục
Quy tắc kiểu theo danh mục bao gồm một thuộc tính kiểu để đặt và một đối tượng JavaScript có ba thuộc tính:
property– tên thuộc tính tính năng có giá trị sẽ ảnh hưởng đến kiểu.categories– danh sách các danh sách liên kết các giá trị thuộc tính tính năng với ký hiệu thuộc tính kiểu. Mỗi danh mục bao gồm một giá trị thuộc tính, theo sau là một giá trị ký hiệu để áp dụng. Giá trị thuộc tính xác định một danh mục phải là một chuỗi.defaultValue– ký hiệu mặc định để áp dụng cho các đối tượng có giá trị thuộc tính không được xác định trongcategories. Nếu giá trị này là rỗng/không xác định, chế độ cài đặt kiểu mặc định sẽ được áp dụng.
Ví dụ: đối tượng sau đây đặt thuộc tính kiểu color dựa trên thuộc tính đối tượng "MARINE". Các tính năng trong danh mục "MARINE" "0" được đặt thành màu tím, "1" thành màu xanh lục, "2" thành màu xanh dương và mọi danh mục khác thành màu trắng.
var visParams = {
color: {
property: 'MARINE',
categories: [
['0', 'purple'],
['1', 'green'],
['2', 'blue']
],
defaultValue: 'white'
}
};
Nội suy
Quy tắc kiểu nội suy bao gồm một thuộc tính kiểu để đặt và một đối tượng JavaScript có tối đa 5 thuộc tính:
property– tên thuộc tính tính năng có giá trị sẽ ảnh hưởng đến kiểu.mode– chế độ nội suy,'linear'hoặc'interval'.palette– danh sách màu sắc, độ mờ hoặc chiều rộng để nội suy giá trị thuộc tính đầu vào giữa các giá trị đó. Định dạng phụ thuộc vàomode, hãy xem các phần Tuyến tính và Khoảng thời gian để biết thêm chi tiết.
Chỉ áp dụng cho chế độ 'linear'
min– giá trị thuộc tính để liên kết với phần tử đầu tiên trong danh sáchpalette.max– giá trị thuộc tính để liên kết với phần tử cuối cùng trong danh sáchpalette.
Tuyến tính
Chế độ nội suy tuyến tính đặt thuộc tính kiểu đối tượng bằng cách ánh xạ tuyến tính các giá trị đầu vào trong phạm vi min đến max giữa danh sách các giá trị ký hiệu được xác định trong thuộc tính palette. Các giá trị đầu vào được cố định trong phạm vi do min và max đặt.
Ví dụ: đối tượng sau đây đặt thuộc tính kiểu color dựa trên thuộc tính đối tượng "REP_AREA". Thuộc tính palette là một danh sách màu sắc cho biết rằng các giá trị đầu vào từ min đến max phải được phân loại theo tuyến tính từ màu vàng đến màu đỏ đến màu xanh dương. Giá trị từ 1 đến 500 được nội suy giữa màu vàng và màu đỏ, còn giá trị từ 500 đến 1000 được nội suy giữa màu đỏ và màu xanh dương.
var visParams = {
color: {
property: 'REP_AREA',
mode: 'linear',
palette: ['yellow', 'red', 'blue'],
min: 1,
max: 1000
}
};
Khoảng thời gian
Chế độ nội suy khoảng đặt thuộc tính kiểu đối tượng bằng cách liên kết các giá trị đầu vào với các điểm ngắt lớp, sau đó áp dụng ký hiệu dành riêng cho lớp. Giá trị đầu vào từ thuộc tính đối tượng được chọn được chỉ định cho giá trị ngắt lớp gần nhất bằng cách làm tròn xuống. Thuộc tính palette được định dạng dưới dạng danh sách các danh sách, trong đó mỗi danh sách bên trong chứa một giá trị ngắt lớp, theo sau là một giá trị thuộc tính kiểu. Các tính năng có giá trị thuộc tính nhỏ hơn giá trị ngắt lớp tối thiểu sẽ duy trì chế độ cài đặt thuộc tính kiểu mặc định.
Trong ví dụ sau, độ mờ của tính năng tô được đặt theo các lớp được phân cấp của thuộc tính "REP_AREA". Định nghĩa lớp và ký hiệu kiểu được cung cấp trong thuộc tính palette dưới dạng danh sách các danh sách. Điều này cho biết sẽ có 4 lớp với các điểm ngắt ở giá trị 0, 80, 2000 và 5000, với độ mờ của các tính năng tương ứng là 0,5, 0,35, 0,22 và 0,15. Nói cách khác, các đối tượng có giá trị "REP_AREA" trong khoảng $ 0 \le x < 80 $ sẽ có độ mờ tô là 0,5, các giá trị trong khoảng $ 80 \le x < 2000 $ sẽ có độ mờ tô là 0,35, v.v.
var visParams = {
fillOpacity: {
property: 'REP_AREA',
mode: 'interval',
palette: [
[0, 0.5],
[80, 0.35],
[2000, 0.22],
[5000, 0.15]
]
}
};
Tất cả thuộc tính kiểu
Dưới đây là tất cả các thuộc tính kiểu mà bạn có thể chỉ định trong đối tượng kiểu.
Việc đặt thuộc tính kiểu cho các loại hình học cụ thể sẽ ghi đè các thuộc tính kiểu tương ứng được đặt cho "Tất cả hình học" (ví dụ: việc đặt polygonFillColor sẽ ghi đè giá trị được đặt trong fillColor).
| Thuộc tính | Loại | Mô tả | Hỗ trợ Quy tắc nội suy |
|---|---|---|---|
| Tất cả hình học | |||
isVisible |
Boolean |
Thiết lập xem tính năng có hiển thị hay không. | Không |
color |
String |
Đặt màu tô/nét vẽ cho tất cả các loại hình học. Phải là giá trị hex hoặc màu CSS3. | Có |
opacity |
Double |
Đặt độ mờ của màu tô/nét vẽ cho tất cả các loại hình học. Phải là số thực có độ chính xác kép từ 0 đến 1. | Có |
width |
Double |
Đặt chiều rộng nét cho tất cả các loại hình học. | Có |
fillColor |
String |
Đặt màu tô cho tất cả các loại hình học. Phải là giá trị hex hoặc màu CSS3. | Có |
| Hình học điểm | |||
pointShape |
String |
Đặt hình dạng của hình học điểm. Hỗ trợ các hình dạng giống như ee.FeatureCollection.style (vòng tròn, hình vuông, hình kim cương, hình chữ thập, dấu cộng, hình năm cánh, hình lục giác, hình tam giác, triangle_up, triangle_down, triangle_left, triangle_right, hình ngũ giác, hình lục giác, star5, star6). |
Không |
pointSize |
Double |
Đặt chiều rộng của hình học điểm (tính bằng px). | Có |
pointFillColor |
String |
Đặt màu nền cho hình học điểm. Phải là giá trị hex hoặc màu CSS3. | Có |
pointFillOpacity |
Double |
Đặt độ mờ màu tô cho hình học điểm. Phải là một số thực kép từ 0 đến 1. | Có |
| Hình học đường | |||
lineType |
String |
Đặt loại đường kẻ. Hỗ trợ các loại tương tự như ee.FeatureCollection.style (đậm, nét đứt, chấm). |
Không |
lineWidth |
Double |
Đặt chiều rộng đường kẻ (tính bằng pixel). | Có |
lineColor |
String |
Đặt màu cho hình học đường thẳng. Phải là giá trị hex hoặc màu CSS3. | Có |
lineOpacity |
Double |
Đặt độ mờ cho hình học đường. Phải là số thực có độ chính xác kép từ 0 đến 1. | Có |
| Hình học đa giác | |||
polygonStrokeWidth |
Double |
Đặt chiều rộng nét của đa giác (tính bằng pixel). | Có |
polygonStrokeType |
String |
Đặt loại đường cho đa giác. Hỗ trợ các loại tương tự như ee.FeatureCollection.style (đậm, nét đứt, chấm). |
Không |
polygonStrokeColor |
String |
Đặt màu nét vẽ cho hình học đa giác. Phải là giá trị hex hoặc màu CSS3. | Có |
polygonStrokeOpacity |
Double |
Đặt độ mờ nét vẽ cho hình học đa giác. Phải là một số thực gấp đôi nằm trong khoảng từ 0 đến 1. | Có |
polygonFillColor |
String |
Đặt màu nền cho hình học đa giác. Phải là giá trị hex hoặc màu CSS3. | Có |
polygonFillOpacity |
Double |
Đặt độ mờ màu tô cho hình học đa giác. Phải là một số thực gấp đôi nằm trong khoảng từ 0 đến 1. | Có |