Level 3 · Specialised workshop

WebGIS: OGC & OpenLayers

A specialist workshop: from GIS concepts and coordinate systems to OGC services, interactive maps with OpenLayers, SLD styling and a complete WebGIS stack.

LevelSpecialised workshop

TopicsGIS · OGC · OpenLayers · SLD

PrerequisiteBasic JavaScript

Length65 slides · 6 chapters

LanguagePersian

Open the slides Syllabus Download

About this course

New to JavaScript? Start with the beginner course first. JavaScript & TypeScript — Advanced

Who it's for

Front-end developers who want to build web maps with standard OGC services and OpenLayers.

Prerequisites

Basic JavaScript and familiarity with how the web works. No prior GIS knowledge is assumed.

How you learn

Concept → diagram → sample code → try it against a local GeoServer and PostGIS.

By the end you can

Explain vector and raster data, CRS and projections

Describe the parts of a WebGIS and the path of a map request

Choose between WMS, WMTS, WFS, WCS and OGC API

Build an interactive map with OpenLayers

Style layers with SLD, on the server

Make the map fast and debug it when it misbehaves

Tools & environment

Docker ComposeBrings the whole workshop environment up with one command.

PostGISA ready spatial database from the postgis/postgis image.

GeoServerPublishes your data as WMS, WMTS and WFS.

GDAL / OGRImports data into the database.

QGISA lab for designing styles and exporting SLD.

Slides

Read all 65 slides right here. Use the arrow keys, swipe on a phone, or jump straight to a topic from the syllabus below. The slide text is in Persian.

1 / 65

Syllabus

Every slide, grouped by part. Click any row to open that slide.

00 Start here 1 slides

3در این دوره چه یاد می‌گیریم؟

01 GIS fundamentals 12 slides

Vector و RasterCRS و پروجکشنUTMGeoJSONتحلیل مکانی

5GIS چیست؟6داده‌ی مکانی دو شکل دارد: Vector و Raster 7زمین را چطور مختصات‌دهی می‌کنیم؟8سیستم مختصات (CRS) و پروجکشن چیست؟9پروجکشن یعنی صاف‌کردن کره روی کاغذ 10پروجکشن‌ها را با هم مقایسه کنیم 11چرا قطب‌ها در نقشه‌ی وب بزرگ‌اند؟12UTM؛ سیستم مختصات دقیق برای اندازه‌گیری 13سیستم مختصات دلخواه در OpenLayers 14GeoJSON؛ قالب ساده‌ی داده‌ی مکانی 15تحلیل مکانی چه کارهایی می‌کند؟16رابطه‌ی دو شکل با هم چیست؟

02 WebGIS architecture 8 slides

Client، Server و DatabaseDockerGDAL/OGRGeoServerPostGIS

18بخش‌های یک برنامه‌ی WebGIS 19وقتی نقشه باز می‌شود چه اتفاقی می‌افتد؟20ابزارهای معروف GIS 21راه‌اندازی سریع محیط کار با Docker 22وارد کردن داده‌ها با GDAL/OGR 23منابع داده‌ی باز برای تمرین 24داده را چطور در GeoServer منتشر کنیم؟25پرسیدن سؤال مکانی از PostGIS

03 OGC standards 9 slides

WMSWMTSWFSWCSOGC API

27OGC چیست؟28سرویس‌های OGC؛ قدیمی و جدید 29WMS: گرفتن تصویر نقشه (GetMap)30WMS: پرسیدن اطلاعات از نقشه 31WMTS: نقشه به‌صورت کاشی‌های آماده 32WFS: گرفتن خود داده، نه تصویر 33WCS: گرفتن داده‌ی رستری خام 34OGC API؛ نسل جدید سرویس‌ها 35کدام سرویس را کی استفاده کنیم؟

04 OpenLayers 12 slides

نقشه و لایهWMS و WMTSVector و استایلVector Tileتعامل‌ها

37OpenLayers چیست؟38اجزای OpenLayers چطور به هم وصل‌اند؟39اولین نقشه با OpenLayers 40نمایش لایه‌ی WMS در OpenLayers 41WMTS در OpenLayers 42داده‌ی برداری و استایل در OpenLayers 43Vector Tile؛ کاشی‌های برداری 44OpenLayers در React و Angular 45کشیدن شکل روی نقشه و ذخیره‌ی آن 46وقتی نقطه‌ها خیلی زیادند 47کاربر چطور با نقشه کار کند؟48با کلیک، اطلاعات لایه را نشان بدهیم

05 SLD & styling 8 slides

ساختار SLDRule و FilterSymbolizerاستایل دسته‌ای

50SLD چیست و کجا به کار می‌رود؟51ساختار فایل SLD 52ساختار کامل یک فایل SLD 53مثال: رنگ‌کردن چندضلعی‌ها 54قبل و بعد از استایل‌دهی 55نمادسازها (Symbolizer)56رنگ‌های متفاوت برای گروه‌های متفاوت 57استایل در سرور (SLD) یا در مرورگر؟

06 Integration 6 slides

نمای کاملعملکردGeocoding و RoutingQGISعیب‌یابی

59نمای کامل یک WebGIS 60چطور نقشه را سریع کنیم؟61پیداکردن آدرس و مسیر 62QGIS چه کمکی به برنامه‌نویس می‌کند؟63نقشه درست نمایش داده نمی‌شود؟64پروژه‌های تمرینی پیشنهادی

Practice projects

Six suggested projects to build

1 · Stations map

Show GeoJSON with a popup

2 · WMS layer

Display it and click with GetFeatureInfo

3 · Draw an area

Save it in PostGIS

4 · Vehicle tracking

Update the position every few seconds

5 · Nearest service

Find the nearest centre with ST_DWithin

6 · Vector basemap

Vector Tile styled in the browser

Open the project slide

Learning path

GIS & CRS basicsData models, coordinate systems and projections.

OGC standardsWMS, WMTS, WFS, WCS and OGC API.

OpenLayersMaps, layers and interactions.

GeoServer & SLDPublish services and style them.

PostGIS & spatial databasesStore and query spatial data.

Deployment & performanceTile caching, indexes, clustering.

Download

The PDF version will be added soon.

Course material is shared for personal learning. If you share or reuse it, please credit the source.