آموزش کدنویسی Web GIS در گروه زیر در حال برگزاری است:
#html
#css
#esriMAP
#javascript
https://t.me/joinchat/GeJF0k-I-K1wQDc4YGmUOw
این پست را برای دوستان خود ارسال کنید .
🆔 @GITAnet|باشگاه فناوران اطلاعات مکانی
#پست_موقت
#html
#css
#esriMAP
#javascript
https://t.me/joinchat/GeJF0k-I-K1wQDc4YGmUOw
این پست را برای دوستان خود ارسال کنید .
🆔 @GITAnet|باشگاه فناوران اطلاعات مکانی
#پست_موقت
🔴 Leaflet و OpenLayers: دو کتابخانه محبوب برای ساخت نقشه‌های وب
Leaflet و OpenLayers دو کتابخانه JavaScript منبع باز هستند که برای ساخت نقشه‌های وب تعاملی استفاده می‌شوند. هر دو کتابخانه دارای ویژگی‌ها و مزایای خاص خود هستند که آنها را برای موارد استفاده مختلف مناسب می‌کند.
🌎 Leaflet
مزایا:
سبک و سریع
آسان برای یادگیری و استفاده
جامعه کاربری بزرگ و فعال
مجموعه گسترده‌ای از افزونه‌ها موجود است
معایب:
ویژگی‌های کمتری نسبت به OpenLayers دارد
برای برنامه‌های پیچیده‌تر GIS# مناسب نیست
مثال Leaflet:
یک نقشه ساده Leaflet# که یک مارکر را در پاریس نشان می‌دهد:
HTML
🌎 #OpenLayers
مزایا:
قدرتمند و دارای ویژگی‌های غنی
پشتیبانی از انواع مختلف داده‌های مکانی
مناسب برای برنامه‌های پیچیده‌تر GIS
معایب:
یادگیری و استفاده از آن دشوارتر است
جامعه کاربری کوچکتر از Leaflet
افزونه‌های کمتری در دسترس است
مثال OpenLayers#:
یک نقشه OpenLayers که یک لایه GeoJSON را از کشورها نمایش می‌دهد:
#HTML
سوالی دارید توی کامنت ها بنویسید.
🆔 @GITAnet|باشگاه فناوران اطلاعات مکانی
Leaflet و OpenLayers دو کتابخانه JavaScript منبع باز هستند که برای ساخت نقشه‌های وب تعاملی استفاده می‌شوند. هر دو کتابخانه دارای ویژگی‌ها و مزایای خاص خود هستند که آنها را برای موارد استفاده مختلف مناسب می‌کند.
🌎 Leaflet
مزایا:
سبک و سریع
آسان برای یادگیری و استفاده
جامعه کاربری بزرگ و فعال
مجموعه گسترده‌ای از افزونه‌ها موجود است
معایب:
ویژگی‌های کمتری نسبت به OpenLayers دارد
برای برنامه‌های پیچیده‌تر GIS# مناسب نیست
مثال Leaflet:
یک نقشه ساده Leaflet# که یک مارکر را در پاریس نشان می‌دهد:
HTML
<!DOCTYPE html> <html> <head> <title>Leaflet Example</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([48.8566, 2.3522], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var marker = L.marker([48.8566, 2.3522]).addTo(map); marker.bindPopup("پاریس").openPopup(); </script> </body> </html> 🌎 #OpenLayers
مزایا:
قدرتمند و دارای ویژگی‌های غنی
پشتیبانی از انواع مختلف داده‌های مکانی
مناسب برای برنامه‌های پیچیده‌تر GIS
معایب:
یادگیری و استفاده از آن دشوارتر است
جامعه کاربری کوچکتر از Leaflet
افزونه‌های کمتری در دسترس است
مثال OpenLayers#:
یک نقشه OpenLayers که یک لایه GeoJSON را از کشورها نمایش می‌دهد:
#HTML
<!DOCTYPE html> <html> <head> <title>OpenLayers Example</title> <script src="https://openlayers.org/en/v6.16.1/build/ol.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v6.16.1/build/ol.css" /> </head> <body> <div id="map"></div> <script> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }), new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://raw.githubusercontent.com/openlayers/ol3-examples/master/data/countries.geojson' }), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#333', width: 2 }), fill: new ol.style.Fill({ color: '#ccc' }) }) }) ] }); </script> </body> </html> سوالی دارید توی کامنت ها بنویسید.
🆔 @GITAnet|باشگاه فناوران اطلاعات مکانی
OpenStreetMap
Copyright and License
OpenStreetMap is a map of the world, created by people like you and free to use under an open license.
باشگاه فناوران اطلاعات مکانی
https://www.youtube.com/watch?v=DqzJ6pwSwWk برای شروع... 🆔 @GITAnet|باشگاه فناوران اطلاعات مکانی
YouTube
Simple Web Map for Openlayers using Html and JavaScript.
The video Shows how to create a simple web map using openlayers.
#website #webmapping #analysis #spatial #html #javascript #vite #framework #gis #advanced #kilaini #data #mapping #map #openlayers #simple #css #react #reactjs #reactjstutorial #arnold #mutegeki…
#website #webmapping #analysis #spatial #html #javascript #vite #framework #gis #advanced #kilaini #data #mapping #map #openlayers #simple #css #react #reactjs #reactjstutorial #arnold #mutegeki…