あなたの知らない先端アルゴリズムの文字は避けます.

本論文の著者:TalkingData可視化技師李鳳禄
編集:アルスン
inMapはcanvasに基づく大きなデータ可視化ライブラリであり、大きなデータ方向の点線面の可視化効果の展示に注力している.現在は散点、囲い、熱力、グリッド、重合などの方式に対応しています.大きなデータの可視化を容易にすることに努めます.
GitHubアドレス:https://github.com/TalkingData/inmap
文書の住所:http://inmap.talkingdata.com/
地理情報の可視化において、地図上に文字を表記する必要があります.次に示すのは、あるポップスチャートのフレームワークの効果です.
表示する文字のスペースが足りないと文字が重なって表示が乱れ、ユーザーが友好的ではないということです.
この問題はどう解決しますか?私たちは文字避難アルゴリズムを使って、このようなお父さんの問題を解決します.
下に展示されているのはinMapの文字回避効果です.
文字表記アルゴリズムはGISの中で最も複雑な問題の一つです.
inMapの回避アルゴリズムは四分位のモデルアルゴリズムを採用しています.これから手を取って避難アルゴリズムを教えてあげます.ベテランドライバーがあなたを連れて無理に飛行させます.
データを用意する
inMapが受信したのは経緯度データで、canvasのピクセル座標に写像する必要があります.これはメルカート変換を使いました.変換した後、あなたが得たデータはこうなるべきです.

[
  {
    "name": "  ",//      
    "lng": 121.15,
    "lat": 31.89,
    "count": 7,
    "pixel": { //    
      "x": 968,
      "y": 736
    }
  },
  {
    "name": "    ",
    "lng": 109.781327,
    "lat": 39.608266,
    "count": 5,
    "pixel": {
      "x": 659,
      "y": 478
    }
  },
...
]

はい、変換されたピクセル座標データ(x、y)を得ると、次のようなことができます.
テキストの長方形ごとの実際のサイズを求めます.measureText()は、canvas内蔵の方法であり、フォント幅のピクセル単位を返す.

let ctx = this.container.getContext('2d'); // canvas    
let width= ctx.measureText(name).width;

私達はmeasreTextを通して文字の幅を得ましたが、canvasは直接文字を得る方法がありません.その文字の高さはどうやって得られますか?
私たちはテストを重ねて、canvasのfontが「13 px Arial」のフォント(他のフォントは保証できません)に等しいことを発見した時、文字の高さは大体fontSizeの1.1倍です.
コードは以下の通りです.

let fontSize = parseInt(ctx.font);
let height = fontSize * 1.1;

テキストの幅と高さを得ると、テキストの長方形の座標系を作成できます.
四分位モデルを作成
四分位モデルというのは、どのマークにも上下左右四つの文字を入れる席があります.左に置いてはいけないなら、右に置いてみてください.まだだめなら下に置いてみてください.原理はこんな簡単です.ハハ.
右側の仮想長方形座標の説明を作成します.
右側の仮想長方形座標の記述には、ドットも含まれています.文字とドットの重複を防ぐためです.
仮想長方形の高さを計算する時、いくつかのピットがあります.ドットの大きさは固定ではなく、ユーザーの動態によって構成されています.ドットの直径は文字の高さより大きいかもしれません.仮想長方形の高さを設定するには、永遠に最大のものです.特殊な処理が必要です.
コードは以下の通りです

_getLeftAnchor() {
    let x = this.center.x - this.radius - this.textReact.width,
        y = this.center.y - this.textReact.height / 2,
        diam = this.radius * 2,
        maxH = diam > this.textReact.height ? diam : this.textReact.height; //     
    return {
        x,
        y,
        minX: x,
        maxX: this.center.x + this.radius,
        minY: this.center.y - maxH / 2,
        maxY: this.center.y + maxH / 2
    };
}

これを類推して、以下、左、上の仮想長方形座標を説明する.
衝突を判断する
二つの長方形が交差点をカバーするかどうかを判断します.矩形のminX、maxX、minY、maxYによって交点を判断します.原理は簡単です.コードは以下の通りです.

/**
 *         
 * @param {*} target 
 */
 
isAnchorMeet(target) {
    let react = this.getCurrentRect(),
        targetReact = target.getCurrentRect();
    if ((react.minX < targetReact.maxX) && (targetReact.minX < react.maxX) &&
        (react.minY < targetReact.maxY) && (targetReact.minY < react.maxY)) {
        return true;
    }
    return false;
}

仮想テキストセットオブジェクトを作成

let labels = pixels.map((val) => {
    let radius = val.pixel.radius + this.style.normal.borderWidth; //    
    return new Label(val.pixel.x, val.pixel.y, radius, fontSize, byteWidth, val.name);
});

再帰的に仮想文字セットを巡回し、他と交わるかどうかを判断し、交差があれば現在のテキスト位置を移動し、交差しないまで.適切な位置が見つからない場合は、現在のテキストを非表示にします.
コードは以下の通りです

do {
    var meet = false; //       
    for (let i = 0; i < labels.length; i++) {
        let temp = labels[i];
        for (let j = 0; j < labels.length; j++) {
            if (i != j && temp.show && temp.isAnchorMeet(labels[j])) {
                temp.next();
                meet = true;
                break;
            }
        }
    }
} while (meet);

絵文字

labels.forEach(function (item) {
    if (item.show) { //    
        let pixel = item.getCurrentRect();
        ctx.beginPath();
        ctx.fillText(item.text, pixel.x, pixel.y);
        ctx.fill();
    }
});

文字回避アルゴリズムはこれまでに紹介されましたが、対応するinMapファイルの住所はhttps://github.com/TalkingData/inmap/blob/master/src/worker/helper/Label.js続いて乾物を皆様に分かち合います.
福祉
二人の業界の大牛の先端授業を分けます.

Areesn大神は、優れた先端UIユニット庫iViewを源に、「Vue.js実戦」という本を出版しました.皆さんに彼の授業を紹介します.Vue.jsの実戦シリーズ教程は本リンクから過去の二割引を受けます.

Chos WebGL専門家は、ウェブ3 D開発が得意です.主に『いじられた地球シリーズ』があり、初心者に向いています.