地图标注随地图旋转而旋转

停车场地图添加停车位编号随地图旋转而旋转功能

现在移动互联网上的交互性很强,要求地图也要360度旋转。但是地图在360度旋转的时候就会出现一个问题,那就是地图选择180度的时候,地图上面的文字也旋转180度,这个时候字就是倒过来的,虽然从逻辑上来讲是正确的,但是从人的角度讲,我把地图旋转180度难道就要让我歪着头去看上面的文字吗?这是肯定不行的嘛。

对于这个问题我们有两个解决方案:
* 标注文字不旋转
就是任凭你如何旋转地图,我地图上面的标注始终保持不动状态。这个解决方案很简单。但是使用这种方式需要满足一个前提,就是:地图的标注对对地图区域没有要求。例如在大区域的要素上面添加的标注就可以使用这种方式处理。对小区域要素会出现什么问题呢?我们以停车场地图中的停车位及停车位标注为例来说明。停车场地图中的车位是一个矩形要素,面积很小。他的车位编号标注要求文字不能超出矩形区域且尽可能大的显示,也就是要求文字要沿着矩形框的长度方向进行书写。如果地图旋转标注不转肯定会出现问题。
* 标注文字对地图旋转而旋转
这个标注文字随地图选择而旋转不是机械的沿着他选择。我们对文字旋转角度做一个数学分析,会发现文字旋转方向在[90,270]这个范围之内文字是倒置的,因此只需要在文字选择角度在这个区域范围之内时对他做一个简单的数学处理就可以满足要求了。处理逻辑也很简单,就是旋转角度在[90,270]这个区间范围之内让他多选择180度就可以。

//获取旋转角度
var rotation = (feature.get('rotation')*1+newRotation*1)%6.2831852;
if(rotation >= 1.5707963 &&  rotation <= 4.7123889){
  rotation = (rotation + 3.1415926)%6.2831852;
}

地图正北方向
地图正北方向

机械旋转地图效果
机械旋转

添加数学处理之后的旋转效果
添加数学处理之后的旋转

猜你喜欢

转载自blog.csdn.net/longshengguoji/article/details/53607065