+3

Học nhanh Goong Maps - Part 2

Tiếp nối bài viết kỳ trước, để giúp các bạn có thể theo dõi các bài trong series thực hành với Goong Maps, mình tiếp tục cung cấp tới các bạn những lý thuyết quan trọng cần biết trước khi bước vào “thực chiến”

Noted: Các phần lý thuyết trong phần 2 này sẽ tập trung vào hỗ trợ các bạn xây dựng tấm bản đồ nhiệt trong project.

STYLE SPECIFICATION (Tiếp)

Layers (Tiếp)

Heatmap

Heatmap là một kiểu layers. Giúp bạn tạo một bản đồ nhiệt bằng cách hiển thị một dải màu biểu thị mật độ của các điểm trong một khu vực.

Dưới đây là các thuộc tính của Heatmap:

Thuộc tính Giải thích
heatmap-weight

Giá trị tùy chọn - Nhận vào một số nguyên lớn hơn hoặc bằng 0
Giá trị mặc định: 1
Hỗ trợ sử dụng expression loại: feature-state và interpolate
Xây dựng thước đo mức độ đóng góp của một điểm riêng lẻ vào bản đồ nhiệt.

VD: Giá trị 10 sẽ tương đương với việc có 10 điểm có trọng số 1 ở cùng một vị trí.
heatmap-intensity

Giá trị tùy chọn - Nhận vào một số nguyên (lớn hơn hoặc bằng 0)
Giá trị mặc định: 1
Hỗ trợ sử dụng expression loại: interpolate
Tương tự như heatmap-weight nhưng kiểm soát cường độ của bản đồ nhiệt dựa trên mức thu phóng.
heatmap-color

Giá trị tùy chọn - Nhận vào một dải mã màu
Giá trị mặc định: ["interpolate",["linear"],["heatmap-density"],0,"rgba(0, 0, 255, 0)",0.1,"royalblue",0.3,"cyan",0.5,"lime",0.7,"yellow",1,"red"]
Hỗ trợ sử dụng expression loại: interpolate
Xác định màu của mỗi pixel dựa trên giá trị mật độ trong bản đồ nhiệt.

Lưu ý: Giá trị của thuộc tính này thường sử dụng expression loại interpolate (Mình sẽ giới thiệu ở phần sau của bài viết này)
heatmap-radius

Giá trị tùy chọn - Nhận vào một số nguyên (lớn hơn hoặc bằng 1)
Giá trị mặc định: 30
Đơn vị: px
Hỗ trợ sử dụng expression loại: feature-state, interpolate
Bán kính ảnh hưởng của một điểm lên bản đồ nhiệt tính bằng pixel.

Tips: Tăng giá trị heatmap-radius làm cho bản đồ nhiệt mượt mà hơn, nhưng ít chi tiết hơn.
heatmap-opacity

Giá trị tùy chọn - Nhận các giá trị trong đoạn [0,1]
Giá trị mặc định: 1
Hỗ trợ sử dụng expression loại: interpolate
Thiết lập độ trong suốt của lớp layers bản đồ nhiệt.

Expression

interpolate

Tạo ra kết quả liên tục, mượt mà bằng cách “nội suy” giữa các cặp giá trị đầu vào và đầu ra values ("stops")

  • Đầu vào có thể là bất kỳ biểu thức số nào (e.g., ["get", "population"]). Các giá trị mốc dừng phải là biểu thức numeric tăng dần.
  • Đầu ra là number, array<number>, hoặc color.

Các loại nội suy:

  • ["linear"]: Nội suy tuyến tính
  • ["exponential", base]: Nội suy theo cấp số nhân Trong đó thuộc tính base tốc độ tăng của giá trị. Nếu bạn đặt base = 1, thì output sẽ tăng tăng tuyến tính.
  • ["square-bezier", x1, y1, x2, y2]: Nội suy bằng cách sử dụng square-bezier với 4 điểm x1,y1,x2,y2 tương ứng.

Cú pháp

["interpolate",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2],
    input: number,
    stop_input_1: number, stop_output_1: OutputType,
    stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType (number, array<number>, or Color)

Vi dụ:

'interpolate',
['linear'],
['get', 'mag'],
1, 'rgba(33,102,172,0)',
2, 'rgb(103,169,207)',
3, 'rgb(209,229,240)',
4, 'rgb(253,219,199)',
5, 'rgb(239,138,98)',
6, 'rgb(178,24,43)'

All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.