在Google Map的地图轨迹上添加箭头
2010-07-15 20:50
423 查看
GMarker的Icon似乎不能按角度旋转,所以这里主要是利用GroundOverlay来加载箭头图片。
(一)通过GroundOverlay的GroundOverlayOption属性,可以设置其旋转角度,因此可以通过计算轨迹上前后两点的坐标值,计算出轨迹和x轴的夹角。通过夹角,来旋转箭头图片,达到轨迹上箭头显示的目的。如下:
var options:GroundOverlayOptions = new GroundOverlayOptions(
{rotation:45,
rotationContentCenter:new Point(0,20)
});
rotationContentCenter设定图片旋转时的中心点,
rotation设定图片旋转的角度,按逆时针方向转的。
注意:画箭头图片的时候,箭头的方向要指向左下角,这样当我们设定左下角为旋转的中心点时,不论怎么旋转,箭头的头是固定的,始终为轨迹上的点。
(二)制定轨迹上一点后,计算轨迹的方向。当然了,算出角度之后,还是要判断一下的,根据角度的象限,计算箭头图片要旋转多少角度。
var dis:Number=Math.sqrt((lat2-lat1)*(lat2-lat1)+(lon2-lon1)*(lon2-lon1));//两点距离
var sinN:Number=(lat2-lat1)/dis; //正弦值
var r:Number=Math.asin(sinN); //弧度值
var digree:Number=(r*180)/Math.PI; //角度
var cosN:Number=(lon2-lon1)/dis;
var rc:Number=Math.acos(cosN);
var dc:Number=(rc*180)/Math.PI; //用余弦求出的角度
//Alert.show(digree.toString()+" "+dc.toString());
var rot:Number;
if(digree<=0)
{
if(dc>=90){
rot=180+digree+45; //第三象限
}else{
rot=50-digree; //第四象限
}
}else{
if(dc<=90){ //第一象限
if(digree<=45){
rot=45-digree; //>45度
}else{
rot=360-digree+45; //小于45度
}
}else{ //第二象限
rot=180+digree+50;
}
}
(三)GroundOverlay的设定如下:
var options:GroundOverlayOptions = new GroundOverlayOptions(
{rotation:rot,
rotationContentCenter:new Point(0,20)
});
var testLoader:Loader=new Loader();
testLoader=new Loader();
testLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{
overlay=new GroundOverlay(
testLoader,
new LatLngBounds(new LatLng(lat1,lon1),new LatLng(lat11,lon11))
)
overlay.setOptions(options);
//overlay_arr.push(overlay);
map.addOverlay(overlay);
});
var urlRequest:URLRequest=new URLRequest("arrow.png");
testLoader.load(urlRequest);
(四)本来是希望一次加载多条轨迹的箭头,Loader这个鬼东西,不知道怎么弄,循环完了,才加载一个GroundOverlay。待研究。所以暂且在点击一条轨迹的时候高亮,只显示该轨迹的方向。
(一)通过GroundOverlay的GroundOverlayOption属性,可以设置其旋转角度,因此可以通过计算轨迹上前后两点的坐标值,计算出轨迹和x轴的夹角。通过夹角,来旋转箭头图片,达到轨迹上箭头显示的目的。如下:
var options:GroundOverlayOptions = new GroundOverlayOptions(
{rotation:45,
rotationContentCenter:new Point(0,20)
});
rotationContentCenter设定图片旋转时的中心点,
rotation设定图片旋转的角度,按逆时针方向转的。
注意:画箭头图片的时候,箭头的方向要指向左下角,这样当我们设定左下角为旋转的中心点时,不论怎么旋转,箭头的头是固定的,始终为轨迹上的点。
(二)制定轨迹上一点后,计算轨迹的方向。当然了,算出角度之后,还是要判断一下的,根据角度的象限,计算箭头图片要旋转多少角度。
var dis:Number=Math.sqrt((lat2-lat1)*(lat2-lat1)+(lon2-lon1)*(lon2-lon1));//两点距离
var sinN:Number=(lat2-lat1)/dis; //正弦值
var r:Number=Math.asin(sinN); //弧度值
var digree:Number=(r*180)/Math.PI; //角度
var cosN:Number=(lon2-lon1)/dis;
var rc:Number=Math.acos(cosN);
var dc:Number=(rc*180)/Math.PI; //用余弦求出的角度
//Alert.show(digree.toString()+" "+dc.toString());
var rot:Number;
if(digree<=0)
{
if(dc>=90){
rot=180+digree+45; //第三象限
}else{
rot=50-digree; //第四象限
}
}else{
if(dc<=90){ //第一象限
if(digree<=45){
rot=45-digree; //>45度
}else{
rot=360-digree+45; //小于45度
}
}else{ //第二象限
rot=180+digree+50;
}
}
(三)GroundOverlay的设定如下:
var options:GroundOverlayOptions = new GroundOverlayOptions(
{rotation:rot,
rotationContentCenter:new Point(0,20)
});
var testLoader:Loader=new Loader();
testLoader=new Loader();
testLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{
overlay=new GroundOverlay(
testLoader,
new LatLngBounds(new LatLng(lat1,lon1),new LatLng(lat11,lon11))
)
overlay.setOptions(options);
//overlay_arr.push(overlay);
map.addOverlay(overlay);
});
var urlRequest:URLRequest=new URLRequest("arrow.png");
testLoader.load(urlRequest);
(四)本来是希望一次加载多条轨迹的箭头,Loader这个鬼东西,不知道怎么弄,循环完了,才加载一个GroundOverlay。待研究。所以暂且在点击一条轨迹的时候高亮,只显示该轨迹的方向。
相关文章推荐
- google map 地图轨迹点以画带箭头的直线连接,直观轨迹记录。
- ASP.NET(C#)项目中添加谷歌(Google Map)地图
- Android Google Map学习四(地图组件的添加)
- 基于Google提供play-services:9.8.0的Google 地图开发,适用于Activity、Fragment,并实现添加Marker和根据经纬度显示运动轨迹
- iOS使用Google Map Api创建地图-显示标注-轨迹回放
- iOS使用Google Map Api创建地图-显示标注-轨迹回放
- google map使用自定义Marker在地图上添加文字标签
- [C# WinFrom 使用 Google Map] 在地图上画轨迹线
- 三步骤实现ASP.NET(C#)项目中添加谷歌(Google Map)地图
- Google map 搜索+点击地图添加标注点 并且返回坐标
- google map使用自定义Marker在地图上添加文字标示
- google map使用自定义Marker在地图上添加文字标示
- FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示
- 如何在UITableViewCell的中添加向右箭头和箭头前的文本
- 使用JavaScript控制WebGIS电子地图中轨迹回放的速度 - window.setInterval 控制执行速度
- (MapX)在地图上根据gps坐标绘制轨迹点与轨迹线
- Arcgis javascript那些事儿(十九)——地图标注添加
- 做地图轨迹时确立经纬度是否保存的一种算法
- 微信如何添加地图导航?公众号一键导航添加方法。
- eCharts添加自定义geojson数据实现地图展示