________ถ้ากำลังมองหา web application สำหรับแสดงผลแผนที่ดีๆ ประเภท Flash Client วันนี้ผมมีมานำเสนอหนึ่งตัวครับ เป็น้องใหม่ที่เปิดตัวแรงชื่อว่า Open scales ปัจจุบันออกมาถึงเวอร์ชั่น 1.1 เป็น Web mapping Framework ที่รองรับการพัฒนาบนภาษา ActionScript 3 และ Flex ผมเองไม่ถนัดทาง Flash แต่ผมชอบ Openscale ตรงที่ว่ามี OpenScales API ที่ง่ายต่อการนำไปใช้ เดี่ยวนี้ผมเองเริ่มๆดูๆพวก Flex หรือ Action Script บ้างทั้งที่ยอมรับว่าแต่ก่อนนี้มาตลอด จนมาเมื่อช่วงที่ต้องพัฒนา StreetView App หนีไม่พ้นที่จะต้องใช้ความสามารถของ Flash ในการแสดงผลเลยต้องมาแกะอยู่ แต่สำหรับท่านที่จะเริ่มใหม่ ผมว่า OpenScales ไม่เลวยิ่งถ้าอยากทำ Streetview โชวภาพ panorama รายละเอียดสูง เทคโนโลยีประเภทนี้ค่อนข้างเหมาะสมครับ ทั้งด้านความสวยงามและความหยืดหยุ่นในการแสดงผล โดยเฉพาะส่วนของ interactive

________OpenScales 1.1 ออกมาด้วยความสามารถและฟีเจอร์ต่างๆมากมาย เช่นรองรับการทำงานกับ KML, GML สนับสนุน WMS-C , WFS , on the fly projection , OSM และอื่นๆ มากมายเลยทีเดียว ยังไม่พอเท่านั้น OpenScales รองรับบน platform แบบต่างๆอีก เช่น

– Mobile (ActionScript 3) : ทดสอบบน Flash 10.1 player รันบน Palm Pre

– Web (Flex) : OpenScales 1.1 ทดสอบบน Flash 9 และ Flash 10 players สนับสนุนการทำงานบน Windows, Mac และ Linux

– Desktop (AIR) : desktop mapping application บน AIR ทดสอบการเปิดข้อมูล shapfile

เท่านี้ก็ cool แล้วใช่ไหมครับ เข้าไปดาวน์โหลด sourcecode และโปรแกรมมาทดลองใช้ได้ที่ http://openscales.org/ นอกจากนี้ยังมี doc และตัวอย่าง code ในการพัฒนาเช่นที่ผมนำมาให้ดูเป็นการเพิ่มข้อมูล KML เข้าไปใน Open scale

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns="*"
         xmlns:mx="http://www.adobe.com/2006/mxml"
         xmlns:os="http://openscales.org"
         creationComplete="initMap();">

    <os:Map id="fxmap"
            width="100%"
            height="100%"
            zoom="11"
            centerLonLat="2.338345,48.871692">

        <os:TraceInfo id="traceInfo"
                      x="{width-200}"
                      y="0"
                      visible="{displayTrace}"/>

        <os:Mapnik name="Mapnik"
                   isBaseLayer="true"
                   proxy="http://openscales.org/proxy.php?url="/>

        <os:KML url="http://www.parisavelo.net/velib.kml"
                proxy="http://openscales.org/proxy.php?url="
                numZoomLevels="20"
                style="{Style.getDefaultCircleStyle()}"/>

        <os:DragHandler/>
        <os:WheelHandler/>

        <os:Spinner id="spinner"
                    x="{width / 2}"
                    y="{height / 2}"/>
        <os:MousePosition x="10"
                          y="{height-20}"
                          displayProjection="EPSG:4326"/>

    </os:Map>

    <os:ControlPanel x="10"
                     y="10"
                     width="140"
                     title="Navigation">
        <os:PanComponent map="{map}"/>
        <mx:HBox width="100%">
            <os:ZoomComponent map="{map}"/>
            <mx:VBox width="100%"
                     horizontalAlign="right"
                     verticalAlign="top">
                <os:ZoomBoxComponent map="{map}"
                                     width="32"
                                     height="32"/>
            </mx:VBox>
        </mx:HBox>
    </os:ControlPanel>

    <mx:Script>
        <![CDATA[
            import org.openscales.core.popup.Anchored;
            import org.openscales.core.popup.Popup;
            import org.openscales.core.events.FeatureEvent;
            import org.openscales.core.events.MapEvent;
            import org.openscales.core.Map;
            import org.openscales.core.Trace;
            import org.openscales.core.style.Style;

            private var popup:Anchored;

            [Bindable] private var map:Map = null;
            [Bindable] public var displayTrace:Boolean = false;    
            [Bindable] public var displayFirebugTrace:Boolean = false;

            private function initMap():void {
                Trace.useFireBugConsole = displayFirebugTrace;
                map = fxmap.map;

                map.addEventListener(FeatureEvent.FEATURE_CLICK, onFeatureClick);
            }

            private function onFeatureClick(event:FeatureEvent):void {
                if(popup) {
                    popup.destroy();
                }
                popup = null;
                popup = new Anchored();
                popup.feature = event.feature;
                map.addPopup(popup, true);
            }
        ]]>
    </mx:Script>

</mx:Canvas>