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

飞机标签实现与避让

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

飞机标签实现

效果

思路

• 三个元素图标、线、标签。标签可拖动。图标为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); //当前圆心坐标  currentDargxyaircraftInfoArr.forEach((aircraftInfoI) => {
let rect2 = getInitViewxy(aircraftInfoI, aircraftInfoI.dargxy);//aircraftInfoIDargxyif (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);
}

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