GIS折线上添加箭头

出去公司实习学到的一些技术:

折线上添加箭头:
首先先选择某一艘船
点击详情查看它的轨迹
在这里插入图片描述

查看轨迹如下图所示

在这里插入图片描述

若想看船舶轨迹某位置详细信息,请点击此按钮 开启节点显示,然后点击下面节点,显示更多船舶节点信息

在这里插入图片描述
var imgIcon = ‘/Content/ShipContent/images/shipRed.png’;
var imgIconStrat = ‘/Content/ShipContent/images/StopShip.png’;
var myIcon = new BMap.Icon(imgIcon, new BMap.Size(45, 45));
var myIconStrat = new BMap.Icon(imgIconStrat, new BMap.Size(45, 45));
var marker = new BMap.Marker(new BMap.Point(data[0].Gps_Lon, data[0].Gps_Lat));
marker.tag = 1;
marker.setLabel(labelStrat);
marker.setIcon(myIconStrat);
marker.setRotation(data[0].TrueCourse);//设置角度
map.addOverlay(marker);
var marker1 = new BMap.Marker(new BMap.Point(data[data.length - 1].Gps_Lon, data[data.length - 1].Gps_Lat));
marker1.tag = 1;
marker1.setLabel(labelEnd);
marker1.setIcon(myIcon);
marker1.setRotation(data[data.length - 1].TrueCourse);//设置角度

                                map.addOverlay(marker1);

                                for (var o = 0; o < data.length; o++) {
                                    pois.push(new BMap.Point(data[o].Gps_Lon, data[o].Gps_Lat));
                                }
                                var polyline = new BMap.Polyline(pois, {
                                    enableEditing: false,//是否启用线编辑,默认为false
                                    enableClicking: true,//是否响应点击事件,默认为true
                                    icons: [iconSequence],
                                    strokeWeight: '8',//折线的宽度,以像素为单位
                                    strokeOpacity: 0.8,//折线的透明度,取值范围0 - 1
                                    strokeColor: "#18a45b" //折线颜色
                                });
                                polyline.tag = 1;
                                polyline.chenluliang = 1;
                                map.addOverlay(polyline);          //增加折线
                                var myIcon = new BMap.Icon("/Content/ShipContent/images/shipRi.png", new BMap.Size(17, 17));

猜你喜欢

转载自blog.csdn.net/qq_44547571/article/details/86546635
GIS
今日推荐