syw19970227
syw19970227
2019-03-23 01:14

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

20
  • json
  • ajax
  • javascript

毕业设计相关,使用高德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条回答

为你推荐