18.研究室一覧

1. 研究室一覧ページの実装

1.テーブルタグ

残りのコンテンツを完了する

ラボラトリータイプも上記の方法で実装されます。

2.タグタグ

3. プレビュー機能の実装

3.1、リンクリンク

3.2. click クリックバインディングイベント

ビジュアルコンテンツをカプセル化し、カプセル化されたコンポーネントを呼び出します。

3.2. パッケージのコンポーネント

1) コンポーネントフォルダーにコンポーネントを作成します

2) インポート

セットアップでコンポーネントをインポートすると、登録が成功したことを意味します。

3.4. 次に、コンポーネントに必要なコードを記述します

とりあえずデータを書き込みます

<template>
    <div style="min-height: 500px; justify-content: center;position: relative" id="map" />
</template>

<script setup>
import { onMounted } from "vue";
import { Scene, ImageLayer, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

let scene;
onMounted(() => {
    // 创建Scene场景
    scene = new Scene({
        id: 'map',
        map: new Map({
            // center中心坐标，很关键，将来这个中心坐标的位置就是500，500的这样一个位置。将来我们要靠它来计算我们的偏移量的。
            center: [500, 500],
            // zoom放大：现在是放大3倍
            zoom: 3,
            version: 'SIMPLE',
            mapSize: 1000,
            // 最大是5倍
            maxZoom: 5,
            // 最小是2倍
            minZoom: 2,
            pitchEnabled: false,
            // 旋转：禁用
            rotateEnabled: false
        })
    });
    // 设置背景颜色
    scene.setBgColor('rgb(94, 182, 140)');

    // 创建imagelayer图片场景
    const imagelayer = new ImageLayer({}).source(
        '/bg.jpg',
        {
            parser: {
                type: 'image',
                // 左下角它的一个坐标位置360✖400
                // 右上角的是640✖600
                extent: [360, 400, 640, 600]
            }
        }
    );
    scene.on('loaded', () => {
        addTextLayer([
            {
                x: 500,
                y: 500,
                t: "aaa"
            }
        ])
        scene.addLayer(imagelayer);

    });
})

const addTextLayer = (data) => {
    const textlayer = new PointLayer({ zIndex: 2 })
        .source(
            data,
            {
                parser: {
                    type: 'json',
                    x: 'x',
                    y: 'y'
                }
            }
        )
        .shape('t', 'text')
        .size(14)
        .active({
            color: '#00f',
            mix: 0.9
        })
        .color('rgb(13,71,161)')
        .style({
            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
            spacing: 2, // 字符间距
            fontWeight: '800',
            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
            stroke: '#ffffff', // 描边颜色
            strokeWidth: 2, // 描边宽度
            textAllowOverlap: true
        });
    scene.addLayer(textlayer);
}

</script>

<style>

</style>

3.5、次のティック

ページ効果を見ると、この画像が圧縮されており、フレームが失われていることがわかります。前に述べた問題は、ダイアログの DOM ノードの作成の問題です。初めて作成されるとき、LabMap コンポーネントは作成時にレンダリングを開始し、コンポーネント内のネイティブ DOM を取得するためのノード操作があります。今回は、このコンポーネントが作成されたばかりで、その幅が取得できません。ネイティブ DOM ノードを取得するメソッドを使用して、その clientWidth を強制的に取得し、この時点で幅が取得できるかどうかをテストできます。幅を設定していないため、コンポーネントの幅が 100% であることは誰もが知っていますが、div のデフォルトは 100% です。全画面はビューポートの幅と 100% 同じであるため、コンポーネントの外側にダイアログを取得できますか。onMounted になると、外部ダイアログコンポーネントが作成されたばかりなので、それを取得できません。

これも以前に解決したことがあります。つまり、これらの初期化を行うために nextTick に入れるということは、私たちが私たちを待っていて、あなたのものは完了して完了していることを意味します。次に、このメソッドを次に呼び出します。このようにして、「この幅は現時点でのビューポートの幅である必要があります」を取得します。

<template>
    <div style="min-height: 500px; justify-content: center;position: relative" id="map" />
</template>

<script setup>
import { onMounted, nextTick } from "vue";
import { Scene, ImageLayer, PointLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

let scene;
onMounted(() => {
    nextTick(() => {
        // 创建Scene场景
        console.log(document.getElementById("map").clientWidth)
        scene = new Scene({
            id: 'map',
            map: new Map({
                // center中心坐标，很关键，将来这个中心坐标的位置就是500，500的这样一个位置。将来我们要靠它来计算我们的偏移量的。
                center: [500, 500],
                // zoom放大：现在是放大3倍
                zoom: 3,
                version: 'SIMPLE',
                mapSize: 1000,
                // 最大是5倍
                maxZoom: 5,
                // 最小是2倍
                minZoom: 2,
                pitchEnabled: false,
                // 旋转：禁用
                rotateEnabled: false
            })
        });
        // 设置背景颜色
        scene.setBgColor('rgb(94, 182, 140)');

        // 创建imagelayer图片场景
        const imagelayer = new ImageLayer({}).source(
            '/bg.jpg',
            {
                parser: {
                    type: 'image',
                    // 左下角它的一个坐标位置360✖400
                    // 右上角的是640✖600
                    extent: [360, 400, 640, 600]
                }
            }
        );
        scene.on('loaded', () => {
            addTextLayer([
                {
                    x: 500,
                    y: 500,
                    t: "aaa"
                }
            ])
            scene.addLayer(imagelayer);

        });
    })
})

const addTextLayer = (data) => {
    const textlayer = new PointLayer({ zIndex: 2 })
        .source(
            data,
            {
                parser: {
                    type: 'json',
                    x: 'x',
                    y: 'y'
                }
            }
        )
        .shape('t', 'text')
        .size(14)
        .active({
            color: '#00f',
            mix: 0.9
        })
        .color('rgb(13,71,161)')
        .style({
            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
            spacing: 2, // 字符间距
            fontWeight: '800',
            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
            stroke: '#ffffff', // 描边颜色
            strokeWidth: 2, // 描边宽度
            textAllowOverlap: true
        });
    scene.addLayer(textlayer);
}

</script>

<style></style>

このようにして、マップ効果が現れます。

3.6. 父から息子への受け継ぎ

親子物件を通じて

LabMap コンポーネントを作成する限り、ロードされた addTextLayer に X、Y、および T を渡します。これに応じてデータがテキスト注釈テキストレイヤーに転送され、作成されてページに表示されます。

そして、クリックした人が誰かを生み出すことができることに気づきました。

エクスペリエンスを向上させるために、作成したポイントを中央に配置します

こちらも5倍に拡大してみました

6.v-if

しかし、終了して別の研究室をクリックすると、プロパティに再度入らない限り変更されないことがわかります。更新ライフサイクルを記述していないため、現在、ダイアログは 1 回だけ作成され、その後は作成されません。解決策: v-if はノードを動的に作成および削除するため、v-if を使用できます。これは、クリックされるたびに作成と削除が繰り返されるため、ブラウザにとっては非常に不親切ですが、開発者にとっては確かに便利なソリューションです。