下面要写的东西是一个使用GWT编写的在有限区域内通过拖动查看整个地图的简单实现。
一些细节:
- 为什么能拖?
com.google.gwt.user.client.ui.MouseListener 通过实现这个接口,可以实现UI对象对鼠标的Enter,Down,Leave,Move,Up动作的支持。
com.google.gwt.user.client.ui.FocusPanel 并不是每个UI对象都能够实现MouseListener接口的,可以通过添加到FocusPanel来实现。
- 怎么才能显示地图的局部,或者说怎么把其他部分藏起来?
通过样式:
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);
- }
- }
代码很容易理解,这只是一个很简易的实现,至少还有以下需要完善:
- 地图分块载入
- 支持鼠标滚轮的缩放
- “鹰眼”功能。
感兴趣的跟进一下:)