Map google tag

 Tôi sẽ giải nén và xem cấu trúc project Blazor trước để biết các control Tag hiện có (TagList, TagTable…) được cài đặt thế nào.

Tôi đã thêm phần tử TagMap vào Toolbox, nằm cạnh TagList và TagTable. Tôi chưa build hay chạy thử được, vì môi trường này không cài được .NET SDK. Tôi chỉ kiểm tra cú pháp JS bằng Node và rà code C#/Razor bằng mắt, nên bạn hãy build rồi báo lỗi nếu có.

Cách dùng

1. Kéo TagMap vào canvas. Nó có sẵn 1 điểm mẫu ở Hà Nội.
2. Trong PROPERTIES, bấm ＋ Thêm nhà máy cho mỗi nhà máy OCC (ví dụ 10 điểm). Mỗi điểm gồm:
   • Tên nhà máy.
   • Toạ độ: trên Google Maps, bấm chuột phải vào vị trí, bấm dòng toạ độ để copy, rồi dán vào ô "Toạ độ" (dạng 21.0285, 105.8542). Bạn cũng có thể nhập Lat/Lng riêng.
   • Danh sách chỉ số: Tên · Tag · Đơn vị, giống TagList. Chọn Tag từ danh sách tag hệ thống.
3. Ở Runtime, bản đồ vệ tinh hiện ghim đỏ kèm tên cho từng nhà máy.
   • Bấm ghim sẽ mở bảng giá trị thời gian thực. Số liệu cập nhật mỗi 0.5 giây, kể cả khi bảng đang mở.
   • Ghim chuyển xám khi không tag nào của điểm đó đọc được.
   • Bật "Tự zoom vừa tất cả các điểm" để bản đồ ôm trọn các nhà máy.

Các thay đổi trong code

• Components/TagMapBox.razor: hiển thị bản đồ và đẩy giá trị tag sang JS, chỉ khi dữ liệu thật sự đổi.
• Components/TagMapProps.razor: khung thuộc tính.
• wwwroot/scada.js: thêm đối tượng tagMap dùng Leaflet 1.9.4 và ảnh vệ tinh Esri.
• Models.cs: thêm class MapPoint và các trường Map* của Widget, đã cập nhật Clone để Copy/Paste giữ nguyên các điểm.
• ScadaEngine.cs: đổi tên tag sẽ tự cập nhật các dòng trong TagMap.
• WidgetKinds.cs, WidgetBody.razor, app.css, README.md: khai báo, vẽ, CSS và hướng dẫn.
• App.razor: tăng phiên bản app.css và scada.js để trình duyệt nạp bản mới.

Cần biết

• Cần Internet. Bản đồ tải Leaflet từ unpkg và ảnh vệ tinh từ Esri. Nếu máy chạy offline, chép leaflet.js, leaflet.css và thư mục images vào wwwroot/lib/leaflet/. Ảnh nền vẫn cần mạng hoặc tile server nội bộ.
• Ảnh nền mặc định là Esri, không phải Google. Esri miễn phí và không cần key. Tôi có thêm tuỳ chọn "Google Maps" dùng tile Google trực tiếp, nhưng nó không có API key nên chỉ nên dùng thử. Dùng thật cần Google Maps Platform có key theo điều khoản của Google.
• Chưa làm: nút "chọn điểm trực tiếp trên bản đồ" và đổi màu ghim theo alarm. Nếu bạn muốn, tôi làm tiếp từng bước.

Nếu build báo lỗi, gửi tôi nội dung lỗi để tôi sửa tiếp.

Nội dung chính