使用鼠标控制地图

Tangram使用两种方式来控制地图:

  1. 使用Gesture API
  2. 使用Camera API

因为现在是在PC上控制, 因此使用了Camera API, 基本原理就是根据鼠标动作换算出camera变化量, 然后更新camera。

主要代码如下

Zoom在mouse wheelEvent里实现:

namespace Tangram {
class Map {
public:
    // Set the fractional zoom level of the view; if duration (in seconds) is provided,
    // zoom eases to the set value over the duration; calling either version of the setter
    // overrides all previous calls
    void setZoom(float _z);
    // Get the fractional zoom level of the view
    float getZoom();
};

void MapWidget::wheelEvent(QWheelEvent *event) {
    float zoom = m_map->getZoom();
    if(event->delta() > 0){
        zoom += 0.5;
    }else{
        zoom -= 0.5;
    }

    if (zoom > Max_Zoom_Level) {
        zoom = Max_Zoom_Level;
    }
    if (zoom < Min_Zoom_Level) {
        zoom = Min_Zoom_Level;
    }

    m_map->setZoom(zoom);
    update();
}
}

Rotate, Tilt和Pan在mouseMoveEvent里实现:

namespace Tangram {
class Map {
public:
    // Set the counter-clockwise rotation of the view in radians; 0 corresponds to
    // North pointing up; if duration (in seconds) is provided, rotation eases to the
    // the set value over the duration; calling either version of the setter overrides
    // all previous calls
    void setRotation(float _radians);
    // Get the counter-clockwise rotation of the view in radians; 0 corresponds to
    // North pointing up
    float getRotation();
    // Set the tilt angle of the view in radians; 0 corresponds to straight down;
    // if duration (in seconds) is provided, tilt eases to the set value over the
    // duration; calling either version of the setter overrides all previous calls
    void setTilt(float _radians);
    void setTiltEased(float _radians, float _duration, EaseType _e = EaseType::quint);
    // Get the tilt angle of the view in radians; 0 corresponds to straight down
    float getTilt();
};

static float getTilt(QPoint p0, QPoint p1) {
    return p1.y() - p0.x();
}

static float getRotation(QPoint p0, QPoint p1, QPoint center) {
    return QLineF(p1, center).angle() - QLineF(p0, center).angle();
}

void MapWidget::mouseMoveEvent(QMouseEvent *event) {
    auto pos = event->pos();
    if (m_gestureInprogress) {
        switch(m_gestureType) {
        case GESTURE_TAP:
            break;
        case GESTURE_PAN: {
            m_map->handlePanGesture(m_gestureStartPoint.x(), m_gestureStartPoint.y(), pos.x(), pos.y());
            m_gestureStartPoint = pos;
        }
        break;
        case GESTURE_SHOVE:{
            float currentTilt = toDegree(m_map->getTilt());
            float newTilt =  currentTilt + (pos.y() - m_gesturePreviousPoint.y());
            if(newTilt>60){
               newTilt = 60;
            } else if(newTilt<0) {
                newTilt = 0;
            }
            m_map->setTilt(toRadians(newTilt));
        }
        break;
        case GESTURE_ROTATE:{
            float currentRotation = m_map->getRotation();
            m_map->setRotation(currentRotation +
                               toRadians(getRotation(pos, m_gesturePreviousPoint, rect().center())));
        }
        break;
        default:
            break;
        }
    }
    m_gesturePreviousPoint = pos;
    update();
}
}

项目代码:

时间: 2024-10-25 04:46:44

使用鼠标控制地图的相关文章

Unity3D鼠标控制角色移动

一直都有一颗文学逗比的心,很中二和玛丽苏的想写那种龙傲天的小说.所以这个寒假就非常想敲出个RPG游戏来抒发心中的这份狂热.一开始是想用Three.js来做,后来转用Unity3D来做了,毕竟相对简单一点.好多东西不用自己去写,也可以避免心中这份狂热不至于还没把基础框架搭建好就降为0度了. 角色移动的例子 控制角色移动,对于PC端而言就是键盘或者鼠标.其中键盘控制角色移动的是经典的fps游戏中wasd四个方向按键.而鼠标控制角色移动一般常见于MMORPG.我比较倾向于MMORPG风格控制角色移动,

THREE.js代码备份——线框cube、按键、鼠标控制

<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - geometry - cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

jquery版相片墙(鼠标控制图片聚合和散开)

原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激动,哇!怎么可以这么牛!我制作出来的没那边炫,但是还是制作出来了,算是对我的一种激励!希望能有碰到问题就要解决它的精神,即使不是现在但会是不久的将来! 一.演示效果 散开状态: 聚合状态: 二.html代码 <div class="box&

Openlayers 2 取消鼠标缩放地图的功能

需要实现的功能: 取消鼠标缩放地图,即滚动鼠标的滚轮地图没有响应事件,只能用鼠标平移地图 版本:OpenLayers 2.13.1 测试代码直接用官方例子http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/osm.html 直接上代码 原始代码: var map, layer; function init(){ map = new OpenLayers.Map( 'map'); layer = new OpenLayers.

使用anyremote进行远程鼠标控制

下载服务端的命令 apt-get install anyremote 下载服务端软件 官网的使用说明 http://anyremote.sourceforge.net/use.html 客户端的使用命令 anyremote -f /...path_to.../xmms.cfg -s peer[,peer ...] 我们要进行鼠标控制,所以就使用 anyremote  -f /usr/share/anyremote/cfg-data/Server-mode/mouse.cfg -s socket:

用电脑键盘鼠标控制安卓手机或平板的应用——DeskDock

如果你同时使用多台电脑,可能早已听过Synergy.Input Director.无界鼠标等神奇的工具了,它们可以让你只使用一套键鼠即可控制操作多台不同电脑,让鼠标自由"穿梭"不同屏幕,非常方便. 不过上述软件都只能支持Win.Mac.Linux 等桌面系统,然而今天的主角DeskDock则可以让你使用电脑的鼠标键盘来控制 Android 安卓手机或平板!对于想借助安卓设备实现双屏工作提高效率的,或者经常要与 Android 平台的 APP 打交道的朋友来说可能非常实用,键鼠操作也更加

基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统)

转自网络:http://blog.csdn.net/zouxy09/article/details/17913745 基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) [email protected] http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无知,倍感吃力.当年惶恐,从而盲从.挣扎了不少时日,感觉自己好像还是处于领域的门外汉一样,在理论与实践的鸿沟中无法挣脱,心里空落落的.在这种挥之不去的烦忧中,某个时候豁然开朗,觉

[Python Study Notes]实现对鼠标控制

''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' >>文件: 鼠标控制.py >>作者: liu yang >>邮箱: [email protected] >>博客: www.cnblogs.com/liu66blog ''''''''''''''''''''''''''''''''''''''''''''''

JS/jquery实现鼠标控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. mouseout和mouseleave 这里需要特别注意mouseout与mouseleave的区别.我们通过下面代码示例来看一下: <p style="color:#333333;font-family:-apple-system, " font-size:16px;&qu