Chủ Nhật, 17 tháng 5, 2009

TUT Làm bản đồ đại lý

Công việc này có thể làm bạn nghĩ đến giải pháp google maps nhưng theo tôi   dùng google map và maker api của nó là quá phức tạp . Thôi thì tự làm một cái vậy .

Yêu cầu của bài toán là vẽ một bàn đồ nước việt nam , trên đó vị trí các tỉnh thành phố có đại lý của công ty XYZ thì xuất hiện maker (Dùng hình ngôi sao hoặc chấm tròn) và tên tỉnh thành pố có đại lý đo .

Nếu người dùng click vào tỉnh thành phố nào thì xuất hiện chi tiết danh sách các đại lý trực thuộc tỉnh thành phố đó .

Các đồ nghề cần sài : Flash IDE  (CS2) , PHP 5 , Mysql 5 , GIMP (Hoặc PS)

Đầu tiên là làm một cái flash có hiển thị tên các tỉnh thành .

B1 Kiếm một cái bản đồ việt nam (dạng khung) :

google nào

Tôi chọn cái ảnh thứ 2 :



Giờ là lúc dùng đến GIMP để sửa sang nó

Kết quả :D



Cũng không tệ lắm

B2. Tạo flash document có kích thước lớn hơn bức anh một chút : 325x680

Import bản đồ vào .Kéo bản đồ từ lib vào stage nếu bạn import nó vào lib . Đặt tên cho instance là map .

Xong .

B3. Vẽ hình ngôi sao :D

Convert ngôi sao thành Moviclip (nhớ chọn option Export for Actionscript) . Đặt tên cho Class là " Star"  .

B4. Tạo file chứa tên tỉnh thành và tọa độ của chúng . Tất nhiên cái này phải lấy từ  csdl nhưng trước mắt cứ lấy đại một cái file tĩnh đã , sau này chỉ cần sửa lại url trỏ vào file php là xong .

tạo một file data.txt để giả lập dữ liệu lấy ta từ  csdl . giả sử file này đặt ở http://localhost:81/data.txt
data.txt:

Hanoi=30-20&Saigon=40-50

Tôi lưu file theo cấu trúc : "tên tinht thành=tọa độ x- tọa độ y"

tiếp theo mở actionscript code thẳng vào frame 1 .
import flash.net.*;
var myLoader:URLLoader = new URLLoader()
//the data will come as URL-encoded variables
myLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
//Load using an URLRequest, even beeing local
myLoader.load(new URLRequest("http://localhost:81/data.txt"));
//add a listener for the complete event
myLoader.addEventListener(Event.COMPLETE, onLoadHandle);
function onLoadHandle(ev:Event):void{

for (var name in myLoader.data){
trace(name+":"+myLoader.data[name]);

}
}

Chạy thử đoạn code trên :

kq:

Hanoi
30-20
Saigon
40-50

Tiếp theo là thay vì trace ta sẽ add các ngôi sao lên các vị trí tương tứng :
var mc:Star = new Star();
var valuePair:String=String(myLoader.data[name]);
var arr=         valuePair.split("-");
mc.name=name;
mc.x=arr[0];
mc.y=arr[1];
addChild(mc);

Thay đoạn code này vào trong vòng for .

Ta sẽ thấy xuất hiện 2 ngôi sao ở vị trí 30-20 và 40-50 .

Giờ là lúc tìm vị trí chính xác cho 2 ngôi sao này (Dùng GIMP đo tọa độ trên ảnh )

Đây là kết quả của tôi :D (chắc chắn là chưa chính xác vì tôi áng khoảng thôi , bạn phải khớp với bản đồ thật)

Hanoi=137-108&Saigon=179-570

Chạy lại : Hai ngôi sao đã phù hợp với vị trí các tinht thành , nếu muốn có thêm các tỉnh thành khác bạn chỉ việc thêm vào file data.txt .

B5. Xử lý tên tỉnh thành nằm cạnh ngôi sao :


import flash.net.*;
import flash.text.TextField;
var myLoader:URLLoader = new URLLoader()
//the data will come as URL-encoded variables
myLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
//Load using an URLRequest, even beeing local
myLoader.load(new URLRequest("http://localhost:81/data.txt"));
//add a listener for the complete event
myLoader.addEventListener(Event.COMPLETE, onLoadHandle);
function onLoadHandle(ev:Event):void{

for (var name:String in myLoader.data){

var mc:Star = new Star();

var valuePair:String=String(myLoader.data[name]);
var arr=         valuePair.split("-");
mc.name=name;
var txt:TextField = new TextField();
txt.text=mc.name;

mc.x=arr[0];
mc.y=arr[1];
mc.addChild(txt);
addChild(mc);

}
}

Tạm thế đã . :D

Không có nhận xét nào:

Đăng nhận xét