typescript - יישום רשת של openlayers רץ מאוד לאט ממכשיר נייד (Chrome באנדרואיד)

אני יודע שזה עשוי להישמע כמו סוג שאלה טיפוסי שצריך לסגור, אבל אני נתקע ואינני יודע איפה לחפש פתרון, אז אני מקווה שאספק מספיק פרטים כדי שהשאלה הזו תהיה מקובלת ב-SO.

אני מפתח יישום רשת של OpenLayers שניתן לגשת אליו כאן.

קוד המקור שלו נמצא ב-github repo.

אם תנסה את האפליקציה ממחשב, חוויית המשתמש אמורה להיות בסדר (לפחות, זו הניסיון האישי שלי).

עם זאת, כאשר אני מנסה את זה מהדפדפן הנייד שלי (כרום, הטלפון שלי הוא גוגל פיקסל 2), זה מאוד איטי.

במיוחד, כל פעם שאני מנסה לאינטראקציה עם האפליקציה על ידי נגיעה במסך כדי (למשל) לנווט במפה, יש עיכוב משמעותי בין הזמן שבו אני נוגע במסך לבין התגובה של האפליקציה.

ניסיתי אפילו להשתמש במסוף של ChromeDevTools כדי לבדוק את המסוף של הרשת כשהטלפון שלי מחובר בכבל USB, אבל לא הצלחתי להבין מה יכול להיות הגורם לאיטיות הזו.

כמה פרטים:

1. אני משתמש בגרסת OpenLayers 6.2.1
2. אני משתמש ב-TypeScript כדי לפתח את האפליקציה הזו
3. אני משתמש ב-parcel bundler כדי לאגד אותו בתיקיית dist
4. אני מעתיק את הקבצים שבניתי לשרת שלי כדי להפעיל את האפליקציה

הדבר היחיד ששמתי לב אליו הוא שקבצי הבנייה יש שמות מוזרים, כמו src.9f4704d2.css.

אני מניח שזה נגרם על ידי הבנדלר (parcel), כאשר אני מפעיל את הפקודה npm run build.

אבל בכנות אין לי מושג אם זה עלול להיות בעיה.

עם זאת, אם מישהו יכול לעזור לי להאיר אור על זה, אהיה מאוד אסיר תודה. בנוסף, אני יכול לספק הרבה יותר פרטים אם יתבקש, אבל הבעיה המרכזית שלי היא שאני לא יודע בדיוק היכן לחפש כדי לפתור את הבעיה.

עריכה 1

אני משתמש בכללי @import ב-CSS שלי, וקראתי כאן ש

חוקי @import יכולים להיות מקוננים כך שהדפדפן חייב לטעון ולנתח כל קובץ בסדרה.

אני לא יודע אם זה הבעיה, אבל אני אנסה להשתמש במספר תגי <link> במקום זאת ולראות אם הביצועים משתפרים...

עריכה 2

החלפת @import בכמה תגי <link> לא פתרה את הבעיה.

עריכה 3 (כנראה מצאתי את הבעיה)

אוקיי, צמצמתי את הבעיה כך שתהיה בשכבות שאני יוצר.

בפועל אני מפענח שלושה כתובות URL של WMS, מחלץ כל שכבה מהם, ומוסיף ImageLayer חדש עם מקור ImageWMS עבור כל אחד מהם למפה.

הדבר הראשון שעשיתי שהאיץ את היישום היה להשתמש ב-TileImage ו-TileWMS במקום ב-ImageLayer ו-ImageWMS.

הקוד הרלוונטי נמצא למטה:

import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

export class OperationalLayer{
    private operationalLayer: TileLayer;
    id: String;
    
    constructor(url: string, name: string, id: string) {
        const source = new TileWMS({
            params: {'LAYERS': name},
            url: url,
        });

        this.id = id;

        this.operationalLayer = new TileLayer({
            source: source,
        })
    }

    getLayer() {
        return this.operationalLayer;
    }
}

ובכל זאת, האפליקציה הייתה איטית מאוד.

אז ניסיתי להשתמש רק ב-URL אחד וכך להוסיף רק 3 שכבות בסך הכל למפה שלי.

עכשיו זה רץ בצורה מקובלת.

אני חושב שהנקודה המרכזית היא שעלי להתמקד באסטרטגיה הטובה ביותר להוסיף את השכבות שלי למפה: האם להשתמש ב-ImageWMS אחד עם כל שכבות ה-WMS ביחד, או ב-ImageWMS אחד לכל שכבה.

האחרון (שזה מה שאני עושה), ייתן לי את האפשרות להפעיל/לכבות כל שכבה בקלות; הראשון יהיה מהיר יותר כנראה.

או שיש חלופה שלא שקלתי?

תשובה #1

אתה צריך להשתמש במטא viewport בעמוד שלך.
משהו כמו:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

זה יתקן את גודל העמוד וימנע שינוי גודל של כל העמוד. זה גם יקטין את גודל העמוד ואת הפיקסלים המטופלים באזור התצוגה.

אתה יכול גם להסתכל על meta עבור אפליקציית ווב ניידת כדי לשפר את האפליקציה שלך, כגון התג web-app-capable.

נסה להשתמש במיקום קבוע עבור המפה שלך ולוח התפריטים שלך (וכל עמוד שעשוי לכסות את המפה) כדי לשפר את הרינדור.

השתמש ב-TileWMS: האריחים יישמרו בזיכרון המטמון ולא יירשאמו בכל הזזה (רק האריחים החדשים יירשאמו). קיימת גם אפשרות hdpi בהגדרת השכבות שתעשה את התמונה יותר חדה אך תגדיל את גודל הקנבס (ואת פעולות הציור), נסה להגדיר אותה ל-false ולהסתכל על התוצאה כדי לעשות את הבחירה שלך.