現(xiàn)有的電子地圖多數(shù)用Java開發(fā)的,功能強大,操作便捷。比較典型就是Mapbar(mapbar.com)與Mapabc(mapabc.com)、靈圖(lingtu.com)。
此外,還有一部分是用Flash制作的電子地圖,比如網(wǎng)格深圳(wanggesz.com)、九江電子地圖(jjmap.cn)、江門(五邑)地圖(5emap.com)、衡陽電子地圖(hyemap.com)等。
Java與Flash相比具有明顯的優(yōu)勢,是電子地圖技術的主流方向。不過使用Java地圖的客戶端必須安裝Java虛擬機,對于沒有安裝相關插件的電腦用戶來說,并不能立即使用Java電子地圖。
但對于非專業(yè)的愛好者來說,F(xiàn)lash比Java更容易掌握一些。特別對于繪制樓盤、小區(qū)或是小城市的地圖,并沒有太多太強的功能要求,使用Flash制作已經(jīng)足夠了。
對于Flash電子地圖來說,幾乎所有的個人電腦都安裝了Flash Player插件,只要打開瀏覽器即可正常使用。因此對于非專業(yè)的愛好者來說,無論使用或是學習制作Flash電子地圖更為現(xiàn)實一些。只要掌握了一定Flash Actionscript的基礎知識,都可以通過學習制作出自己滿意的互動電子地圖。
本系列專題將為大家逐步系統(tǒng)地介紹使用Macromedia Flash Professional制作Flash電子地圖的知識,以供大家交流學習。
今天我們就從最簡單的電子地圖開始,我們以制作某地區(qū)的地圖為例逐步由淺入深講解制作步驟。完成效果如下。
最簡單的Flash電子地圖
點擊左邊五個功能按鈕可以得到相應功能
測距時用鼠標在地圖中需要測距的起點單擊按住拖動到終點松開即可
一、確定地圖功能
首先,我們必須確定這個電子提圖需要實現(xiàn)的功能。一般說來,最常用的功能無非是對地圖的縮放、移動、按地名查詢和測量距離等。在這里我們只選取比較簡單的“放大”、“縮小”、“移動”、“復位”和“測距”。
二、制作地圖的底圖
地圖的底圖可以通過很多的圖形圖像處理軟件來制作,當然也可以用Flash 制作,在這里不做詳解。
打開Macromedia Flash Professional,導入做好的地圖圖片作為底圖。(本例中使用一個用Flash Professional制作完成的底圖。)
三、制作功能按鈕
新建一個新的圖層,命名為“按鈕”,在該層依次創(chuàng)建“放大”、“縮小”、“移動”、“復位”和“測距”5個按鈕。如下圖所示。
點擊看大圖 圖1 創(chuàng)建基本功能按鈕
四、為按鈕分配AS功能代碼
進入“動作面板”,為各個按鈕配上以下Actionscript功能控制代碼。
1、“放大”的Actionscript代碼如下:
on (release) { //當鼠標釋放時執(zhí)行以下動作 map_mc._xscale *= 1.2; //地圖的 X 軸坐標放大20% map_mc._yscale *= 1.2; //地圖的 Y 軸坐標放大20% } |
注:其中的_xscalet和_yscale是確定從影片剪輯注冊點開始應用的影片剪輯水平及垂直縮放比例 (percentage)。默認注冊點為 (0,0)。同時調整這兩個屬性的值可以達到改變地圖大小的目的。
當然,我們還可以使用以下Actionscript代碼:
on (release) { //當鼠標釋放時執(zhí)行以下動作 map_mc._width *= 1.2; //地圖的寬度放大20% map_mc._height *= 1.2; //地圖的高度放大20% } |
注:_width和_height影片剪輯的寬度和高度,單位為像素。
2、 “縮小”按鈕的Actionscript代碼如下:
on (release) { //當鼠標釋放時執(zhí)行以下動作 |
或者:
on (release) { //當鼠標釋放時執(zhí)行以下動作 |
3、“移動”的Actionscript代碼如下:
on (release) { //當鼠標釋放時執(zhí)行以下動作 function move() { //定義move()函數(shù) map_mc.onMouseUp = function () { //當鼠標左鍵釋放時 } //結束move()函數(shù)的定義 |
注:此處所調用的全局函數(shù)startDrag可以使影片剪輯在影片播放過程中拖動。一次只能拖動一個影片剪輯。執(zhí)行 startDrag() 操作后,影片剪輯將保持可拖動狀態(tài),直到用 stopDrag() 顯式停止拖動為止,或直到對其它影片剪輯調用了 startDrag() 動作為止。
4、“復位”按鈕的功能是將地圖恢復到文件開啟時的初始狀態(tài),其Actionscript代碼如下:
on (release) { //當鼠標釋放時執(zhí)行以下動作 |
注:縮放本地坐標系統(tǒng)將影響 _x 和 _y 屬性設置,這些設置是以整像素定義的。
5、“測距”按鈕的功能是測量地圖上某兩點間的距離,其Actionscript代碼如下:
on (release) { //當鼠標釋放時執(zhí)行以下動作 function measure (){ //定義measure ()函數(shù) mouseListener.onMouseMove = function() { //當鼠標移動時 mouseListener.onMouseUp = function() { //當鼠標左鍵釋放時 } }; |
注: createEmptyMovieClip方法是創(chuàng)建一個空影片剪輯作為現(xiàn)有影片剪輯的子級;
Math.sqrt 方法是計算并返回指定數(shù)字的平方根。
Math.round 方法是將參數(shù)的值向上或向下舍入為最接近的整數(shù)并返回該值。
Math.pow (x:Number, y:Number)方法是計算并返回 x 的 y 次冪。
通過以上3種方法,運用三角形的勾股定理換算出測量長度。
五、標注地名 再加上地名標注就構成了一個最基本的電子地圖框架,效果如下。
圖2 最簡單的Flash電子地圖
點擊左邊五個功能按鈕可以得到相應功能
測距時用鼠標在地圖中需要測距的起點單擊按住拖動到終點松開即可
如果只是一個小區(qū)或是小城市的地圖,比如九江電子地圖,直接在新建圖層上注標地名即可,但如果是要制作類似網(wǎng)格深圳、中國電子地圖網(wǎng)等大型城市的地圖,其標注內容太多,而且需要經(jīng)常更新,就不適合在Flash內標注,而要調用外部數(shù)據(jù)庫來完成。(責編:waye)
{{item.content}}