模仿Google Maps的MapViewer

纯情小火鸡

浏览: 13825 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7)

社区版块

存档分类

Google GWT UI 浏览器 UP

<div class="quote_title">sheva.wen 写道</div><div class="quote_div">下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。 一些细节：<ol style="margin-right: 0px"><li>为什么能拖？ <a href="http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.ui.MouseListener.html">com.google.gwt.user.client.ui.MouseListener</a> 通过实现这个接口，可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。<a href="http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.ui.FocusPanel.html">com.google.gwt.user.client.ui.FocusPanel</a> 并不是每个UI对象都能够实现MouseListener接口的，可以通过添加到FocusPanel来实现。</li><li>怎么才能显示地图的局部，或者说怎么把其他部分藏起来？ </li></ol><blockquote dir="ltr" style="margin-right: 0px">通过样式：<div class="code_title">java 代码</div><div class="dp-highlighter"><ol class="dp-j"><li class="alt">DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");    </li><li>   </li><li class="alt">DOM.setStyleAttribute(viewPortArea.getElement(), "position","relative");   </li></ol></div>设置显示区域的"overflow"属性为"hidden"及"position"属性为"relative"，图片可以实现局部显示显示框内。</blockquote>代码：<blockquote dir="ltr" style="margin-right: 0px"><div class="code_title">java 代码</div><div class="dp-highlighter"><ol class="dp-j"><li class="alt">package cn.gov.imwb.client;    </li><li>   </li><li class="alt">import com.google.gwt.user.client.DOM;    </li><li>import com.google.gwt.user.client.Event;    </li><li class="alt">import com.google.gwt.user.client.ui.AbsolutePanel;    </li><li>import com.google.gwt.user.client.ui.Composite;    </li><li class="alt">import com.google.gwt.user.client.ui.FocusPanel;    </li><li>import com.google.gwt.user.client.ui.Image;    </li><li class="alt">import com.google.gwt.user.client.ui.MouseListener;    </li><li>import com.google.gwt.user.client.ui.Widget;    </li><li class="alt">   </li><li>/**   </li><li class="alt"> * @author sheva.wen   </li><li> *   </li><li class="alt"> */   </li><li>public class MapViewerPanel extends Composite {    </li><li class="alt">    public int areaHeight;    </li><li>   </li><li class="alt">    public int areaWidth;    </li><li>   </li><li class="alt">    public int centerLeft;    </li><li>   </li><li class="alt">    public int centerTop;    </li><li>   </li><li class="alt">    public int imageHeight;    </li><li>   </li><li class="alt">    public String imageUrl;    </li><li>   </li><li class="alt">    public int imageWidth;    </li><li>   </li><li class="alt">    public int maxLeft;    </li><li>   </li><li class="alt">    public int maxTop;    </li><li>   </li><li class="alt">    public int minLeft;    </li><li>   </li><li class="alt">    public int minTop;    </li><li>   </li><li class="alt">    private Image image;    </li><li>   </li><li class="alt">    private FocusPanel mouseListenerContainer;    </li><li>   </li><li class="alt">    public double showPositionLeftRatio;    </li><li>   </li><li class="alt">    public double showPositionTopRatio;    </li><li>   </li><li class="alt">    private int startLeft;    </li><li>   </li><li class="alt">    private int startTop;    </li><li>   </li><li class="alt">    private int startX;    </li><li>   </li><li class="alt">    private int startY;    </li><li>   </li><li class="alt">    private int state = 0;//用于判断当前用户的鼠标动作    </li><li>   </li><li class="alt">    private AbsolutePanel viewArea;    </li><li>   </li><li class="alt">    private AbsolutePanel viewPortArea = new AbsolutePanel();    </li><li>   </li><li class="alt">    /**   </li><li>     *    </li><li class="alt">     * @param areaWidth 显示区域的宽   </li><li>     * @param areaHeight 显示区域的高   </li><li class="alt">     * @param imageUrl 地图的链接   </li><li>     * @param imageWidth 地图的宽   </li><li class="alt">     * @param imageHeight 地图的高   </li><li>     * @param showPositionLeftRatio 地图初始显示的位置 最左占宽度的比例   </li><li class="alt">     * @param showPositionTopRatio 地图初始显示的位置 最上占宽度的比例   </li><li>     */   </li><li class="alt">    public MapViewerPanel(int areaWidth, int areaHeight, String imageUrl,    </li><li>            int imageWidth, int imageHeight, double showPositionLeftRatio,    </li><li class="alt">            double showPositionTopRatio) {    </li><li>        mouseListenerContainer = new FocusPanel(viewPortArea);    </li><li class="alt">        viewArea = new AbsolutePanel();    </li><li>        /**   </li><li class="alt">         * 将地图（图片）上的默认浏览器行为除去。   </li><li>         */   </li><li class="alt">        image = new Image(){    </li><li>            /**   </li><li class="alt">             * 这个部分必须紧跟在实例化过程的后面，不然就不起作用，没有在官方文档里找到原因。   </li><li>             */   </li><li class="alt">                 public void onBrowserEvent (Event event)    </li><li>                 {    </li><li class="alt">                     DOM.eventPreventDefault(event);    </li><li>                     super.onBrowserEvent(event);    </li><li class="alt">                 }    </li><li>   </li><li class="alt">        };    </li><li>        viewArea.add(image);    </li><li class="alt">        image.setPixelSize(imageWidth, imageHeight);    </li><li>        image.setUrl(imageUrl);    </li><li class="alt">   </li><li>        viewPortArea.setPixelSize(areaWidth, areaHeight);    </li><li class="alt">        viewPortArea.addStyleName("viewportViewer");    </li><li>        DOM.setStyleAttribute(viewPortArea.getElement(), "overflow", "hidden");    </li><li class="alt">   </li><li>        DOM.setStyleAttribute(viewPortArea.getElement(), "position",    </li><li class="alt">                        "relative");    </li><li>        initWidget(mouseListenerContainer);    </li><li class="alt">            </li><li>            </li><li class="alt">            </li><li>        this.showPositionLeftRatio = showPositionLeftRatio;    </li><li class="alt">        this.showPositionTopRatio = showPositionTopRatio;    </li><li>        this.areaWidth = areaWidth;    </li><li class="alt">        this.areaHeight = areaHeight;    </li><li>        this.imageUrl = imageUrl;    </li><li class="alt">        this.imageWidth = imageWidth;    </li><li>        this.imageHeight = imageHeight;    </li><li class="alt">            </li><li>        /**   </li><li class="alt">         * 设置图片可被拖放的极限，防止图片被拖出边界   </li><li>         */   </li><li class="alt">            </li><li>        maxLeft = imageWidth - areaWidth;    </li><li class="alt">        maxTop = imageHeight - areaHeight;    </li><li>        minLeft = -(imageWidth - areaWidth);    </li><li class="alt">        minTop = -(imageHeight - areaHeight);    </li><li>            </li><li class="alt">        /**   </li><li>         * 地图初始应该在的位置   </li><li class="alt">         */   </li><li>        centerLeft = (int) ((areaWidth - imageWidth) * showPositionLeftRatio);    </li><li class="alt">        centerTop = (int) ((areaHeight - imageHeight) * showPositionTopRatio);    </li><li>            </li><li class="alt">        viewPortArea.add(viewArea, centerLeft, centerTop);    </li><li>        /**   </li><li class="alt">         * 鼠标拖放的行为   </li><li>         */   </li><li class="alt">        MouseListener listener = new MouseListener(){    </li><li>   </li><li class="alt">            public void onMouseDown(Widget sender, int x, int y) {    </li><li>                state = 1;    </li><li class="alt">                startX = x;    </li><li>                startY = y;    </li><li class="alt">                startLeft = viewPortArea.getWidgetLeft(viewArea);    </li><li>                startTop = viewPortArea.getWidgetTop(viewArea);    </li><li class="alt">                    </li><li>            }    </li><li class="alt">   </li><li>            public void onMouseEnter(Widget sender) {    </li><li class="alt">                    </li><li>            }    </li><li class="alt">   </li><li>            public void onMouseLeave(Widget sender) {    </li><li class="alt">                state = 0;    </li><li>                DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");    </li><li class="alt">            }    </li><li>   </li><li class="alt">            public void onMouseMove(Widget sender, int x, int y) {    </li><li>                if(state == 1){    </li><li class="alt">                    DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "move");    </li><li>                    if(viewPortArea.getWidgetLeft(viewArea) >= minLeft    </li><li class="alt">                            && viewPortArea.getWidgetLeft(viewArea) <= maxLeft    </li><li>                            && viewPortArea.getWidgetTop(viewArea) >= minTop    </li><li class="alt">                            && viewPortArea.getWidgetTop(viewArea) <= maxTop){    </li><li>                        viewPortArea.setWidgetPosition(viewArea,startLeft + (x - startX), startTop + (y - startY));    </li><li class="alt">                    }    </li><li>                }    </li><li class="alt">            }    </li><li>   </li><li class="alt">            public void onMouseUp(Widget sender, int x, int y) {    </li><li>                // TODO 缺报当拖放结束时，地图还在显示框内    </li><li class="alt">                if(viewPortArea.getWidgetLeft(viewArea) < minLeft){    </li><li>                    viewPortArea.setWidgetPosition(viewArea, minLeft, viewPortArea.getWidgetTop(viewArea));    </li><li class="alt">                }    </li><li>                if(viewPortArea.getWidgetTop(viewArea) < minTop){    </li><li class="alt">                    viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), minTop);    </li><li>                }    </li><li class="alt">                if(viewPortArea.getWidgetLeft(viewArea) > 0){    </li><li>                    viewPortArea.setWidgetPosition(viewArea, 0, viewPortArea.getWidgetTop(viewArea));    </li><li class="alt">                }    </li><li>                if(viewPortArea.getWidgetTop(viewArea) > 0){    </li><li class="alt">                    viewPortArea.setWidgetPosition(viewArea, viewPortArea.getWidgetLeft(viewArea), 0);    </li><li>                }    </li><li class="alt">                state = 0;    </li><li>                DOM.setStyleAttribute(mouseListenerContainer.getElement(), "cursor", "default");    </li><li class="alt">            }    </li><li>                </li><li class="alt">        };    </li><li>        mouseListenerContainer.addMouseListener(listener);    </li><li class="alt">   </li><li>    }    </li><li class="alt">   </li><li>}    </li></ol></div>代码很容易理解，这只是一个很简易的实现，至少还有以下需要完善：<ol><li>地图分块载入 </li><li>支持鼠标滚轮的缩放 </li><li>“鹰眼”功能。 </li></ol>感兴趣的跟进一下：)</blockquote></div>

0
顶

2
踩

分享到：

GWT做地图

2008-01-30 11:02
浏览 1569
评论(0)
分类:企业架构
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论