Bài viết trước chúng ta đã được giới thiệu về những điểm nổi bật của ArcGIS Javascript API 4.x. Hôm nay chúng ta sẽ đi sâu vào sử dụng, trước khi bắt đầu làm việc với ArcGIS Javascript API 4.0 chúng ta nên điểm qua một số đặc điểm của bộ API này để có thể dễ dàng hơn khi bắt đầu. Bài viết này sẽ nêu ra một số điều cơ bản nhất để các bạn có những khái niệm đầu tiên, chi tiết hơn bạn có thể tìm hiểu trên trang chủ của ArcGIS rất đầy đủ và rõ ràng.
Nội dung chính
Những điểm cần chú ý trong API 4.0
1. AMD – Load Module bất đồng bộ
AMD đã có từ những bản API trước nhưng ArcGIS vẫn cho chúng ta làm việc theo cách cũ (legacy). Nhưng từ bản 4.0, legacy đã bị loại bỏ và chúng ta chỉ có thể làm việc với AMD.
AMD viết tắt của Asynchronous Module Definition có nghĩa là khai báo module bất đồng bộ, được cung cấp trong bản Dojo 1.7 trở lên, cho phép chúng ta load module một cách không đồng bộ, nghĩa là chúng ta sử dụng module nào thì sẽ load đến module đấy chứ không cần phải load toàn bộ module khi mở trang.
Vì vậy khi viết code Javascrip với API 4.0 chúng ta phải đặt tất cả code của chúng ta trong hàm require như sau:
require(["id1?","id2"],function(dependencies1?,dependencies2?){
///code here
});
Ví dụ chúng ta sử dụng module “esri/Map”, “esri/views/MapView”,”dojo/domReady!” như sau
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
// Code to create the map and view will go here
});
</script>
Chú ý: thứ tự của các id và dependencies của module phải giống nhau, ví dụ bạn đặt id là : “esri/Map”, “esri/views/MapView” thì dependencies phải là Map, MapView. “dojo/domReady!” không có depenencies, bạn phải đưa vào để câu lệnh của chúng ta được nạp khi load toàn bộ trang thành công.
Chúng ta sẽ hiểu hơn về vấn đề này ở những bài cụ thể tiếp theo.
2. Promises
Promise đóng một vai trò rất quan trọng trong bản 4.0. Hầu hết các tác vụ thực hiện của chúng ta đều phải gọi service cung cấp bởi ArcGIS Server nên các tác vụ có thể được gọi cùng thời điểm và có thời gian trả về kết quả khác nhau, vì vậy chúng ta cần Promise để thực hiên các tác vụ không đồng bộ. Promise là một đối tượng, là kết quả của một tác vụ không đồng bộ. Khái niệm chi tết về Promise có rất nhiều trên mạng, các bạn có thể đọc thêm để hiểu hơn về vấn đề này.
Trong bản API này chúng ta sử dụng rất nhiều phương thức .then(). Đây là một phương thức rất mạnh cho phép chúng ta định nghĩa các hàm callback và errback như ví dụ dưới đây:
someAsyncFunction().then(function(resolvedVal){
// This is called when the promise resolves
console.log(resolvedVal); // Logs the value the promise resolves to
}, function(error){
// This function is called when the promise is rejected
console.error(error); // Logs the error message
});
Ví dụ chúng ta gọi đến phương thức GeometryService.project() là một phương thức bất đồng bộ
require([
"esri/tasks/GeometryService",
"esri/tasks/support/ProjectParameters", ...
], function(GeometryService, ProjectParameters, ... ) {
// Create a new instance of GeometryService
var gs = new GeometryService( "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer" );
// Set up the projection parameters
var params = new ProjectParameters({
geometries: [points],
outSR: outSR,
transformation = transformation
});
// Run the project function
gs.project(params).then(function(projectedGeoms){
// The promise resolves to the value stored in projectedGeoms
console.log("projected points: ", projectedGeoms);
// Do something with the projected geometries inside the .then() function
}, function(error){
// Print error if promise is rejected
console.error(error);
}); });
Chúng ta có thể gọi nhiều phương thức then() theo các mức khác nhau, giá trị trả về của phương thức này là đầu vào cho phương thức tiếp theo. Chi tiết hơn về Promise chúng ta có thể đọc thêm tại đây
3. Sử dụng fromJson() để tạo class
Hàm này cho phép chúng ta tạo nhanh một class theo cấu trúc JSON một cách nhanh chóng như ví dụ dưới đây:
require(["esri/symbols/SimpleMarkerSymbol"], function(SimpleMarkerSymbol){
// SimpleMarkerSymbol as a JSON response generated from ArcGIS REST API query
var smsJson = {
"type": "esriSMS",
"style": "esriSMSSquare",
"color": [76,115,0,255],
"size": 8,
"angle": 0,
"xoffset": 0,
"yoffset": 0,
"outline":
{
"color": [152,230,0,255],
"width": 1
}
};
// Create a SimpleMarkerSymbol from the JSON representation
var sms = SimpleMarkerSymbol.fromJSON(smsJson);
});
4. Get the API
Chúng ta có thể lấy API để sử dụng theo những cách sau đây:
a. CDN – tất cả các file javascript, css được đặt trên máy chủ của ESRI, chúng ta chỉ cần link đến và chạy theo địa chỉ:
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css"> <script src="https://js.arcgis.com/4.0/"></script>
b. Sử dụng bower để tạo bản build của bạn, xem tại đây
c. Tải API về máy, chúng ta làm như sau: truy cập vào trang http://links.esri.com/javascript-api/latest-download , đăng nhập và tải về bộ API, sau đó chúng ta copy vào web server của chúng ta, ví dụ localhost. Mở file init.js, tìm đến dòng [HOSTNAME_AND_PATH_TO_JSAPI] thay thế bằng <tên host>/<đường dẫn đến file init.js>/, ví dụ localhost/arcgis_js_api/library/4.0/4.0/. Tương tự, chúng ta mở file dojo/dojo.js và thay [HOSTNAME_AND_PATH_TO_JSAPI] bằng dòng trên.
Chúng ta có thể gõ lên thanh địa chỉ của trình duyệt http://<tên host>/<đường dẫn đến file init.js>/init.js để kiểm tra, ví dụ : http://www.example.com/arcgis_js_api/library/4.0/4.0/init.js.
Để sử dụng api này chúng ta gọi đến file js và css trong host đã cài đặt là được. ví dụ
<link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.0/4.0/dijit/themes/claro/claro.css" /> <link rel="stylesheet" href="http://www.example.com/arcgis_js_api/library/4.0/4.0/esri/css/main.css" /> <script src="https://www.example.com/arcgis_js_api/library/4.0/4.0/init.js"></script>
Trên đây là những thành phần cơ bản cần biết trước khi bắt tay vào nghiên cứu ArcGIS Javascript API, hẹn gặp các bạn ở bài sau: webgis đầu tiên với ArcGIS Javascrip API- ArcGIS Server.
