室内导航简单应用方案【Dijkstra+zrender】

Posted on 2019-12-31 11:05 shihuc 阅读(1906) 评论(0) 编辑收藏举报

简单的室内导航，就是在没有传感器或者说外部硬件设施辅助（WIFI或者蓝牙组网点整）的情况下，基于相对位置实现。

思路很简单，在室内地图上，将能走的路上关键点（能够产生分叉的路口）上打点，然后将能走通的点间，用线连接起来（这个线就是相邻两个点之间的路径，路径的长度由打出来的点的坐标，依据勾股定理计算出来），这样，就可以构建出一个限定地图（楼层）范围内的路线网络，这个打点连线的过程，就有点类似百度地图或者高德地图之类的，绘制地图中的道路的过程，只是我这里，相对来说，比较简单而已，但是，核心的思想其实大同小异。即：导航前，必须有一个地图，关键就是有一个路线网络。

接下来，当有人需要用导航的时候，就需要选择自己在那个门口，然后选择自己要去那个地方，这套方案就可以给选定出一个最短路线。后台计算最短路径的算法，就是基于dijkstra算法，思路简单清晰。

也就是说，这里的室内简单导航方案，主要是前端绘图，然后，后端基于客户请求，算出最短路径所经过的点，将这些点以及边的信息，告知前端，前端绘制出这个最短的路径，用户就可以基于自己所在的起点，沿着这个路线，找到自己所要去的目的地。这里之所以说是个简单的方案，原因在于，用户离开起点后，在行进的过程中，失去了自己当前所在位置信息，即没有了参考。当然，结合硬件设备，即可将用户实时的位置信息反映到地图上，就解决了实时位置参考信息。

前端的打点和绘图工作，主要依据zrender.js这个插件实现（是个非常不错的绘图工具），后台数据处理，主要基于springboot+mysql完成。

这里不做过多的介绍，直接上代码：

1. 前端HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DijMap</title>
</head>
<style>
#container{
    height: 700px;
    border: 3px dashed #ccc;
    margin: 0 auto;
}
#clearBtn, span{
    margin-left: 12px;
}
</style>
<body>
<h1>找最短路径游戏</h1>
<span>前端技术参考资料：https://ecomfe.github.io/zrender-doc/public/api.html</span><br/>
<span style="color: #44bb99;">说明：1）左键单击创建节点，左键按下拖动到终点实现划线；2）右键单击删除节点/边；3）选择起点/终点状态后，中键选择起点/终点</span><br/>
<button id="clearBtn">清除所有点</button>
<label><input name="demo" type="radio" value="st"/>选起点</label>
<label><input name="demo" type="radio" value="ed"/>选终点</label>
<button id="nearest">开始游戏</button>
<button id="restgame">重新游戏</button>
<div id="container"></div>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/zrender.min.js"></script>
<script src="../js/inner-map.js"></script>
</body>
</html>

2.前端inner-map.js

function setPanel() {
    var width = $(document.body).width();
    var height = $(document.body).height();
    $('#container').height(height - 100);
    $('#container').width(width - 30);
    $('canvas').attr("height",height - 100);
    $('canvas').attr("width", width - 30);
}
function savePoint(zr, pos, cycle) {
    $.post("./point/save", pos, function(data){
        cycle.pointId = data.info;
        pos.id = data.info;
        createText(zr, pos);
        savePointToLocal(pos.id, {"x": pos.pointx, "y":pos.pointy});
    }, "json");
}
function getAllPoints(zr) {
    $.get("./point/getAll", function(data){
        var jp = data;
        for(var i=0; i<jp.length; i++){
            console.log("id: " + jp[i].id + ", x: " + jp[i].pointx + ", y: " + jp[i].pointy);
            createPoint(zr, jp[i]);
            createText(zr, jp[i]);
            savePointToLocal(jp[i].id, {"x": jp[i].pointx, "y":jp[i].pointy})
        }
    }, "json");
}
function getPaths(zr, src, dst) {
    $.get("./go", {"srcId": src, "dstId": dst}, function(data){
        var jp = data;
        for(var i=0; i<jp.length; i++){
            console.log("id: " + jp[i].id + ", x: " + jp[i].pointx + ", y: " + jp[i].pointy);
        }
        showPath(zr, jp);
    }, "json");
}
function showPath(zr, jp) {
    //jp的长度一定是大于等于2的，否则不可能行程一条路径
    if(jp.length <= 1){
        console.log("不是一个合法的路径");
        return;
    }
    for(var i = 0; i<jp.length-1; i++){
        var fp = jp[i];
        var tp = jp[i+1];
        var path = new zrender.Line({
            shape: {
                x1:fp.pointx,
                y1:fp.pointy,
                x2:tp.pointx,
                y2:tp.pointy
            },
            style: {
                stroke:'green',
                lineWidth: 3
            }
        });
        zr.add(path);
        showedPath.push(path);
    }
}
function savePointToLocal(idx, pos) {
    var spos = JSON.stringify(pos);
    sessionStorage.setItem(idx, spos);
}
function getPointFromLocal(idx) {
    var res = sessionStorage.getItem(idx);
    var pos = JSON.parse(res);
    return pos;
}
function saveEdge(line) {
    if(line.len <= 10){
        console.log("距离太近，不予考虑...");
        return;
    }
    $.post("./edge/save", {"from":line.from, "to": line.to, "len": line.len}, function(data){
        line.lineId = data.info;
    }, "json");
}
function getAllEdges(zr) {
    $.get("./edge/getAll", function(data){
        var je = data;
        for(var i=0; i<je.length; i++){
            console.log("id: " + je[i].id + ", point: " + je[i].point + ", neighbor: " + je[i].neighbor + ", weight: " + je[i].weight);
            createEdge(zr, je[i]);
        }
    }, "json");
}
function delPoint(zr, circle) {
    $.post("./point/del", {"id":circle.pointId}, function(data){
        zr.remove(circle);
        zr.remove(textMap[circle.pointId]);
        for(var i = 0; i<data.length; i++){
            var edgeId = data[i];
            var dline = edgeMap[edgeId];
            zr.remove(dline);
            delete(edgeMap[edgeId])
        }
    }, "json");
}
function delEdge(zr, line) {
    $.post("./edge/del", {"id":line.lineId}, function(data){
        zr.remove(line);
        delete(edgeMap[line.lineId]);
    }, "json");
}
function createEdge(zr, je) {
    var fp = je.point;
    var tp = je.neighbor;
    fpoint = getPointFromLocal(fp);
    tpoint = getPointFromLocal(tp);
    var line = new zrender.Line({
        shape: {
            x1:fpoint.x,
            y1:fpoint.y,
            x2:tpoint.x,
            y2:tpoint.y
        },
        style: {
            stroke:'black'
        }
    }).on("mousedown", function(ev){
        if(ev.which == 3) { //右键
            delEdge(zr, line);
        }
    });
    line.from = fp;
    line.to = tp;
    line.len = je.weight;
    line.lineId = je.id;
    zr.add(line);
    edgeMap[je.id] = line;
}
function calcLen(fpoint, tpoint) {
    var xx = (fpoint.x - tpoint.x) * (fpoint.x - tpoint.x);
    var yy = (fpoint.y - tpoint.y) * (fpoint.y - tpoint.y);
    var edge = Math.sqrt(xx + yy);
    return Math.round(edge);
}
var fpoint = {"x":0, "y":0};
var tpoint = {"x":0, "y":0};
var fcycle = null;
var srcId = null;
var dstId = null;
var step = null;
var edgeMap = {};
var textMap = {};
var showedPath = [];
function createPoint(zr, pos) {
    var circle = new zrender.Circle({
        shape: {
            cx: 0,
            cy: 0,
            r: 10
        },
        position: [
            pos.pointx,
            pos.pointy
        ],
        style: {
            stroke: 'green',
            fill: 'red'
        }
    }).on('mouseover', function(){
        this.animateTo({
           shape: {
               r: 20
           },
           style: {
               stroke: 'green',
               fill: 'blue'
           }
        }, 300)
    }).on('mouseout', function() {
        this.animateTo({
            shape: {
                r: 10
            },
            style: {
                stroke: 'green',
                fill: 'red'
            }
        }, 300)
    }).on("mousedown", function(ev){
        if(ev.which == 1){ //左键
            fpoint = {"id": circle.pointId, "x": pos.pointx, "y": pos.pointy};
        }else if(ev.which == 3){//右轮
            delPoint(zr, circle);
        }else if(ev.which == 2){//中键
             //var step = $('input:radio:checked').val();
             if(step === 'st'){
                srcId = circle.pointId;
             }
             if(step === 'ed'){
                dstId = circle.pointId;
             }
             console.log("step: " + step + ", src: " + srcId + ", dst: " + dstId);
         }
    }).on("mouseup", function(ev){
        if(ev.which == 1){ //左键
            tpoint = {"id": circle.pointId, "x": pos.pointx, "y": pos.pointy};
            var line = new zrender.Line({
                shape: {
                    x1:fpoint.x,
                    y1:fpoint.y,
                    x2:tpoint.x,
                    y2:tpoint.y
                },
                style: {
                    stroke:'black'
                }
            }).on("mousedown", function(ev){
                if(ev.which == 3){ //左键
                    delEdge(zr, line);
                }
            });
            var len = calcLen(fpoint, tpoint);
            line.from = fpoint.id;
            line.to = tpoint.id;
            line.len = len;
            saveEdge(line);
            zr.add(line);
            edgeMap[line.lineId] = line;
        }else if(ev.which == 3){//右轮

        }
    })
    if(pos.id != null && pos.id != undefined){
        circle.pointId = pos.id;
    }
    zr.add(circle);
    return circle;
}
function createText(zr, pos) {
    var posText = new zrender.Text({
        style: {
            stroke: 'blue',
            text: "[" + pos.id + "] (" + pos.pointx + "," + pos.pointy + ")",
            fontSize: '11',
            textAlign:'center'
        },
        position: [pos.pointx, pos.pointy + 13]
    });
    zr.add(posText);
    textMap[pos.id] = posText;
}

$(document).ready(function() {            
    document.oncontextmenu = function(){
    　　return false;
    }

    var container = document.getElementById('container');
    var zr = zrender.init(container);
    
    setPanel();
    //注意，一定是先加载点，然后再加载边
    getAllPoints(zr);
    getAllEdges(zr);
    zr.on('click', function(e) {
        var pos = {"id": 0, "pointx": e.offsetX, "pointy": e.offsetY};
        var point = createPoint(zr, pos)
        savePoint(zr, pos, point);
    })
    //删除所有的节点
    $('#clearBtn').on('click', function(e) {
        zr.clear()
    })
    //选择起点和终点
    $("input[type=radio]").on("click", function(){
        step = $('input:radio:checked').val();
    });
    //开始绘制最短路径
    $('#nearest').on('click', function(e) {
        getPaths(zr, srcId, dstId);
    });
    //删除生成的最短路径，将上次的起始和结束点复位
    $('#restgame').on('click', function(e) {
        var len = showedPath.length;
        for(var i=0; i<len; i++){
            zr.remove(showedPath[i]);
        }
        showedPath.splice(0, len);
        srcId = null;
        dstId = null;
    })
});

3. Dijkstra最短路径

package com.shihuc.up.nav.path.util;

import org.springframework.data.mongodb.core.aggregation.ArrayOperators;

import java.util.List;
import java.util.Queue;
import java.util.Stack;

/**
 * @Author: chengsh05
 * @Date: 2019/12/9 10:25
 */
public class DJMatrix {

    private static int INF = Integer.MAX_VALUE;

    public static void dijkstra(int vs, int mMatrix[][], int[] prev, int[] dist) {
        // flag[i]=true表示"顶点vs"到"顶点i"的最短路径已成功获取
        boolean[] flag = new boolean[mMatrix.length];

        // 初始化
        for (int i = 0; i < mMatrix.length; i++) {
            // 顶点i的最短路径还没获取到。
            flag[i] = false;
            // 顶点i的前驱顶点为0,此数组的价值在于计算出最终具体路径信息。
            prev[i] = 0;
            // 顶点i的最短路径为"顶点vs"到"顶点i"的权。
            dist[i] = mMatrix[vs][i];
        }

        // 对"顶点vs"自身进行初始化
        flag[vs] = true;
        dist[vs] = 0;

        // 遍历所有顶点；每次找出一个顶点的最短路径。
        int k=0;
        for (int i = 1; i < mMatrix.length; i++) {
            // 寻找当前最小的路径， 即，在未获取最短路径的顶点中，找到离vs最近的顶点(k)。
            int min = INF;
            for (int j = 0; j < mMatrix.length; j++) {
                if (flag[j]==false && dist[j]<min) {
                    min = dist[j];
                    k = j;
                }
            }
            // 标记"顶点k"为已经获取到最短路径
            flag[k] = true;

            // 修正当前最短路径和前驱顶点
            // 即，当已经求出"顶点k的最短路径"之后，更新"未获取最短路径的顶点的最短路径和前驱顶点"。
            for (int j = 0; j < mMatrix.length; j++) {
                int tmp = (mMatrix[k][j]==INF ? INF : (min + mMatrix[k][j]));
                if (flag[j]==false && (tmp<dist[j]) ) {
                    dist[j] = tmp;
                    prev[j] = k;
                }
            }
        }
    }

    public static String calcPath(int vs, int ve, int prev[], Stack<Integer> pathOut) {
        String path = "" + ve;
        pathOut.push(ve);
        int vep = prev[ve];
        while (vep != 0 && vs != vep) {
            path = vep + "->" + path;
            pathOut.push(vep);
            vep = prev[vep];
        }
        pathOut.push(vs);
        return vs + "->" + path;
    }

    public static void main(String []args) {
        int stops[][] = new int [][] {
                {0,   12,INF,INF,INF,16,14},
                {12,   0,10,INF,INF, 7,INF},
                {INF, 10, 0, 3, 5, 6,INF},
                {INF,INF, 3, 0, 4,INF,INF},
                {INF,INF, 5, 4, 0, 2, 8},
                {16,   7, 6, INF, 2, 0, 9},
                {14, INF,INF,INF, 8, 9, 0}
        };

        int vs = 0;
        int prev[] = new int[stops.length];
        int dist[] = new int[stops.length];
        dijkstra(vs, stops, prev, dist);
    }
}

4. 数据库表结构

A.点表（记录的是关键分叉路口的位置，是像素点坐标）

CREATE TABLE `dij_point` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pointx` int(11) NOT NULL COMMENT '点的X坐标',
  `pointy` int(11) NOT NULL COMMENT '点的Y坐标',
  PRIMARY KEY (`id`),
  UNIQUE KEY `POINT_XY_IDX` (`pointx`,`pointy`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4;

B.边表（记录可以通行的两点之间的边，边代表路径，是无方向的，边的长度用两个点之间的像素距离表示）

CREATE TABLE `dij_edge` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `point` int(11) NOT NULL COMMENT 'point表的主键ID',
  `neighbor` int(11) NOT NULL COMMENT '指定点的邻居节点在point表的主键ID',
  `weight` int(11) NOT NULL COMMENT '边的权重，这里主要是像素距离',
  PRIMARY KEY (`id`),
  UNIQUE KEY `POINT_NEIG_IDX` (`point`,`neighbor`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;