地图上标签实现与避让算法

飞机标签实现与避让

• 地图可视化标签与避让实现记录。

飞机标签实现

效果

思路

• 三个元素图标、线、标签。标签可拖动。图标为Marker ,线为Polyline，标签为文字可以用自定义Marker。自定义Marker设置拖动事件。
• 初始化Marker与自定义Marker之间矢量距离dargxy，例：{x:100,y:100}，拿到Marker点的页面坐标，加上dargxy为自定义Marker页面坐标。页面坐标通过api转为经纬度。设置拖动事件通过api更改经纬度即可实现拖动。

实现

三者都为地图元素。因为标签可拖动，用地图内置api最省事。实现简单代码不粘。

标签避让算法

效果

思路

标签避让思路：

• 随机一个以R为半径，以飞机图标页面位置为圆心的圆上的点坐标，此坐标为Marker与自定义Marker之间矢量距离即dargxy。
• 自定义Marker页面坐标碰撞检测，如碰撞重新随机生成更新dargxy值。（循环360次）如全碰撞则2R、3R、4R…为半径随机生成更新dargxy值。直到不碰撞为止（谨慎判断防止无限循环，因为页面总有被占满时候）。
• 每次创建标牌时，与之前创建的所有标牌检测。即避让算法执行时机为每次创建标牌时。（避让只执行一次）。
• 算法耗时会阻塞页面，如大量标牌把算法放在异步，（先设置标牌初始值，等计算完成更新位置）。我放到web Worker里。

实现

Worker.js

var dargxy = {};
var allAircraftInfoArr = []
    /**
     * 随机标牌位置
     * @params N
     */
const initDargxy = function(N = 2.5) {

    let a = (2 * Math.PI) * Math.random(); //角度
    const R = 50 * N; //半径

    let x = Math.round(R * Math.cos(a) - 0);
    let y = Math.round(R * Math.sin(a) - 0);


    return { x, y }
}

/**
 * 标牌避让循环方法
 * @params R , aircraftInfoArr, num, aircraftInfo
 */

function serializeDargxy({ W, H, num, allAircraftInfoArr, aircraftInfo }) {
    let aircraftInfoArr = [];
    allAircraftInfoArr.forEach((i) => {
        //所有飞机
        if (aircraftInfo.icao == i.icao) {
            //自身
            return;
        }

        aircraftInfoArr.push(i);
    });


    let flag = false;

    for (let i = 0; i < 360; i++) {
        let flagU = 0;
        dargxy.x = initDargxy(num).x;
        dargxy.y = initDargxy(num).y;

let rect1 = getInitViewxy(aircraftInfo, dargxy); //当前圆心坐标  currentDargxy
 aircraftInfoArr.forEach((aircraftInfoI) => {
let rect2 = getInitViewxy(aircraftInfoI, aircraftInfoI.dargxy);//aircraftInfoIDargxy
            if (rect1.x < rect2.x + W &&
                rect1.x + W > rect2.x &&
                rect1.y < rect2.y + H &&
                H + rect1.y > rect2.y) {
                flag = false;
            } else {
                flagU++
            }

        })

        if (aircraftInfoArr.length == 0) {
            flag = true;
            break
        }

        //都没有碰撞终止，有一次碰撞就进入下一次循环。
        if (flagU == aircraftInfoArr.length) {
            flag = true;
            break
        }

    }


    return flag;
}


/**
 * 标牌避让
 * @params aircraftInfos
 */
const dargxyCollision = function(allAircraftInfoArr, aircraftInfo) {

    let W = 110; //宽
    let H = 46; //高

    let flag;
    for (let index = 0; index < 10; index++) {
        flag = serializeDargxy({ W, H, num: 2.5, allAircraftInfoArr, aircraftInfo });
        if (flag) {
            break
        }
    }


    if (!flag) { //全碰撞
        for (let index = 0; index < 10; index++) {
            flag = serializeDargxy({ W, H, num: 4, allAircraftInfoArr, aircraftInfo });
            if (flag) {
                break
            }
        }
    }
    if (!flag) { //全碰撞
        for (let index = 0; index < 10; index++) {
            flag = serializeDargxy({ W, H, num: 6, allAircraftInfoArr, aircraftInfo });
            if (flag) {
                break
            }
        }
    }
    if (!flag) { //全碰撞
        for (let index = 0; index < 10; index++) {
            flag = serializeDargxy({ W, H, num: 7, allAircraftInfoArr, aircraftInfo });
            if (flag) {
                break
            }
        }
    }


    aircraftInfo.dargxy.x = dargxy.x;
    aircraftInfo.dargxy.y = dargxy.y;
}


/**
 * 转换
 * @param aircraftInfo
 **/

const getInitViewxy = function(aircraftInfo, xy) {

    var v = { x: aircraftInfo.pixel.x + xy.x, y: aircraftInfo.pixel.y + xy.y }; //标牌避让的像素点在这里

    return v;
};


onmessage = (message) => {

    let { aircraftInfo } = message.data;
    //通过判断flag 判断是否避让或更新aircraftInfo的dargxy。用于拖动后更新aircraftInfo的dargxy值。
    allAircraftInfoArr.push(aircraftInfo)
    dargxyCollision(allAircraftInfoArr, aircraftInfo);
    postMessage(aircraftInfo);
}

时间原因没有好好完善，代码写的一般。另外如果好的避让实现思路，还请大佬们多多指教。