模仿Google Maps的MapViewer

下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。

 一些细节：

1. 为什么能拖？

   com.google.gwt.user.client.ui.MouseListener 通过实现这个接口，可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。

   com.google.gwt.user.client.ui.FocusPanel 并不是每个UI对象都能够实现MouseListener接口的，可以通过添加到FocusPanel来实现。

2. 怎么才能显示地图的局部，或者说怎么把其他部分藏起来？

通过样式：

java 代码

DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");

DOM.setStyleAttribute(viewPortArea.getElement(), "position","relative");

设置显示区域的"overflow"属性为"hidden"及"position"属性为"relative"，图片可以实现局部显示显示框内。

代码：

java 代码

package cn.gov.imwb.client;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FocusPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.Widget;

/**
 * @author sheva.wen
 *
 */
public class MapViewerPanel extends Composite {
    public int areaHeight;

    public int areaWidth;

    public int centerLeft;

    public int centerTop;

    public int imageHeight;

    public String imageUrl;

    public int imageWidth;

    public int maxLeft;

    public int maxTop;

    public int minLeft;

    public int minTop;

    private Image image;

    private FocusPanel mouseListenerContainer;

    public double showPositionLeftRatio;

    public double showPositionTopRatio;

    private int startLeft;

    private int startTop;

    private int startX;

    private int startY;

    private int state = 0;//用于判断当前用户的鼠标动作

    private AbsolutePanel viewArea;

    private AbsolutePanel viewPortArea = new AbsolutePanel();

    /**
     *
     * @param areaWidth 显示区域的宽
     * @param areaHeight 显示区域的高
     * @param imageUrl 地图的链接
     * @param imageWidth 地图的宽
     * @param imageHeight 地图的高
     * @param showPositionLeftRatio 地图初始显示的位置 最左占宽度的比例
     * @param showPositionTopRatio 地图初始显示的位置 最上占宽度的比例
     */
    public MapViewerPanel(int areaWidth, int areaHeight, String imageUrl,
            int imageWidth, int imageHeight, double showPositionLeftRatio,
            double showPositionTopRatio) {
        mouseListenerContainer = new FocusPanel(viewPortArea);
        viewArea = new AbsolutePanel();
        /**
         * 将地图（图片）上的默认浏览器行为除去。
         */
        image = new Image(){
            /**
             * 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。
             */
                 public void onBrowserEvent (Event event)
                 {
                     DOM.eventPreventDefault(event);
                     super.onBrowserEvent(event);
                 }

        };
        viewArea.add(image);
        image.setPixelSize(imageWidth, imageHeight);
        image.setUrl(imageUrl);

        viewPortArea.setPixelSize(areaWidth, areaHeight);
        viewPortArea.addStyleName("viewportViewer");
        DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");

        DOM.setStyleAttribute(viewPortArea.getElement(), "position",
                        "relative");
        initWidget(mouseListenerContainer);



        this.showPositionLeftRatio = showPositionLeftRatio;
        this.showPositionTopRatio = showPositionTopRatio;
        this.areaWidth = areaWidth;
        this.areaHeight = areaHeight;
        this.imageUrl = imageUrl;
        this.imageWidth = imageWidth;
        this.imageHeight = imageHeight;

        /**
         * 设置图片可被拖放的极限，防止图片被拖出边界
         */

        maxLeft = imageWidth - areaWidth;
        maxTop = imageHeight - areaHeight;
        minLeft = -(imageWidth - areaWidth);
        minTop = -(imageHeight - areaHeight);

        /**
         * 地图初始应该在的位置
         */
        centerLeft = (int) ((areaWidth - imageWidth) * showPositionLeftRatio);
        centerTop = (int) ((areaHeight - imageHeight) * showPositionTopRatio);

        viewPortArea.add(viewArea, centerLeft, centerTop);
        /**
         * 鼠标拖放的行为
         */
        MouseListener listener = new MouseListener(){

            public void onMouseDown(Widget sender, int x, int y) {
                state = 1;
                startX = x;
                startY = y;
                startLeft = viewPortArea.getWidgetLeft(viewArea);
                startTop = viewPortArea.getWidgetTop(viewArea);

            }

            public void onMouseEnter(Widget sender) {

            }

            public void onMouseLeave(Widget sender) {
                state = 0;
                DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");
            }

            public void onMouseMove(Widget sender, int x, int y) {
                if(state == 1){
                    DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "move");
                    if(viewPortArea.getWidgetLeft(viewArea) >= minLeft
                            && viewPortArea.getWidgetLeft(viewArea) <= maxLeft
                            && viewPortArea.getWidgetTop(viewArea) >= minTop
                            && viewPortArea.getWidgetTop(viewArea) <= maxTop){
                        viewPortArea.setWidgetPosition(viewArea,startLeft + (x - startX), startTop + (y - startY));
                    }
                }
            }

            public void onMouseUp(Widget sender, int x, int y) {
                // TODO 缺报当拖放结束时，地图还在显示框内
                if(viewPortArea.getWidgetLeft(viewArea) < minLeft){
                    viewPortArea.setWidgetPosition(viewArea, minLeft, viewPortArea.getWidgetTop(viewArea));
                }
                if(viewPortArea.getWidgetTop(viewArea) < minTop){
                    viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), minTop);
                }
                if(viewPortArea.getWidgetLeft(viewArea) > 0){
                    viewPortArea.setWidgetPosition(viewArea, 0, viewPortArea.getWidgetTop(viewArea));
                }
                if(viewPortArea.getWidgetTop(viewArea) > 0){
                    viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), 0);
                }
                state = 0;
                DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");
            }

        };
        mouseListenerContainer.addMouseListener(listener);

    }

}

代码很容易理解，这只是一个很简易的实现，至少还有以下需要完善：

1. 地图分块载入
2. 支持鼠标滚轮的缩放
3. “鹰眼”功能。

感兴趣的跟进一下：)