krpano·分组图片地图插件

基础知识

该插件应用了scrollarea插件和radar插件.应用scrollarea插件是为了拖动图片超出区域时自动弹回,不至于拖拽时那么生硬 应用radar插件则是保持活动热点区域的扇形与场景保持一致

完整代码

<krpano>
<!-- qmaplayer设置 -->
    <maplayer name="qmaplayer_container">
        <map_group name="qmap_group_1" url="%SWFPATH%/mapimg/map.jpg" map_min_zoom="0.5" map_max_zoom="1.2" zoom="1" current="true" text="一楼" btn_x="0">
            <spot name="qmap_spot_1" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="600" lng="300" heading="90" scene="scene_2___TBS___"/>
            <spot name="qmap_spot_2" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="476" lng="487" heading="0" scene="scene_2___TBS___"/>
            <spot name="qmap_spot_3" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="671" lng="429" heading="0" scene="scene_2___TBS___"/>
        </map_group>
        <map_group name="qmap_group_2" url="%SWFPATH%/mapimg/map_1.jpg" map_min_zoom="0.5" map_max_zoom="1.2" zoom="1" current="false" text="二楼" btn_x="55">
            <spot name="qmap_spot_4" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="135" lng="742" heading="0" scene="scene_2___TBS___"/>
            <spot name="qmap_spot_5" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="153" lng="519" heading="0" scene="scene_2___TBS___"/>
            <spot name="qmap_spot_6" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="200" lng="423" heading="0" scene="scene_2___TBS___"/>
            <spot name="qmap_spot_7" style="qmap_spot_style" textstyle="qmap_spot_text_style" prefix="" suffix="" lat="150" lng="681" heading="0" scene="scene_2___TBS___"/>
        </map_group>
    </maplayer>

<!-- 皮肤相关(包括外层容器、按钮) -->
    <style name="qmap_container_style" parent="stage" bgcolor="0x2b3c4e" bgalpha="0.5" align="rightbottom" edge="rightbottom" x="0" width="300" height="326" maskchildren="true" bgcapture="true" keep="true" />
    
    <style name="qmap_container_btn_circle" zorder="1" bgroundedge="50" keep="true" type="container" align="leftbottom" x="10" y="10" width="40" height="40" bgcolor="0x22798b" bgalpha="0.5" bgcapture="true" onover="qmap_container_btn_circle_over" onout="qmap_container_btn_circle_out" />
    <style name="qmap_container_btn_circle_text" type="text" keep="true" background="false" css="font-family:Arial; font-size:30px; color:#FFFFFF;" align="center" vcenter="center" />
    <style name="qmap_container_btn_floor" parent="qmap_container" keep="true" zorder="1" bgroundedge="0" type="container" align="lefttop" x="0" y="0" width="50" height="26" bgcolor="0x22798b" bgalpha="0.5" bgcapture="true" maskchildren="false" />
    <style name="qmap_container_btn_floor_text" type="text" keep="true" background="false" css="font-family:Arial; font-size:18px; color:#FFFFFF;" align="center" vcenter="center" />

    <style name="qmap_radar_style" align="center" edge="center" x="0" y="-10" scale="1.0" heading="0.0" headingoffset="0.0" fillcolor="0xffc900" fillalpha="0.5" linecolor="0xffc900" linewidth="0.1" linealpha="0.5" invert="false" editmode="false" keep="true" ondown="qmap_area_map_spot_down" onup="qmap_area_map_spot_up" />

    <style name="qmap_spot_active_style" url="%SWFPATH%/mapimg/radar-active.png" align="lefttop" edge="lefttop" scale="1.0" keep="true" onclick="qmap_area_map_spot_click" />
    <style name="qmap_spot_style" url="%SWFPATH%/mapimg/radar-out.png" align="lefttop" edge="lefttop" scale="1.0" keep="true" onclick="qmap_area_map_spot_click" />

    <!-- 核心代码,布局 -->
    <area mode="border" top="1" right="300" bottom="1" left="1" />
    <layer name="qmap_container" style="qmap_container_style" type="container" maskchildren="true" bgcapture="true" onover="qmap_container_over" onout="qmap_container_out" onloaded="qmap_container_loaded">
        <!-- 缩放按钮 -->
        <layer name="qmap_container_btn_in_outer" style="qmap_container_btn_circle">
            <layer name="qmap_container_btn_in" style="qmap_container_btn_circle_text" html="[span class='zutitls zutitls-jia']" ondown="qmap_area_map_btn_zoom(0.03)"/>
        </layer>
        <layer name="qmap_container_btn_out_outer" style="qmap_container_btn_circle" x="60">
            <layer name="qmap_container_btn_out" style="qmap_container_btn_circle_text" html="[span class='zutitls zutitls-jian']" ondown="qmap_area_map_btn_zoom(-0.03)"/>
        </layer>

        <!-- 分组按钮 -->
        <!-- <layer name="qmap_container_btn_floor1_outer" style="qmap_container_btn_floor">
            <layer name="qmap_container_btn_floor1" style="qmap_container_btn_floor_text" html="一楼" onclick="qmap_container_btn_floor_click(qmap_group_1)"/>
        </layer>
        <layer name="qmap_container_btn_floor2_outer" style="qmap_container_btn_floor" x="55">
            <layer name="qmap_container_btn_floor2" style="qmap_container_btn_floor_text" html="二楼" onclick="qmap_container_btn_floor_click(qmap_group_2)"/>
        </layer> -->
    </layer>

<!-- 最外层容器事件 -->
    <action name="qmap_container_over">
        <!-- 标记缩放为真,当前分组背景已在加载分组背景时设置,记录场景滚轮缩放值,并且改变为false -->
		set(qmap_iszoom, true); 
        set(qmap_current_group_map, get(qmap_current_group_map_image));
        copy(qmap_copy_control_mousefovchange,   control.mousefovchange);
        copy(qmap_copy_control_touchzoom,        control.touchzoom);
		set(control.mousefovchange, 0); 
		set(control.touchzoom,      false); 
    </action>
    <action name="qmap_container_out">
        <!-- 标记缩放为否,置空当前分组背景,恢复场景滚轮缩放 -->
        set(qmap_iszoom, false);
        set(qmap_current_group_map, null);
        set(control.mousefovchange, get(qmap_copy_control_mousefovchange));
        set(control.touchzoom,      get(qmap_copy_control_touchzoom));
    </action>
    <action name="qmap_container_loaded">
        <!-- 局部变量 -->
        copy(map_group_copy, maplayer[0].map_group);
        set(qmap_area_container, get(maplayer[0].name));
        set(qmap_area_url, "%SWFPATH%/mapimg/scrollarea.js");
        if(device.flash, set(qmap_area_url, "%SWFPATH%/mapimg/scrollarea.swf"););
        
        set(qmap_area_prefix, 'qmap_scrollarea_');
        set(qmap_area_map_prefix, 'qmap_scrollarea_map_');
        
        <!-- 添加滚动区域容器 -->
        addlayer(get(qmap_area_container));
        set(layer[get(qmap_area_container)].type,     container);
        set(layer[get(qmap_area_container)].align,    lefttop);
        set(layer[get(qmap_area_container)].edge,     lefttop);
        set(layer[get(qmap_area_container)].oy,       26);
        set(layer[get(qmap_area_container)].width,    get(width));
        set(layer[get(qmap_area_container)].height,   calc(height - 26));
        set(layer[get(qmap_area_container)].parent,   get(name));
        set(layer[get(qmap_area_container)].keep,     true);

        <!-- 读取qmaplayer数组,设置分组map,热点,及设置当前活动热点为中心 -->
        for(set(i,0), i LT map_group_copy.count, inc(i),
            copy(map_group_copy_i, map_group_copy[get(i)]);
            <!-- 添加滚动区域 -->
            txtadd(qmap_area, get(qmap_area_prefix), get(map_group_copy[get(i)].name));
            addlayer(get(qmap_area));
            set(layer[get(qmap_area)].url,      get(qmap_area_url));
            set(layer[get(qmap_area)].align,    center);
            set(layer[get(qmap_area)].edge,     center);
            set(layer[get(qmap_area)].width,    get(width));
            set(layer[get(qmap_area)].height,   get(height));
            set(layer[get(qmap_area)].mwheel,   false);
            set(layer[get(qmap_area)].parent,   get(qmap_area_container));
            set(layer[get(qmap_area)].keep,     true);
            set(layer[get(qmap_area)].visible,  get(map_group_copy_i.current));

            <!-- 添加map图片层 -->
            txtadd(qmap_area_map, get(qmap_area_map_prefix), get(map_group_copy_i.name));
            set(qmap_area_map_url, get(map_group_copy_i.url));
            addlayer(get(qmap_area_map));
            set(layer[get(qmap_area_map)].url,      get(qmap_area_map_url));
            set(layer[get(qmap_area_map)].scale,    1.0);
            set(layer[get(qmap_area_map)].x,        0);
            set(layer[get(qmap_area_map)].y,        0);
            set(layer[get(qmap_area_map)].align,    lefttop);
            set(layer[get(qmap_area_map)].edge,     lefttop);
            set(layer[get(qmap_area_map)].parent,   get(qmap_area));
            set(layer[get(qmap_area_map)].keep,     true);
            set(layer[get(qmap_area_map)].scalechildren,    true);
            set(layer[get(qmap_area_map)].onloaded,         qmap_area_map_loaded);

            <!-- 添加分组按钮 -->
            qmap_area_map_loaded_loadbutton(map_group_copy_i);
        );
    </action>
    <action name="qmap_area_map_loaded_loadspot">
        <!-- 局部变量 -->
        set(qmap_area_map_loaded_loadspot_m_parent_name, %1);
        set(qmap_area_map_loaded_loadspot_m_radar_url, "%SWFPATH%/mapimg/radar.js");
        if(device.flash, set(qmap_area_map_loaded_loadspot_m_radar_url, "%SWFPATH%/mapimg/radar.swf"));

        <!-- set(qmap_area_map_prefix, 'qmap_scrollarea_map_'); -->
        set(map_group_name, %1);
        txtreplace(map_group_name, get(qmap_area_map_prefix), '');
        copy(map_group_spots, maplayer[0].map_group[get(map_group_name)].spot);
        
        set(qmap_area_map_radar_prefix, 'qmap_scrollarea_map_radar_');
        txtadd(qmap_area_map_loaded_loadspot_m_radar_name, get(qmap_area_map_radar_prefix), get(map_group_name));

        <!-- 添加radar雷达插件 -->
        addplugin(get(qmap_area_map_loaded_loadspot_m_radar_name));
        set(plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].url,    get(qmap_area_map_loaded_loadspot_m_radar_url));
        plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].loadstyle(qmap_radar_style);

        for(set(i,0), i LT map_group_spots.count, inc(i),
            copy(spot_i, map_group_spots[get(i)]);
            set(qmap_area_map_spot_prefix, 'qmap_scrollarea_map_spot_');
            txtadd(qmap_area_map_loaded_loadspot_m_name, get(qmap_area_map_spot_prefix), get(spot_i.name));

            addlayer(get(qmap_area_map_loaded_loadspot_m_name));
            set(layer[get(qmap_area_map_loaded_loadspot_m_name)].x, get(spot_i.lat));
            set(layer[get(qmap_area_map_loaded_loadspot_m_name)].parent, get(qmap_area_map_loaded_loadspot_m_parent_name));
            set(layer[get(qmap_area_map_loaded_loadspot_m_name)].x, get(spot_i.lat));
            set(layer[get(qmap_area_map_loaded_loadspot_m_name)].y, get(spot_i.lng));
            set(layer[get(qmap_area_map_loaded_loadspot_m_name)].heading, get(spot_i.heading));
            layer[get(qmap_area_map_loaded_loadspot_m_name)].loadstyle(qmap_spot_style);

            if(i === 0,
                layer[get(qmap_area_map_loaded_loadspot_m_name)].loadstyle(qmap_spot_active_style);
                set(plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].parent, get(qmap_area_map_loaded_loadspot_m_name));
                
                <!-- 设置当前热点,使用scrollarea层是否显示做判断 -->
                <!-- if(layer[get(layer[get(qmap_area_map_loaded_loadspot_m_parent_name)].parent)].visible, -->
                    set(layer[get(qmap_area_map_loaded_loadspot_m_parent_name)].current_spot,   get(qmap_area_map_loaded_loadspot_m_name));
                    set(layer[get(qmap_area_map_loaded_loadspot_m_parent_name)].current_radar,  get(qmap_area_map_loaded_loadspot_m_radar_name));
                    set(plugin[get(qmap_area_map_loaded_loadspot_m_radar_name)].heading, get(spot_i.heading));
                <!-- ); -->
            );
        );
        
        <!-- 移除局部变量 -->
        delete(qmap_area_map_loaded_loadspot_m_parent_name, qmap_area_map_loaded_loadspot_m_name, qmap_area_map_loaded_loadspot_m_radar_name, qmap_area_map_loaded_loadspot_m_radar_url);
    </action>
    <action name="qmap_area_map_loaded_loadbutton">
        <!-- 根据分组添加按钮 -->
        set(qmap_container_btn_prefix, 'qmap_container_btn_');
        set(qmap_container_btn_suffix, '_outer');
        set(qmap_container_btn_group,  get(%1.name));
        txtadd(qmap_container_btn_name, get(qmap_container_btn_prefix), get(qmap_container_btn_group));
        txtadd(qmap_container_btn_outer_name, get(qmap_container_btn_name), get(qmap_container_btn_suffix));
        txtadd(qmap_container_btn_click, 'qmap_container_btn_floor_click(', get(qmap_container_btn_group), ');');

        <!-- 添加外层背景 -->
        addlayer(get(qmap_container_btn_outer_name));
        layer[get(qmap_container_btn_outer_name)].loadstyle(qmap_container_btn_floor);
        set(layer[get(qmap_container_btn_outer_name)].x, get(%1.btn_x));
        if(%1.current, 
            set(layer[get(qmap_container_btn_outer_name)].bgalpha, 1.0);
            set(layer[get(layer[get(qmap_container_btn_outer_name)].parent)].current_btn, get(qmap_container_btn_outer_name));
        );

        <!-- 添加内层文字 -->
        addlayer(get(qmap_container_btn_name));
        layer[get(qmap_container_btn_name)].loadstyle(qmap_container_btn_floor_text);
        set(layer[get(qmap_container_btn_name)].parent, get(qmap_container_btn_outer_name));
        set(layer[get(qmap_container_btn_name)].html, get(%1.text));
        set(layer[get(qmap_container_btn_name)].onclick, get(qmap_container_btn_click));
    </action>
    <action name="qmap_area_map_spot_down">
        <!-- 设置scrollarea层不可拖动,防止拖拽雷达插件时背景图片跟着被拖动 -->
        copy(qmap_area_map_spot_down_m_spot, layer[get(layer[get(name)].parent)]);
        copy(qmap_area_map_spot_down_m_map,  layer[get(qmap_area_map_spot_down_m_spot.parent)]);
        copy(qmap_area_map_spot_down_m_area, layer[get(qmap_area_map_spot_down_m_map.parent)]);
        set(qmap_area_map_spot_down_m_area.draggable, false);
    </action>
    <action name="qmap_area_map_spot_up">
        <!-- 设置scrollarea层不可拖动,防止拖拽雷达插件时背景图片跟着被拖动 -->
        copy(qmap_area_map_spot_down_m_spot, layer[get(layer[get(name)].parent)]);
        copy(qmap_area_map_spot_down_m_map,  layer[get(qmap_area_map_spot_down_m_spot.parent)]);
        copy(qmap_area_map_spot_down_m_area, layer[get(qmap_area_map_spot_down_m_map.parent)]);
        set(qmap_area_map_spot_down_m_area.draggable, true);
    </action>
    <action name="qmap_area_map_spot_click">
        <!-- 点击热点切换场景,需判断是否为当前热点,避免重复渲染 -->
        if(name !== layer[get(layer[get(name)].parent)].current_spot,       
            layer[get(layer[get(layer[get(name)].parent)].current_spot)].loadstyle(qmap_spot_style);
            layer[get(name)].loadstyle(qmap_spot_active_style);
            set(layer[get(layer[get(name)].parent)].current_spot, get(name));
            
            set(plugin[get(layer[get(layer[get(name)].parent)].current_radar)].parent,  get(name));
            set(plugin[get(layer[get(layer[get(name)].parent)].current_radar)].heading, get(heading));
            loadscene(scene_2___TBS___);
        );
    </action>

<!-- 分组背景图片事件 -->
    <action name="qmap_area_map_loaded">
        <!-- 局部变量 -->
        copy(qmap_area_map_m_area,          layer[get(layer[get(name)].parent)]);
        copy(qmap_area_map_m_conatainer,    layer[get(qmap_area_map_m_area.parent)]);

        set(qmap_area_map_m_area.width, get(width));
        set(qmap_area_map_m_area.height, get(height));

        <!-- 求取设置最小缩放级别,确保背景图片至少有一个维度(高or宽)等于容器相同维度(高or宽) -->
        div(qmap_area_map_m_ratio_w, get(qmap_area_map_m_conatainer.width),     get(qmap_area_map_m_area.width));
        div(qmap_area_map_m_ratio_h, get(qmap_area_map_m_conatainer.height),    get(qmap_area_map_m_area.height));
        def(qmap_area_map_loaded_m_max_zoom, number, 1);
        set(layer[get(name)].map_max_zoom, get(qmap_area_map_loaded_m_max_zoom));
        set(layer[get(name)].map_min_zoom, get(qmap_area_map_m_ratio_w));
        if(qmap_area_map_m_ratio_w GE qmap_area_map_m_ratio_h, set(layer[get(name)].map_min_zoom, get(qmap_area_map_m_ratio_h)) );

        <!-- 记录当前显示分组name -->
        if(layer[get(layer[get(name)].parent)].visible, set(qmap_current_group_map_image, get(name)));

        <!-- 添加当前背景热点 -->
        qmap_area_map_loaded_loadspot(get(name));
    </action>

<!-- 背景缩放事件 -->
    <!-- 此事件有限制：不能使用在area区域外层 -->
    <events name="qmap_area_map_zoom_events" keep="true" onmousewheel="qmap_area_map_mousewheel();" />
    <action name="qmap_area_map_mousewheel">
        <!-- 针对鼠标滚轮缩放的事件,后期可扩展加上触屏缩放的处理 -->
        if(qmap_iszoom, 
            <!-- 局部变量 -->
            copy(qmap_area_map_mousewheel_m_self, layer[get(qmap_current_group_map)]);
            copy(qmap_area_map_mousewheel_m_area, layer[get(qmap_area_map_mousewheel_m_self.parent)]);

            mul(qmap_area_map_mousewheel_m_speed, get(wheeldelta), 0.03); 
            mul(qmap_area_map_mousewheel_m_speed, qmap_area_map_mousewheel_m_self.scale); 
            add(qmap_area_map_mousewheel_m_self.scale, qmap_area_map_mousewheel_m_speed); 
            add(qmap_area_map_mousewheel_m_area.scale, qmap_area_map_mousewheel_m_speed);
            if(qmap_area_map_mousewheel_m_self.scale GE qmap_area_map_mousewheel_m_self.map_max_zoom,
                set(qmap_area_map_mousewheel_m_self.scale, get(qmap_area_map_mousewheel_m_self.map_max_zoom));
                set(qmap_area_map_mousewheel_m_area.scale, get(qmap_area_map_mousewheel_m_self.map_max_zoom));
            );
            if(qmap_area_map_mousewheel_m_self.scale LE qmap_area_map_mousewheel_m_self.map_min_zoom,
                set(qmap_area_map_mousewheel_m_self.scale, get(qmap_area_map_mousewheel_m_self.map_min_zoom));
                set(qmap_area_map_mousewheel_m_area.scale, get(qmap_area_map_mousewheel_m_self.map_min_zoom));
            );
        );
    </action>
    <action name="qmap_area_map_btn_zoom">
        <!-- 这里检测当前分组map是否为null,并赋值 -->
        set(qmap_current_group_map, get(qmap_current_group_map_image));
        asyncloop(pressed, qmap_area_map_auto_zoom(%1));
    </action>
    <action name="qmap_area_map_auto_zoom">
        <!-- 局部变量 -->
        copy(qmap_area_map_auto_zoom_m_self, layer[get(qmap_current_group_map)]);
        copy(qmap_area_map_auto_zoom_m_area, layer[get(qmap_area_map_auto_zoom_m_self.parent)]);
        set(qmap_area_map_auto_zoom_m_speed, %1);
        mul(qmap_area_map_auto_zoom_m_speed, qmap_area_map_auto_zoom_m_self.scale);
        
        add(qmap_area_map_auto_zoom_m_self.scale, get(qmap_area_map_auto_zoom_m_speed)); 
        add(qmap_area_map_auto_zoom_m_area.scale, get(qmap_area_map_auto_zoom_m_speed));

        if(qmap_area_map_auto_zoom_m_self.scale GE qmap_area_map_auto_zoom_m_self.map_max_zoom,
            set(qmap_area_map_auto_zoom_m_self.scale, get(qmap_area_map_auto_zoom_m_self.map_max_zoom));
            set(qmap_area_map_auto_zoom_m_area.scale, get(qmap_area_map_auto_zoom_m_self.map_max_zoom));
        );
        if(qmap_area_map_auto_zoom_m_self.scale LE qmap_area_map_auto_zoom_m_self.map_min_zoom,
            set(qmap_area_map_auto_zoom_m_self.scale, get(qmap_area_map_auto_zoom_m_self.map_min_zoom));
            set(qmap_area_map_auto_zoom_m_area.scale, get(qmap_area_map_auto_zoom_m_self.map_min_zoom));
        );
    </action>

<!-- 缩放按钮特效事件 -->
    <action name="qmap_container_btn_circle_over">
        set(bgshadow,'5 0 5 0x000000 0.5');
    </action>
    <action name="qmap_container_btn_circle_out">
        set(bgshadow,'10 10 10 0x000000 0');
    </action>
<!-- 分组按钮事件 -->
    <action name="qmap_container_btn_floor_click">
        txtadd(qmap_scrollarea_arg, get(qmap_area_prefix), %1);
        set(qmap_scrollarea_current, get(layer[get(qmap_current_group_map_image)].parent));
        txtadd(qmap_scrollarea_arg_map, get(qmap_area_map_prefix), %1);
        txtadd(qmap_scrollarea_arg_btn_outer_name, get(qmap_container_btn_prefix), %1, get(qmap_container_btn_suffix));

        if(qmap_scrollarea_arg !== qmap_scrollarea_current,
            set(layer[get(qmap_scrollarea_current)].visible,    false);
            set(layer[get(qmap_scrollarea_arg)].visible,        true);
            set(qmap_current_group_map_image, get(qmap_scrollarea_arg_map));

            <!-- 按钮切换效果 -->
            set(layer[get(qmap_scrollarea_arg_btn_outer_name)].bgalpha, 1);
            set(layer[get(layer[get(layer[get(qmap_scrollarea_arg_btn_outer_name)].parent)].current_btn)].bgalpha, 0.5);
            set(layer[get(layer[get(qmap_scrollarea_arg_btn_outer_name)].parent)].current_btn, get(qmap_scrollarea_arg_btn_outer_name));
        );
    </action>

<!-- 放大按钮事件 -->
    <action name="ssds">
        set(layer[qmap_container].width,  '80%');
        set(layer[qmap_container].height, '80%');
        set(layer[qmap_container].align,  'center');
        set(layer[qmap_container].edge,   'center');

    </action>
</krpano>