IoT-For-Beginners/translations/pa/3-transport/lessons/3-visualize-location-data

ਸਥਾਨ ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਓ

ਸਕੈਚਨੋਟ ਨਿਤਿਆ ਨਰਸਿੰਹਨ ਦੁਆਰਾ। ਵੱਡੇ ਵਰਜਨ ਲਈ ਚਿੱਤਰ 'ਤੇ ਕਲਿਕ ਕਰੋ।

ਇਹ ਵੀਡੀਓ Azure Maps ਅਤੇ IoT ਦਾ ਝਲਕ ਦਿੰਦੀ ਹੈ, ਜੋ ਕਿ ਇਸ ਪਾਠ ਵਿੱਚ ਕਵਰ ਕੀਤਾ ਜਾਵੇਗਾ।

🎥 ਉਪਰੋਕਤ ਚਿੱਤਰ 'ਤੇ ਕਲਿਕ ਕਰਕੇ ਵੀਡੀਓ ਦੇਖੋ

ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਪਰਿਚਯ

ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਤੁਸੀਂ ਸਿੱਖਿਆ ਕਿ ਆਪਣੇ ਸੈਂਸਰਾਂ ਤੋਂ GPS ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਕੇ ਕਿਵੇਂ ਕਲਾਉਡ ਵਿੱਚ ਸਟੋਰੇਜ ਕੰਟੇਨਰ ਵਿੱਚ ਸੇਵ ਕਰਨਾ ਹੈ। ਹੁਣ ਤੁਸੀਂ ਇਹ ਪਤਾ ਲਗਾਓਗੇ ਕਿ Azure ਮੈਪ 'ਤੇ ਉਹਨਾਂ ਪਾਇੰਟਸ ਨੂੰ ਕਿਵੇਂ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣਾ ਹੈ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਵੈੱਬ ਪੇਜ 'ਤੇ ਮੈਪ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ, GeoJSON ਡਾਟਾ ਫਾਰਮੈਟ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰਨੀ ਹੈ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ ਮੈਪ 'ਤੇ ਸਾਰੇ ਕੈਪਚਰ ਕੀਤੇ GPS ਪਾਇੰਟਸ ਪਲਾਟ ਕਰਨ ਲਈ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ।

ਇਸ ਪਾਠ ਵਿੱਚ ਅਸੀਂ ਕਵਰ ਕਰਾਂਗੇ:

• ਡਾਟਾ ਦ੍ਰਿਸ਼ਮਾਨਤਾ ਕੀ ਹੈ
• ਮੈਪ ਸੇਵਾਵਾਂ
• Azure Maps ਸਰੋਤ ਬਣਾਓ
• ਵੈੱਬ ਪੇਜ 'ਤੇ ਮੈਪ ਦਿਖਾਓ
• GeoJSON ਫਾਰਮੈਟ
• GeoJSON ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੈਪ 'ਤੇ GPS ਡਾਟਾ ਪਲਾਟ ਕਰੋ

💁 ਇਸ ਪਾਠ ਵਿੱਚ HTML ਅਤੇ JavaScript ਦੀ ਥੋੜ੍ਹੀ ਮਾਤਰਾ ਸ਼ਾਮਲ ਹੋਵੇਗੀ। ਜੇ ਤੁਸੀਂ HTML ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਵਿਕਾਸ ਬਾਰੇ ਹੋਰ ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸ਼ੁਰੂਆਤੀ ਵੈੱਬ ਵਿਕਾਸ ਨੂੰ ਦੇਖੋ।

ਡਾਟਾ ਦ੍ਰਿਸ਼ਮਾਨਤਾ ਕੀ ਹੈ

ਡਾਟਾ ਦ੍ਰਿਸ਼ਮਾਨਤਾ, ਜਿਵੇਂ ਕਿ ਨਾਮ ਸੁਝਾਉਂਦਾ ਹੈ, ਡਾਟਾ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਉਣ ਬਾਰੇ ਹੈ ਜੋ ਮਨੁੱਖਾਂ ਲਈ ਸਮਝਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਚਾਰਟ ਅਤੇ ਗ੍ਰਾਫ ਨਾਲ ਜੁੜਿਆ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਹ ਡਾਟਾ ਨੂੰ ਚਿੱਤਰਕਾਰੀ ਰੂਪ ਵਿੱਚ ਪੇਸ਼ ਕਰਨ ਦਾ ਕੋਈ ਵੀ ਤਰੀਕਾ ਹੈ ਜੋ ਮਨੁੱਖਾਂ ਨੂੰ ਸਿਰਫ ਡਾਟਾ ਨੂੰ ਬਿਹਤਰ ਸਮਝਣ ਵਿੱਚ ਹੀ ਨਹੀਂ ਸਹਾਇਕ ਹੁੰਦਾ, ਸਗੋਂ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਵੀ ਮਦਦ ਕਰਦਾ ਹੈ।

ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਲੈ ਕੇ - ਫਾਰਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਤੁਸੀਂ ਮਿੱਟੀ ਦੀ ਨਮੀ ਦੇ ਪੜ੍ਹਨ ਨੂੰ ਕੈਪਚਰ ਕੀਤਾ ਸੀ। 1 ਜੂਨ 2021 ਲਈ ਹਰ ਘੰਟੇ ਕੈਪਚਰ ਕੀਤੇ ਗਏ ਮਿੱਟੀ ਦੀ ਨਮੀ ਦੇ ਡਾਟਾ ਦੀ ਇੱਕ ਟੇਬਲ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੋ ਸਕਦੀ ਹੈ:

ਮਿਤੀ	ਪੜ੍ਹਨ
01/06/2021 00:00	257
01/06/2021 01:00	268
01/06/2021 02:00	295
01/06/2021 03:00	305
01/06/2021 04:00	325
01/06/2021 05:00	359
01/06/2021 06:00	398
01/06/2021 07:00	410
01/06/2021 08:00	429
01/06/2021 09:00	451
01/06/2021 10:00	460
01/06/2021 11:00	452
01/06/2021 12:00	420
01/06/2021 13:00	408
01/06/2021 14:00	431
01/06/2021 15:00	462
01/06/2021 16:00	432
01/06/2021 17:00	402
01/06/2021 18:00	387
01/06/2021 19:00	360
01/06/2021 20:00	358
01/06/2021 21:00	354
01/06/2021 22:00	356
01/06/2021 23:00	362

ਇਸ ਡਾਟਾ ਨੂੰ ਸਮਝਣਾ ਮਨੁੱਖਾਂ ਲਈ ਮੁਸ਼ਕਲ ਹੋ ਸਕਦਾ ਹੈ। ਇਹ ਅਰਥਹੀਨ ਨੰਬਰਾਂ ਦੀ ਇੱਕ ਕੰਧ ਹੈ। ਇਸ ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣ ਦੇ ਪਹਿਲੇ ਕਦਮ ਵਜੋਂ, ਇਸਨੂੰ ਲਾਈਨ ਚਾਰਟ 'ਤੇ ਪਲਾਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

ਇਸਨੂੰ ਹੋਰ ਵਧੀਆ ਬਣਾਉਣ ਲਈ ਇੱਕ ਲਾਈਨ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਜੋ ਦਿਖਾਉਂਦੀ ਹੈ ਕਿ ਜਦੋਂ ਮਿੱਟੀ ਦੀ ਨਮੀ 450 'ਤੇ ਪਹੁੰਚੀ ਤਾਂ ਆਟੋਮੈਟਿਕ ਵਾਟਰਿੰਗ ਸਿਸਟਮ ਚਾਲੂ ਹੋ ਗਿਆ:

ਇਹ ਚਾਰਟ ਬਹੁਤ ਜਲਦੀ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਮਿੱਟੀ ਦੀ ਨਮੀ ਦੇ ਪੱਧਰ ਕੀ ਸਨ ਅਤੇ ਜਦੋਂ ਵਾਟਰਿੰਗ ਸਿਸਟਮ ਚਾਲੂ ਹੋਇਆ।

ਚਾਰਟ ਸਿਰਫ ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣ ਦਾ ਸਾਧਨ ਨਹੀਂ ਹਨ। IoT ਡਿਵਾਈਸ ਜੋ ਮੌਸਮ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦੇ ਹਨ, ਉਹ ਮੌਸਮ ਦੀਆਂ ਸਥਿਤੀਆਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਵੈੱਬ ਐਪਸ ਜਾਂ ਮੋਬਾਈਲ ਐਪਸ ਰੱਖ ਸਕਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਬੱਦਲ ਵਾਲੇ ਦਿਨਾਂ ਲਈ ਬੱਦਲ ਦਾ ਚਿੰਨ੍ਹ, ਬਾਰਿਸ਼ ਵਾਲੇ ਦਿਨਾਂ ਲਈ ਬਾਰਿਸ਼ ਵਾਲਾ ਬੱਦਲ ਆਦਿ। ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣ ਦੇ ਬਹੁਤ ਸਾਰੇ ਤਰੀਕੇ ਹਨ, ਕੁਝ ਗੰਭੀਰ, ਕੁਝ ਮਨੋਰੰਜਕ।

✅ ਉਹ ਤਰੀਕੇ ਸੋਚੋ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਤੁਸੀਂ ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਹੋਇਆ ਦੇਖਿਆ ਹੈ। ਕਿਹੜੇ ਤਰੀਕੇ ਸਭ ਤੋਂ ਸਪਸ਼ਟ ਸਨ ਅਤੇ ਜਿਨ੍ਹਾਂ ਨੇ ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਤੇਜ਼ੀ ਨਾਲ ਫੈਸਲੇ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੱਤੀ?

ਸਭ ਤੋਂ ਵਧੀਆ ਦ੍ਰਿਸ਼ਮਾਨਤਾ ਮਨੁੱਖਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਫੈਸਲੇ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਉਦਾਹਰਣ ਲਈ, ਉਦਯੋਗਿਕ ਮਸ਼ੀਨਰੀ ਤੋਂ ਪੜ੍ਹਨ ਦਿਖਾਉਣ ਵਾਲੇ ਗੇਜਾਂ ਦੀ ਕੰਧ ਨੂੰ ਸਮਝਣਾ ਮੁਸ਼ਕਲ ਹੈ, ਪਰ ਜਦੋਂ ਕੁਝ ਗਲਤ ਹੁੰਦਾ ਹੈ ਤਾਂ ਇੱਕ ਲਾਲ ਚਮਕਦਾਰ ਬੱਤੀ ਮਨੁੱਖ ਨੂੰ ਫੈਸਲਾ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਕਈ ਵਾਰ ਸਭ ਤੋਂ ਵਧੀਆ ਦ੍ਰਿਸ਼ਮਾਨਤਾ ਇੱਕ ਚਮਕਦਾਰ ਬੱਤੀ ਹੁੰਦੀ ਹੈ!

GPS ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਸਭ ਤੋਂ ਸਪਸ਼ਟ ਦ੍ਰਿਸ਼ਮਾਨਤਾ ਡਾਟਾ ਨੂੰ ਮੈਪ 'ਤੇ ਪਲਾਟ ਕਰਨਾ ਹੋ ਸਕਦੀ ਹੈ। ਉਦਾਹਰਣ ਲਈ, ਡਿਲਿਵਰੀ ਟਰੱਕ ਦਿਖਾਉਣ ਵਾਲਾ ਮੈਪ ਪ੍ਰੋਸੈਸਿੰਗ ਪਲਾਂਟ 'ਤੇ ਕੰਮ ਕਰਨ ਵਾਲੇ ਕਰਮਚਾਰੀਆਂ ਨੂੰ ਦਿਖਾ ਸਕਦਾ ਹੈ ਕਿ ਟਰੱਕ ਕਦੋਂ ਪਹੁੰਚਣਗੇ। ਜੇਕਰ ਇਹ ਮੈਪ ਸਿਰਫ ਟਰੱਕ ਦੀਆਂ ਮੌਜੂਦਾ ਸਥਿਤੀਆਂ ਦੀਆਂ ਤਸਵੀਰਾਂ ਹੀ ਨਹੀਂ ਦਿਖਾਉਂਦਾ, ਸਗੋਂ ਟਰੱਕ ਦੇ ਸਮੱਗਰੀ ਬਾਰੇ ਵੀ ਜਾਣਕਾਰੀ ਦਿੰਦਾ ਹੈ, ਤਾਂ ਪਲਾਂਟ ਦੇ ਕਰਮਚਾਰੀ ਇਸ ਅਨੁਸਾਰ ਯੋਜਨਾ ਬਣਾ ਸਕਦੇ ਹਨ - ਜੇਕਰ ਉਹ ਇੱਕ ਰਿਫ੍ਰਿਜਰੇਟਡ ਟਰੱਕ ਨੂੰ ਨੇੜੇ ਦੇਖਦੇ ਹਨ ਤਾਂ ਉਹ ਫ੍ਰਿਜ ਵਿੱਚ ਜਗ੍ਹਾ ਤਿਆਰ ਕਰਨ ਲਈ ਜਾਣਦੇ ਹਨ।

ਮੈਪ ਸੇਵਾਵਾਂ

ਮੈਪਸ ਨਾਲ ਕੰਮ ਕਰਨਾ ਇੱਕ ਦਿਲਚਸਪ ਅਭਿਆਸ ਹੈ, ਅਤੇ ਚੋਣ ਕਰਨ ਲਈ ਬਹੁਤ ਸਾਰੇ ਹਨ ਜਿਵੇਂ ਕਿ Bing Maps, Leaflet, Open Street Maps, ਅਤੇ Google Maps। ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ Azure Maps ਬਾਰੇ ਸਿੱਖੋਗੇ ਅਤੇ ਇਹ ਕਿਵੇਂ ਤੁਹਾਡੇ GPS ਡਾਟਾ ਨੂੰ ਦਿਖਾ ਸਕਦੇ ਹਨ।

Azure Maps "ਜੀਓਸਪੇਸ਼ਲ ਸੇਵਾਵਾਂ ਅਤੇ SDKs ਦਾ ਇੱਕ ਸੰਗ੍ਰਹਿ ਹੈ ਜੋ ਤਾਜ਼ਾ ਮੈਪਿੰਗ ਡਾਟਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੈੱਬ ਅਤੇ ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਭੂਗੋਲਿਕ ਸੰਦਰਭ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।" ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸੁੰਦਰ, ਇੰਟਰਐਕਟਿਵ ਮੈਪਸ ਬਣਾਉਣ ਲਈ ਸੰਦ ਪ੍ਰਦਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਜੋ ਜਿਵੇਂ ਕਿ ਸਿਫਾਰਸ਼ੀ ਟ੍ਰੈਫਿਕ ਰੂਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਟ੍ਰੈਫਿਕ ਘਟਨਾਵਾਂ ਬਾਰੇ ਜਾਣਕਾਰੀ ਦਿੰਦੇ ਹਨ, ਇੰਡੋਰ ਨੈਵੀਗੇਸ਼ਨ, ਖੋਜ ਸਮਰੱਥਾ, ਉਚਾਈ ਜਾਣਕਾਰੀ, ਮੌਸਮ ਸੇਵਾਵਾਂ ਅਤੇ ਹੋਰ।

✅ ਕੁਝ ਮੈਪਿੰਗ ਕੋਡ ਨਮੂਨਿਆਂ ਨਾਲ ਅਨੁਭਵ ਕਰੋ

ਤੁਸੀਂ ਮੈਪਸ ਨੂੰ ਖਾਲੀ ਕੈਨਵਾਸ, ਟਾਈਲ, ਸੈਟੇਲਾਈਟ ਚਿੱਤਰ, ਸੈਟੇਲਾਈਟ ਚਿੱਤਰ ਸੜਕਾਂ ਦੇ ਨਾਲ, ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਗ੍ਰੇਸਕੇਲ ਮੈਪਸ, ਛਾਂਵੇ ਵਾਲੇ ਰਾਹਤ ਦੇ ਨਾਲ ਮੈਪਸ, ਰਾਤ ਦੇ ਦ੍ਰਿਸ਼ਮਾਨ ਮੈਪਸ, ਅਤੇ ਇੱਕ ਉੱਚ ਵਿਰੋਧੀ ਮੈਪ ਵਜੋਂ ਦਿਖਾ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ Azure Event Grid ਨਾਲ ਇੰਟੀਗਰੇਟ ਕਰਕੇ ਆਪਣੇ ਮੈਪਸ 'ਤੇ ਰੀਅਲ-ਟਾਈਮ ਅਪਡੇਟ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਮੈਪਸ ਦੇ ਵਿਵਹਾਰ ਅਤੇ ਦਿੱਖ ਨੂੰ ਵੱਖ-ਵੱਖ ਕੰਟਰੋਲਸ ਨੂੰ ਯੋਗ ਕਰਕੇ ਸੰਭਾਲ ਸਕਦੇ ਹੋ ਜੋ ਮੈਪ ਨੂੰ ਪਿੰਚ, ਡਰੈਗ, ਅਤੇ ਕਲਿ ✅ ਐਜ਼ਰ ਮੈਪਸ ਸਟੈਂਡਰਡ GeoJSON ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਅਤੇ ਕੁਝ ਵਧੇਰੇ ਫੀਚਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਰਕਲ ਅਤੇ ਹੋਰ ਜਿਓਮੈਟਰੀਆਂ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ।

GeoJSON ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੈਪ 'ਤੇ GPS ਡਾਟਾ ਪਲਾਟ ਕਰੋ

ਹੁਣ ਤੁਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਬਣਾਈ ਗਈ ਸਟੋਰੇਜ ਤੋਂ ਡਾਟਾ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹੋ। ਯਾਦ ਦਿਵਾਉਣ ਲਈ, ਇਹ blob ਸਟੋਰੇਜ ਵਿੱਚ ਕਈ ਫਾਈਲਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਫਾਈਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਅਤੇ ਪਾਰਸ ਕਰਨਾ ਪਵੇਗਾ ਤਾਂ ਜੋ ਐਜ਼ਰ ਮੈਪਸ ਇਸ ਡਾਟੇ ਨੂੰ ਵਰਤ ਸਕੇ।

ਟਾਸਕ - ਸਟੋਰੇਜ ਨੂੰ ਵੈੱਬ ਪੇਜ ਤੋਂ ਐਕਸੈਸ ਕਰਨ ਲਈ ਕਨਫਿਗਰ ਕਰੋ

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਸਟੋਰੇਜ ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਗਲਤੀਆਂ ਵੇਖਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਇਸ ਸਟੋਰੇਜ 'ਤੇ CORS ਲਈ ਪਰਮਿਸ਼ਨ ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਜੋ ਬਾਹਰੀ ਵੈੱਬ ਐਪਸ ਇਸ ਦਾ ਡਾਟਾ ਪੜ੍ਹ ਸਕਣ।

🎓 CORS ਦਾ ਮਤਲਬ ਹੈ "ਕਰਾਸ-ਓਰਿਜਿਨ ਰਿਸੋਰਸ ਸ਼ੇਅਰਿੰਗ" ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਸੁਰੱਖਿਆ ਕਾਰਨਾਂ ਕਰਕੇ ਐਜ਼ਰ ਵਿੱਚ ਇਸਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਹ ਅਣਜਾਣ ਸਾਈਟਾਂ ਨੂੰ ਤੁਹਾਡੇ ਡਾਟੇ ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

1. CORS ਨੂੰ ਐਨੇਬਲ ਕਰਨ ਲਈ ਹੇਠਾਂ ਦਿੱਤਾ ਕਮਾਂਡ ਚਲਾਓ:

   az storage cors add --methods GET \
                       --origins "*" \
                       --services b \
                       --account-name <storage_name> \
                       --account-key <key1>
   

   <storage_name> ਨੂੰ ਆਪਣੇ ਸਟੋਰੇਜ ਅਕਾਊਂਟ ਦੇ ਨਾਮ ਨਾਲ ਬਦਲੋ। <key1> ਨੂੰ ਆਪਣੇ ਸਟੋਰੇਜ ਅਕਾਊਂਟ ਲਈ ਅਕਾਊਂਟ ਕੁੰਜੀ ਨਾਲ ਬਦਲੋ।

   ਇਹ ਕਮਾਂਡ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ (ਵਾਈਲਡਕਾਰਡ * ਦਾ ਮਤਲਬ ਹੈ ਕੋਈ ਵੀ) ਨੂੰ GET ਰਿਕਵੈਸਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, ਜੋ ਕਿ ਤੁਹਾਡੇ ਸਟੋਰੇਜ ਅਕਾਊਂਟ ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ। --services b ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਇਹ ਸੈਟਿੰਗ ਸਿਰਫ ਬਲਾਬਸ ਲਈ ਲਾਗੂ ਹੋਵੇਗੀ।

ਟਾਸਕ - ਸਟੋਰੇਜ ਤੋਂ GPS ਡਾਟਾ ਲੋਡ ਕਰੋ

1. init ਫੰਕਸ਼ਨ ਦੀ ਪੂਰੀ ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨਾਲ ਬਦਲੋ:

   fetch("https://<storage_name>.blob.core.windows.net/gps-data/?restype=container&comp=list")
       .then(response => response.text())
       .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
       .then(xml => {
           let blobList = Array.from(xml.querySelectorAll("Url"));
               blobList.forEach(async blobUrl => {
                   loadJSON(blobUrl.innerHTML)                
       });
   })
   .then( response => {
       map = new atlas.Map('myMap', {
           center: [-122.26473, 47.73444],
           zoom: 14,
           authOptions: {
               authType: "subscriptionKey",
               subscriptionKey: "<subscription_key>",
   
           }
       });
       map.events.add('ready', function () {
           var source = new atlas.source.DataSource();
           map.sources.add(source);
           map.layers.add(new atlas.layer.BubbleLayer(source));
           source.add(features);
       })
   })
   

   <storage_name> ਨੂੰ ਆਪਣੇ ਸਟੋਰੇਜ ਅਕਾਊਂਟ ਦੇ ਨਾਮ ਨਾਲ ਬਦਲੋ। <subscription_key> ਨੂੰ ਆਪਣੇ ਐਜ਼ਰ ਮੈਪਸ ਅਕਾਊਂਟ ਲਈ API ਕੁੰਜੀ ਨਾਲ ਬਦਲੋ।

   ਇੱਥੇ ਕਈ ਚੀਜ਼ਾਂ ਹੋ ਰਹੀਆਂ ਹਨ। ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਕੋਡ ਤੁਹਾਡੇ ਬਲਾਬ ਕੰਟੇਨਰ ਤੋਂ GPS ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਸਟੋਰੇਜ ਅਕਾਊਂਟ ਦੇ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਈ ਗਈ URL ਐਂਡਪੌਇੰਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ URL gps-data ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਜੋ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਸਰੋਤ ਕਿਸਮ ਇੱਕ ਕੰਟੇਨਰ ਹੈ (restype=container), ਅਤੇ ਸਾਰੇ ਬਲਾਬਸ ਬਾਰੇ ਜਾਣਕਾਰੀ ਦੀ ਸੂਚੀ ਦਿੰਦਾ ਹੈ। ਇਹ ਸੂਚੀ ਖੁਦ ਬਲਾਬਸ ਨੂੰ ਵਾਪਸ ਨਹੀਂ ਕਰੇਗੀ, ਪਰ ਹਰ ਬਲਾਬ ਲਈ ਇੱਕ URL ਵਾਪਸ ਕਰੇਗੀ ਜਿਸਨੂੰ ਬਲਾਬ ਡਾਟਾ ਲੋਡ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

   💁 ਤੁਸੀਂ ਇਸ URL ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਪਾ ਸਕਦੇ ਹੋ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਕੰਟੇਨਰ ਵਿੱਚ ਸਾਰੇ ਬਲਾਬਸ ਦੇ ਵੇਰਵੇ ਵੇਖ ਸਕੋ। ਹਰ ਆਈਟਮ ਵਿੱਚ ਇੱਕ Url ਪ੍ਰਾਪਰਟੀ ਹੋਵੇਗੀ ਜਿਸਨੂੰ ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲੋਡ ਕਰਕੇ ਬਲਾਬ ਦੀ ਸਮੱਗਰੀ ਵੇਖ ਸਕਦੇ ਹੋ।

   ਇਹ ਕੋਡ ਫਿਰ ਹਰ ਬਲਾਬ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ, ਇੱਕ loadJSON ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ, ਜੋ ਅਗਲੇ ਕਦਮ ਵਿੱਚ ਬਣਾਇਆ ਜਾਵੇਗਾ। ਫਿਰ ਇਹ ਮੈਪ ਕੰਟਰੋਲ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ready ਇਵੈਂਟ ਵਿੱਚ ਕੋਡ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਹ ਇਵੈਂਟ ਉਸ ਸਮੇਂ ਕਾਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਮੈਪ ਵੈੱਬ ਪੇਜ 'ਤੇ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ।

   ready ਇਵੈਂਟ ਇੱਕ ਐਜ਼ਰ ਮੈਪਸ ਡਾਟਾ ਸਰੋਤ ਬਣਾਉਂਦਾ ਹੈ - ਇੱਕ ਕੰਟੇਨਰ ਜੋ GeoJSON ਡਾਟਾ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜੋ ਬਾਅਦ ਵਿੱਚ ਭਰਿਆ ਜਾਵੇਗਾ। ਇਹ ਡਾਟਾ ਸਰੋਤ ਫਿਰ ਇੱਕ ਬਬਲ ਲੇਅਰ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ - ਜੋ ਕਿ ਮੈਪ 'ਤੇ ਹਰ ਬਿੰਦੂ ਦੇ ਕੇਂਦਰ 'ਤੇ ਸਰਕਲਾਂ ਦਾ ਸੈੱਟ ਹੈ।

2. ਆਪਣੇ ਸਕ੍ਰਿਪਟ ਬਲਾਕ ਵਿੱਚ, init ਫੰਕਸ਼ਨ ਦੇ ਹੇਠਾਂ loadJSON ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:

   var map, features;
   
   function loadJSON(file) {
       var xhr = new XMLHttpRequest();
       features = [];
       xhr.onreadystatechange = function () {
           if (xhr.readyState === XMLHttpRequest.DONE) {
               if (xhr.status === 200) {
                   gps = JSON.parse(xhr.responseText)
                   features.push(
                       new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)]))
                   )
               }
           }
       };
       xhr.open("GET", file, true);
       xhr.send();
   }    
   

   ਇਹ ਫੰਕਸ਼ਨ ਫੈਚ ਰੂਟੀਨ ਦੁਆਰਾ ਕਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ JSON ਡਾਟਾ ਨੂੰ ਪਾਰਸ ਕੀਤਾ ਜਾ ਸਕੇ ਅਤੇ ਇਸਨੂੰ GeoJSON ਦੇ ਰੂਪ ਵਿੱਚ ਲੰਬਕਾਰ ਅਤੇ ਅਕਸ਼ਾਂਸ ਕੋਆਰਡੀਨੇਟਸ ਵਜੋਂ ਪੜ੍ਹਿਆ ਜਾ ਸਕੇ। ਪਾਰਸ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਡਾਟਾ ਨੂੰ GeoJSON Feature ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਮੈਪ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਛੋਟੇ ਬਬਲ ਤੁਹਾਡੇ ਡਾਟੇ ਦੁਆਰਾ ਪਲਾਟ ਕੀਤੇ ਗਏ ਰਸਤੇ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦਿਖਾਈ ਦੇਣਗੇ:

3. ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ HTML ਪੇਜ ਲੋਡ ਕਰੋ। ਇਹ ਮੈਪ ਲੋਡ ਕਰੇਗਾ, ਫਿਰ ਸਟੋਰੇਜ ਤੋਂ ਸਾਰੇ GPS ਡਾਟਾ ਲੋਡ ਕਰੇਗਾ ਅਤੇ ਮੈਪ 'ਤੇ ਪਲਾਟ ਕਰੇਗਾ।

   

💁 ਤੁਸੀਂ ਇਹ ਕੋਡ code ਫੋਲਡਰ ਵਿੱਚ ਲੱਭ ਸਕਦੇ ਹੋ।

---

🚀 ਚੁਣੌਤੀ

ਇਹ ਵਧੀਆ ਹੈ ਕਿ ਮੈਪ 'ਤੇ ਸਟੈਟਿਕ ਡਾਟਾ ਨੂੰ ਮਾਰਕਰ ਵਜੋਂ ਦਿਖਾਇਆ ਜਾ ਸਕੇ। ਕੀ ਤੁਸੀਂ ਇਸ ਵੈੱਬ ਐਪ ਨੂੰ ਵਧਾ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਐਨੀਮੇਸ਼ਨ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾ ਸਕੇ ਅਤੇ ਮਾਰਕਰਾਂ ਦੇ ਰਸਤੇ ਨੂੰ ਸਮੇਂ ਦੇ ਨਾਲ ਦਿਖਾਇਆ ਜਾ ਸਕੇ, ਟਾਈਮਸਟੈਂਪ ਕੀਤੇ JSON ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ? ਇੱਥੇ ਕੁਝ ਨਮੂਨੇ ਹਨ ਜੋ ਮੈਪਸ ਵਿੱਚ ਐਨੀਮੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਦਿਖਾਉਂਦੇ ਹਨ।

ਪਾਠ-ਪ੍ਰਸ਼ਨੋਤਰੀ

ਪਾਠ-ਪ੍ਰਸ਼ਨੋਤਰੀ

ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ

ਐਜ਼ਰ ਮੈਪਸ ਖਾਸ ਤੌਰ 'ਤੇ IoT ਡਿਵਾਈਸਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ।

• ਐਜ਼ਰ ਮੈਪਸ ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਕੁਝ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਬਾਰੇ ਖੋਜ ਕਰੋ।
• ਐਜ਼ਰ ਮੈਪਸ ਸੈਲਫ-ਗਾਈਡਡ ਲਰਨਿੰਗ ਮੋਡੀਊਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੈਪ ਬਣਾਉਣ ਅਤੇ ਵੇਪੋਇੰਟਸ ਬਾਰੇ ਆਪਣਾ ਗਿਆਨ ਵਧਾਓ।

ਅਸਾਈਨਮੈਂਟ

ਆਪਣਾ ਐਪ ਡਿਪਲੌਇ ਕਰੋ

---

ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।