[WebGIS với ArcGIS Server – API 4.x #4] – Những điểm mới của ArcGIS Javascript API 4.x

0
2886

Service webgis đầu tiên chúng tôi đã hướng dẫn trên phiên bản ArcGIS Javascript API 3.x, vậy với bản 4.x này thì có gì đặc biệt hơn. Trước khi bắt đầu vào nghiên ArcGIS Javascript API chúng ta nên điểm qua những điểm mới của bộ công cụ này. Phiên bản 4.0 là phiên bản cập nhật rất lớn so với phiên bản 3.x, bao gồm thay đổi cú pháp, loại bỏ một số thành phần cũ và thêm nhiều thành phần mới cũng như cách tiếp cận mới mà theo đánh giá của mình là dễ dùng hơn rất nhiều.

1. Những điểm khác của ArcGIS Javascript API 4.x so với bản 3.x

1.1. Các thuộc tính (Properties)

Chúng ta có thể thiết lập trực tiếp các thuộc tính vd: map.basemap= ‘oceans’, hoặc truy cập trực tiếp vào các thuộc tính như: map.basemap.title
Trong bản 3.x chúng ta thường thiết lập các thuộc tính như sau:

myFeatureLayer.setDefinitionExpression(expression);

Còn trong bản 4.0 chúng ta có thể thiết lập trực tiếp:

myFeatureLayer.definitionExpression = expression;

Bản 4.0 có thêm hàm .get() để truy cập sâu vào các thuộc tính ví dụ như:

var basemapTitle = map.get("basemap.title");

1.1. Bắt sự kiện thay đổi thuộc tính

Trước bản 4.0, việc thay đổi các thuộc tính được bắt bởi các sự kiện. Trong bản 4.0, việc đó trở nên dễ dàng hơn, được thể hiện thông qua phương thức .watch(property, callback) .Hàm callback được gọi khi các property thay đổi và cho phép bạn làm việc với các giá trị mới, cũ và tên cùng với các đối tượng watch.

var propertyChangeHandler = function(newValue, oldValue, property, object){ 
 console.log("New Value: ",newValue," Old Value: ",oldValue,
 " Changed Property: ",property," Watched Object: ",object);
};

1.3. View

Ở bản 4.0, bản đồ có thể được hiển thị dạng 2D hoặc 3D. Bởi vì thế nên phương pháp vẽ bản đồ phải được xem xét lại. Map và Layer không còn được xử lý vẽ logic mà giờ được xử lý qua View
View là khái niệm mới được giới thiệu ở bản 4.0. Một view có thể là một trong 2 dạng sau:
a. MapView – làm việc với 2D
b. SceneView – làm việc với 3D
View được sử dụng đặc biệt để hình học hóa dữ liệu của bản đồ map hoặc scene. Một map chứa các dữ liệu thực tế hoặc các layer để hiển thị, trong khi đó thì view sẽ thực thi việc hiển thị dữ liệu. Cách thức dữ liệu được hình học hóa, hoặc được hiển thị thay đổi tùy thuộc vào việc bạn chọn làm việc với 2D hay 3D. View có reference đến map ví dụ view.map nhưng map thì không. Một map có thể được hiển thị trên nhiều view.
Có một cách hiểu như sau: Map mô tả dữ liệu của bản đồ nền và các thực thể trên thế giới, trong khi đó view hiển thị cửa sổ cho phép map hiển thị trên đó.
Đoạn code bên dưới ví dụ cách tạo map 2D (MapView) và 3D (SceneView)
2D

function (Map, MapView){
 map = new Map({
 basemap: "topo"
 });
 view = new MapView({
 container: "viewDiv",
 map: map,
 scale: 2400000
 });
}

3D sử dụng SceneView

function (Map, SceneView){
 map = new Map({
 basemap: "topo"
 });
 view = new SceneView({
 container: "viewDiv",
 map: map,
 scale: 2400000
 });
}

1.4. Thay đổi trong Map và layer

a. Từ bản 4.0, basemap sẽ được chia ra từ operational layer trong map.
b. Có thể xoay được view trong cả 2D và 3D
c. Graphic layer có thể thêm bất cứ đâu trong danh sách layer. Từ bản 4.0, chúng luôn được ở trên những layer không phải graphic layer.
d. Lớp GroupLayer được thêm mới.

1.5.Cập nhật các Module và package

Xem các module được cập nhật tại đây.

1.6.  Hỗ trợ WebMap

Bắt đầu từ bản 4.x đã hỗ trợ đọc dữ liệu từ WebMaps có nghĩa là chúng ta có thể hiển thị dữ liệu WebMap kể cả khi bao gồm những dữ liệu không được hỗ trợ như WMS layer. Trong trường hợp đó những layer nào được hỗ trợ thì sẽ được hiển thị.

1.7. Localization

Tại bản 4.x, right-to-left (RTL) không còn là hiệu ứng trang khi thiết lập locale thành “ar” or “he”.

  • Bạn có thể thiết lập RTL cho bất kỳ locale nào . Xem thêm RTL support.
  • Bạn có thể thiết lập trong thẻ <html> hoặc <body>. Xem thêm RTL support.

1.8. AMD only

Từ bản 4.0, API chỉ cung cấp mô hình AMD thay cho cả AMD và legacy như các bản trước.

1.9.Những thành phần bị loại bỏ

Geocoder widget bị bỏ khỏi bản 4.0. Bạn có thể sử dụng widget Search thay thế tại đây: Search .

2. Những điểm mới của ArcGIS Javascript API 4.x so với bản 4.0 beta

2.1.Autocasting

Autocasting là cách thức thiết lập các thuộc tính của đối tượng một cách rất tiện lợi so với bản cũ. Ví dụ trước đây chúng ta gán màu cho một đối tượng chúng ta làm như sau: color: new Color([255,128,45]) thì bây giờ chỉ cần viết thành: color: [255,128,45] là ArcGIS tự nhận thành màu chúng ta muốn. Đại loại là chúng ta có thể thiết lập rất nhanh các giá trị thuộc tính mà không cần gọi đối tượng cần thiết lên.

Các bạn có thể đọc thêm tài liệu: tại đây

2.2. Hỗ trợ đọc WebMaps

WebMaps là ứng dụng webgis bạn tạo trên ArcGIS Online hoặc ArcGIS for Portal. Việc đọc WebMaps trong ArcGIS Javascript API rất dễ dàng, bạn chỉ cần điền ID của WepMaps là được

require([
 "esri/Color",
 "esri/symbols/SimpleLineSymbol",
 "esri/symbols/SimpleMarkerSymbol"
], function (
 Color, SimpleLineSymbol, SimpleMarkerSymbol
) {
 
 var symbol = new SimpleMarkerSymbol({
 style: "diamond",
 color: new Color([255, 128, 45]), // You typically create the instance with the "new" keyword
 outline: new SimpleLineSymbol({ // also here
 style: "dash-dot",
 color: new Color([255, 128, 45]) // and here
 })
 });
 
});

2.3. Những cải tiến FeatureLayer

FeatureLayer có những cải tiến đáng kể sau:

a. Các Feature trong FeatureLayer được thể hiện như các graphic trong một LayerView. Để truy cập vào các features trong view, sử dụng các phương thức truy vấn trong FeatureLayerView

b. Cho phép tạo FeatureLayer từ một PortalItem có sẵn, các bạn có thể xem ví dụ tại đây: Create a layer from a portal item

c. Cho phép tạo FeatureLayer từ một mảng graphics tạo từ máy client, ví dụ  tại đây

d. Hiệu suất được cải thiện như bản vẽ được quản lý tự động bởi API

e. Cho phép lọc các feature từ máy client, xem tại: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression

2.4. Cải tiến các Widget

a. Đơn giản hóa việc khởi tạo, thiết lập và xem các widget cho đơn giản và phù hợp hơn
b. Gộp Attribution widget và logo widget thành Attribution wiget
c. Chia Locate widget thành Locate widget và Track widget

2.5.Cải tiến Popup Template

Cho phép làm việc với nhiều thành phần popup trong Popup Template. Bạn có thể chọn trong 4 kiểu: text, fields, media (bảng biểu, ảnh), và các tệp đính kèm. Các thành phần này có thể được thêm vào một cách đơn lẻ hoặc gộp vào với nhau. Xem thêm tại đây: PopupTemplate.content
popupElement2.6.Thêm Widget mới

Các widget mới được thêm vào là:
a. NavigationToggle widget – Cung cấp 2 nút cho phép bật tắt chế độ SceneView navigation.
b. Legend widget – Hỗ trợ làm việc với FeatureLayer và StreamLayer
c. Track widget – Cung cấp các hàm xác định tọa độ dựa trên tọa độ của thiết bị và hiển thị trên View, xem ví dụ tại Track widget simulation .

2.7. Cải tiến SDK
a. Thêm nhiều ví dụ và tutorials
b. Cải tiến trải nghiệm điều hướng với API reference
c. Thêm nhiều Guide.

2.8. Sửa lỗi
Xem tại đây: https://developers.arcgis.com/javascript/latest/guide/whats-new/index.html#Bug_fixes_77

2.9. Cập nhật các API
a. Thêm khái niệm view container
b. Đổi tên các  hằng số, biến, hàm
c. Xóa một số hàm, biến không sử dụng.
Chi tết các hàm, biến được xóa hoặc đổi tên các bạn tìm hiểu thêm tại: Đây

Vậy là bạn đã nắm được những điểm mới trong API 4.0, hẹn gặp lại ở những bài sau, chúng ta sẽ làm rõ hơn cách sử dụng API này nhé.

Tác giả: Đỗ Xuân Cường

Nguồn bài viết: cuongdx313.wordpress.com

Previous article[WebGIS với ArcGIS Server – API 4.x #3] – Publish Service
Next article[WebGIS với ArcGIS Server – API 4.x #5] – AMD, Promise, fromJson(), get API

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.