syw19970227 2019-03-23 01:14 采纳率: 0%
浏览 3941
已结题

使用高德JS API绘制多轨迹调用pathSimplifierIns.setdata出现两条连接在一起的情况,如何解决

毕业设计相关,使用高德JS API绘制多轨迹,但是出现了第一条轨迹和第二条轨迹相连的情况。非常的不解,图片说明

后端使用的是flask,数据为从mysql里读取,在后端已经将其处理为了JSON.

@app.route("/getmultitrack/<code>",methods=["GET"])
def getmultitrack(code):
    print(code)
    db = pymysql.connect(host="localhost",
                         port=29260,
                         user="root",
                         passwd="admin",
                         db="grad")

    cursor = db.cursor()
    res = []
    flag = 1
    datas = []
    while flag <= int(code):
        sql = "select lontitude,latitude from track where track_id=%s order by time_stamp ASC"

        cursor.execute(sql, [flag])


        i = 0
        while i < cursor.rowcount:
            res.append(cursor.fetchone())
            i = i + 1

        tmp = []

        for v in res:
            l = []
            l.append(round(float(str(v[0])), 6))
            l.append(round(float(str(v[1])), 6))
            # l.append(v[0])
            # l.append(v[1])
            tmp.append(l)

        data = {"name": str(flag), "path": tmp} #将其转为能被setdata读入的格式
        datas.append(data)
        flag = flag + 1

    print(code)
    print("diaoyoongmulti")
    return jsonify(datas)

前端使用AJAX进行接收

    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [108.93297,34.27802],
        zoom: 20
    });

        AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {

if (!PathSimplifier.supportCanvas) {
    alert('当前环境不支持 Canvas!');
    return;
}

//启动页面
initPage(PathSimplifier);
});

function initPage(PathSimplifier) {
//创建组件实例
    var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        map: map, //所属的地图实例
        getPath: function(pathData, pathIndex) {
        //返回轨迹数据中的节点坐标信息,[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
        return pathData.path;
         },
        getHoverTitle: function(pathData, pathIndex, pointIndex) {
        //返回鼠标悬停时显示的信息
        if (pointIndex >= 0) {
            //鼠标悬停在某个轨迹节点上
            return pathData.name + ',点:' + pointIndex + '/' + pathData.path.length;
        }
        //鼠标悬停在节点之间的连线上
        return pathData.name + ',点数量' + pathData.path.length;
    },
    renderOptions: {
        //轨迹线的样式
        pathLineStyle: {
            strokeStyle: 'red',
            lineWidth: 6,
            dirArrowStyle: true
            }
        }
    });

            code=2;
            var myArr = [];


            function init()
            {

                $.ajax({
                    url: "/getmultitrack/" + code,
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                    pathSimplifierIns.setData(data);
                    }
                })

            };
            $(document).ready(function(){
            init();
        }); 
        };
    </script>

点均可成功画出,单条轨迹也可完全无误的画出。就是两条轨迹间会有第一条轨迹的尾端和第二条轨迹头部相连的情况。
在高德的网上找了demo中的数据

pathSimplifierIns.setData([{
        name: '轨迹0',
        path: [
            [100.340417, 27.376994],
            [108.426354, 37.827452],
            [113.392174, 31.208439],
            [124.905846, 42.232876]
        ]
    }, {
        name: '大地线',
        //创建一条包括500个插值点的大地线
        path: PathSimplifier.getGeodesicPath([116.405289, 39.904987], [87.61792, 43.793308], 500)
    }]);

直接放进本人代码中调用的pathSimplifierIns.setdata可以不连接的进行显示,我但是我的数据就会导致连接。

  • 写回答

1条回答

  • dabocaiqq 2019-03-23 11:30
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记