Daha çox

Leaflet-də L.map obyektindən bütün kirəmitləri əldə edin


Bir L.map obyektindən göstərilən bütün plitələr üçün ən yaxşı yol nədir?

Ənənəvi olaraq, daha sonra daxil ola biləcəyim bir obyektdə fayans layları yığmışam, belə ki:

var mapLayers = {} əgər (! mapLayers [mapId]) {mapLayers [mapId] = L.tileLayer (url); } map.addLayer (mapLayers [mapId]);

Bu kifayət qədər yaxşı işləyir, amma bununla bağlı problemlərlə üzləşməyə davam edirəm və bu məlumatları xəritə obyektində saxladıqda yaratdığım bir obyektdə saxlamaq pis bir təcrübə kimi görünür.

Daxili olaraq, xəritə obyekti kirəmitləri saxlayırxəritə._layers, digər təbəqələrlə birlikdə (ızgaralar, xüsusiyyət təbəqələri ...). Bəzi daxili broşura sxemlərinə görə indekslənirlər, buna görə girişin ən yaxşı nöqtəsi olub olmadığına əmin olun.

Broşuranın istifadəsi 0.7.3


Cəhd edinXəritəsinifeveryLayer ()metod:

var layer = []; map.eachLayer (function (layer) {if (layer instanceof L.TileLayer) layer.push (layer);});

Mürəkkəb hallar üçün öz qat dəyişdiricinizi yazacaqsınız və bununla bağlı bir şey görmürəm. Leaflet kitabxanası interaktiv xəritə üçün minimum əsas funksiyalar təmin etməyi hədəfləyir. Daha böyük, hamısı bir arada həllinə ehtiyacınız varsa, OpenLayers'ı sınayın.


Fəsil 6 Vərəqə

İndi veb texnologiyalarının əsaslarını əhatə etdiyimiz üçün bu kitabın əsas mövzusuna keçirik: veb xəritələşdirmə. Bu fəsil və növbəti iki hissə (Fəsillər 6-8) təqdim olunur Vərəqə, interaktiv veb xəritələr yaratmaq üçün istifadə olunan bir JavaScript kitabxanası. Leaflet istifadə edərək yalnız iki və ya üç JavaScript ifadəsini istifadə edərək sadə bir xəritə yarada və ya yüzlərlə kod xəttindən istifadə edərək kompleks bir xəritə qura bilərsiniz.

Bu fəsildə veb səhifəmizdə bir vərəqə veb xəritəsini necə işə salacağını və xəritəyə bir neçə növ qat əlavə etməyi öyrənəcəyik: çini təbəqələri (Bölmə 6.5.11) və nöqtə işarələri kimi sadə formalar (Bölmə 6.6.) 2), sətirlər (Bölmə 6.6.3) və çoxbucaqlar (Bölmə 6.6.4). Ayrıca, təbəqələrimiz üçün interaktiv popuplar (Bölmə 6.7) və xəritəmizin mətn təsviri olan bir panel (Bölmə 6.8) əlavə etməyi öyrənəcəyik. Nəhayət, xəritə hadisələrini - veb xəritə ilə əlaqəli brauzer hadisələrini təqdim edəcəyik (Bölmə 6.9).

Növbəti iki Fəsildə 7-8-də bir az daha inkişaf etmiş Vərəqə funksiyasını öyrənəcəyik. Fəsil 7-də xarici GeoJSON sənədlərindən gələn kompleks şəkillər əlavə etməyi öyrənəcəyik. Sonra 8-ci fəsildə veb xəritəmizdə simbologiya və interaktiv davranışı necə təyin edəcəyimizi öyrənəcəyik.


Uzaqdan Algılama nədir?

CİS sahəsində uzaqdan zondlama peyklərə quraşdırılmış və ya yer üzündə ölçmələr apara bilmək üçün təyyarələrə və ya pilotsuz təyyarələrə quraşdırılmış sensorlardan istifadə edir. Quru bitki örtüyü və atmosferdəki kimyəvi maddələrdən tutmuş küləyin sürətinə və elektromaqnit şüalanmasına qədər müxtəlif coğrafi xüsusiyyətlərin daha dərindən başa düşülməsi üçün manipulyasiya və analiz olunan şəkillər toplayırlar. 1,2

Uzaqdan zondlama mümkündür, çünki hər bir cismin öz spektral imzası var, bu da elektromaqnit spektri (EMS) daxilində müəyyən bir dalğa uzunluğunda əks olunan enerji miqdarıdır. Bu əks olunan enerji obyektin kimyəvi tərkibindən asılıdır.


İcma xəritəsi

Gənc tələbələri bu icma xəritəsi ilə yerlərin təsviri kimi xəritələr anlayışına təqdim edin.

İlkin ibtidai sinif şagirdləri ümumiyyətlə bu xəritədə görünən perspektivdən istifadə edərək dünyaya baxışlarını çəkirlər. Tələbələr şəxsiyyət, yer və simvollar kimi məkan anlayışlarını öyrənməyə başlamaq üçün bu perspektivli xəritələrdən istifadə edə bilərlər. Onlara bir icma kimi tanış yerlərin xəritələri ilə məşq etmək imkanları verilməlidir. Bu yaşda simvollar real aləmdəki bir obyekti və ya yeri təmsil etməli və şagirdlər üçün tanınan bir simvol olmalıdır. Bu yaşda əlaqəsiz simvollar yaxşı başa düşülmür. Təqdim olunan icma xəritəsini tələbələrlə araşdırmaq üçün aşağıdakı mətni və istəkləri istifadə edin.

Bir icma, insanların birlikdə yaşadıqları, işlədikləri və əyləndikləri bir yerdir. Bir icmanın xəritəsinə baxın. Burada yaşayış və iş sahələri və cəmiyyətdəki bəzi əsas küçələr və binalar göstərilir. Bura simvolları olan bir xəritə açarı daxildir.

İcma binaları cəmiyyətdə yaşayan hər kəsə xidmət göstərir. Məsələn, hər kəs kitabxanadan kitab götürə bilər. Kitabxana üçün simvolu tapmaq üçün xəritə düyməsinə baxın. Xəritədə kitabxananı tapın. Xəritədə başqa hansı yerlər cəmiyyət üçün xidmətlər göstərir?

  • Çox evi olan iki küçənin adını çəkin.
  • Kağız torba simvolu nə deməkdir?
  • Bu icmanın bir bankı var. Xəritədə bankı tapın.
  • Poçt şöbəsini tapın. Harada yerləşir?
  • Polis bölməsini tapın. Hansı binaların arasında yerləşir?
  • Poçt şöbəsindən təsərrüfata getmək üçün hansı istiqamətə gedərdiniz?
  • Sobel, David. Uşaqlarla Xəritəçəkmə: İbtidai illər üçün yer təhsili. Portsmouth, NH: Heinemann, 1998.

Media kreditləri

Səs, illüstrasiyalar, fotoşəkillər və videolar, media krediti olan başqa bir səhifəyə keçid edən promosyon şəkilləri xaricində media varlığının altına yazılır. Medianın Hüquq Sahibi, borc verilən şəxs və ya qrupdur.

Yazıçı

Christina Riska Simmons, National Geographic Society

Redaktor

Kopyalanan

Jessica Shea, National Geographic Society

Son Yenilənmə

İstifadəçi icazələri haqqında məlumat üçün, Xidmət Şərtlərimizi oxuyun. Layihənizdə və ya sinif təqdimatınızda veb saytımızda bir şeyin necə alınacağına dair suallarınız varsa, müəlliminizlə əlaqə saxlayın. Tercih olunan formatı ən yaxşı şəkildə biləcəklər. Onlara müraciət etdikdə səhifə adı, URL və mənbəyə daxil olduğunuz tarixə ehtiyacınız olacaq.

Media

Bir media varlığı yüklənə bilərsə, media görüntüləyicisinin küncündə bir yükləmə düyməsi görünür. Heç bir düymə görünmürsə, medianı yükləyə və saxlaya bilməzsiniz.

Bu səhifədəki mətn yazdırılabilir və Xidmət Şərtlərimizə uyğun olaraq istifadə edilə bilər.

İnteraktivlər

Bu səhifədəki istənilən interaktivlər yalnız veb saytımızı ziyarət edərkən səsləndirilə bilər. İnteraktivləri yükləyə bilməzsiniz.

Əlaqəli mənbələr

Xəritələrin təfsiri

Xəritələr yalnız bir yerdən başqa yerə çatmağımıza kömək etmir. Bunlar Yer üzünü və fiziki proseslərinin və xüsusiyyətlərinin insan fəaliyyətini necə tərsləşdirə biləcəyini anlamağımıza kömək edir. Məlumat yerləri ilə təşkil edildikdə, sistemlərin necə işlədiyini və bir-biri ilə qarşılıqlı əlaqəsini daha yaxşı başa düşməyimizə imkan verən coğrafi nümunələri görə bilərik. Minlərlə ildir yerləri və insanları təsvir edən xəritələrin mahiyyəti və əhəmiyyətini dərindən öyrənmək üçün bu kolleksiyadan istifadə edin.

Park xəritəsi

Gənc tələbələri bu park xəritəsi ilə yerlərin təsviri kimi xəritələr anlayışına təqdim edin.

Tanış yerlərin xəritələri

Kiçik yaşlı uşaqları bu icma xəritələri ilə yerlərin nümayişi kimi xəritələr konsepsiyasına təqdim edin.

Qonşuluq xəritəsi

Gənc tələbələri bu məhəllə xəritəsi ilə yerlərin təsviri kimi xəritələr anlayışına təqdim edin.

Əlaqəli mənbələr

Xəritələrin təfsiri

Xəritələr yalnız bir yerdən başqa yerə çatmağımıza kömək etmir. Bunlar Yer üzünü və fiziki proseslərinin və xüsusiyyətlərinin insan fəaliyyətini necə tərsləşdirə biləcəyini anlamağımıza kömək edir. Məlumat yerləri ilə təşkil edildikdə, sistemlərin necə işlədiyini və bir-biri ilə qarşılıqlı əlaqəsini daha yaxşı başa düşməyimizə imkan verən coğrafi nümunələri görə bilərik. Minlərlə ildir yerləri və insanları təsvir edən xəritələrin mahiyyəti və əhəmiyyətini dərindən öyrənmək üçün bu kolleksiyadan istifadə edin.

Park xəritəsi

Gənc tələbələri bu park xəritəsi ilə yerlərin təsviri kimi xəritələr anlayışına təqdim edin.

Tanış yerlərin xəritələri

Kiçik yaşlı uşaqları bu icma xəritələri ilə yerlərin nümayişi kimi xəritələr konsepsiyasına təqdim edin.

Qonşuluq xəritəsi

Gənc tələbələri bu məhəllə xəritəsi ilə yerlərin təsviri kimi xəritələr anlayışına təqdim edin.


Yaradılış

Bu funksiyaları GeographicPostingsReference obyektləri yaratmaq üçün istifadə edə bilərsiniz:

readgeoraster & # 8212 Bir raster məlumat faylını bir sıra və istinad obyekti kimi idxal et.

georefpostings & # 8212 Rastrın enlem və boylam hüdudlarını və ya rasterin ölçüsünü, ya da yazıların arasını göstərərək coğrafi bir raster istinad obyekti yaradın.

georasterref & # 8212 Bir dünya faylını coğrafi raster istinad obyektinə çevir.

refmatToGeoRasterReference & # 8212 Bir referans matrisini coğrafi raster istinad obyektinə çevirin.


Nyampir / a-web-maps101.md

Kolumbiya Milli Kitabxanasının 2. Rəqəmsal Kitab Həftəsinə natiq olaraq dəvət etdim və rəqəmsal Xəritəçəkmə alətləri mövzusunda seminar verdim. Bu seminarı bölüşməyin faydalı olacağını düşündüm, çünki bu gün rəqəmsal kartoqrafiyanı çox əlçatan edən bir çox fərqli proses və vasitəni əhatə edir. Öz zəhmli xəritələrinizi hazırlaya bilmək üçün müxtəlif pulsuz veb Xəritəçəkmə alətləri ilə işləmək üçün bir başlanğıcdır.

## TLDR Bunu edəcəksiniz. Bu dərslik rəqəmləşdirilmiş bir xəritənizin və üstünü örtmək istədiyiniz bəzi məlumatlarınızın olduğunu düşünür. Əhatə olunan ümumi addımlar bunlardır:

  1. veb plitələr yaradıla bilməsi üçün skan edilmiş xəritəyə coğrafi istinad
  2. üst-üstə qoymaq üçün GeoJSON məlumatları yaradır
  3. xüsusi baza xəritəsi yaratmaq (istinad / indiki gün kimi xidmət etmək üçün)
  4. bütün aktivləri interaktiv veb səhifəyə birləşdirmək

Qeyd: Bu təlimatda Mozilla Firefox və ya Google Chrome istifadə etdiyiniz düşünülür. Geliştirici konsolu ilə oynayacaqsınız və çox brauzer təlimatım yoxdur.

##Gəlin başlayaq! Bunu etmək istədiyimiz budur. Kolumbiya Milli Kitabxanasında mövcud olan 1891-ci il Bogota xəritəsidir (linkdə Flash Player tələb olunur) 1888-ci il tarixli Boqota Şəhər Kataloqundakı bəzi məlumatlarla izah edilmişdir.

### 1) Coğrafi istinad Xəritəni taradıqdan sonra ilk addım, pikselləri və təmsil etdikləri coğrafi yer arasında bir bərabərlik yaratmaq üçün ona coğrafi məlumatlar əlavə etməkdir. Buna coğrafi referans deyilir. Bu proses skan edilmiş şəkli təhrif edəcəkdir:

Orijinal tarama (əlbəttə kiçiltilmişdir)

… OpenStreetMap və ya Google Maps kimi əksər veb Xəritəçəkmə layihələrində istifadə olunan Mercator proyeksiyasına uyğun gəlmək üçün:

Mercator proyeksiyasında coğrafi istinad taraması

Təhrifin miqdarı tədqiqatın keyfiyyətindən, qorunma vəziyyətindən və xəritənin orijinal proyeksiyasından asılı olacaq. Soruşa bilərsiniz: bu sehrli şəkildə necə baş verdi? Şəkillərə istinad etmək imkanı verən ticarət və açıq mənbəli bir proqram var, ancaq bu təlimatın mahiyyəti bunların hamısını edir veb brauzerinizdən başqa heç bir proqram quraşdırmadan. Daxil edin: Map Warper! Map Warper, skan edilmiş xəritələrinizi yükləməyinizə imkan verən və onlara coğrafi istinad (və ya coğrafi dildə "düzəltmək") üçün sadə bir interfeys təmin edən bir veb vasitədir. Skan edilmiş xəritənin (solda) hansı hissəsinin Mercator proyeksiyasının hansı hissəsinə uyğun olduğunu izah etmək sizə aşağı gəlir: (sağda):

Map Warper-də bölünmüş görünüş düzəltmə interfeysi

Şəkildəki sancaqlara diqqət yetirin. Hər bir pin bir nömrəyə malikdir və eyni pin hər iki baxışda mövcuddur. Onlardan taramada Şimalın sola, Şərq isə yuxarıya doğru olduğunu söyləyə bilərsiniz. Daha çox sancaq əlavə etsəniz, istinad daha dəqiq olacaq, lakin son görüntü nəsli daha yavaş olacaq. Bununla birlikdə, görüntü yaratmaq yalnız bir dəfə baş verir, buna görə çox narahat olmayacağam. Daha çox əlavə etmək istədiyiniz bir məsələdir. Bu dərslikdəki xəritədə 101 sancaq var.

Bu prosesdə son bir fikir, təhrifdən sonra yüksək keyfiyyətli bir coğrafi istinad şəkli aldığınızdan əmin olmaqdır. Orijinal görüntünün təhrif edilməsi prosesinə resampling [^ resampling] deyilir. Map Warper-in Ətraflı seçimlərində metodu keyfiyyətsiz, lakin sürətli Ən yaxın qonşudan yüksək keyfiyyətli, lakin yavaş Cubic Spline-a təyin edə bilərsiniz:

Yenidənqurma Metodu seçimində "Cubic Spline" seçin

Son xəritəyə burada baxa bilərsiniz. İxrac nişanında yüksək qətnamə varlıqlarını da yükləyə bilərsiniz. Ancaq düşünürəm əsas perk Map Warper-dən əldə etdiyiniz plitələr. Burada gördüyünüz URL şablonudur:

Çini URL-ni "İxrac et" sekmesinde tapa bilərsiniz

Bu URL-yə ehtiyacınız olacaq! Təhlükəsiz bir yerdə saxlayın. Map Warper, coğrafi istinad şəklini istifadə edərək fərqli zoom səviyyələrində və koordinatlarda kvadrat xəritələr düzəltmək üçün istifadə edən bir kafel yaradan mühərrikə malikdir ki, istifadə edərkən interaktiv xəritənin yalnız lazımi hissələri görünsün [^ maptiles]. Bu bir nümunə çini:

Veb xəritələri bunların milyonlarından ibarətdir

### 2) Məlumatların çıxarılması Xəritəimiz var. İndi bunun üzərində hansı məlumatları göstərəcəyini tapmaq istəyirik. Bizim nümunəmiz bu 1888-ci ildə Kolumbiyanın paytaxtı Boqota şəhər kataloqu istifadə edir. Bu qovluq məlumatla zəngindir, on minlərlə ad (hər biri ünvanı və məşğuliyyəti ilə), onlarla fərqli peşə (səhifə 4-də təsvir olunur) və reklamları (bir çox mağaza ünvanı və sahibinin adları ilə birlikdə) ehtiva edir.

Dizin XIX əsrin sonlarında Kolumbiyadakı həyatı maraqlı bir şəkildə təqdim edir: hüquqşünaslar, fotoqraflar və mühasiblər yəhərçilərlə və dəmirçilərlə səhifələr paylaşırlar. Darıxdırıcı yoldan keçdim və o zaman oturan prezident kimi dövrün tanınmış siyasətçilərini axtardım (səhifə 222, ikinci sütunda əvvəl). Mövcud siyahıda yeddi nəfər var: dörd prezident, vitse-prezident, nazir və prezident vəzifəsini icra edən [^ xəbərdarlıq]. Siyahıya aşağıdakılar daxildir:

  • ad
  • ofis (Kolumbiya icra hakimiyyətində olan ən yüksək ofis)
  • müddət
  • səhifə (qovluqda göründüyü yerdə)
  • peşə (qovluqda göstərildiyi kimi)
  • ünvan
  • Wikimedia Commons foto URL
  • enlem, boylam (bu addımda dəyişdirəcəyimiz Boqota şəhərinin mərkəzinə qoyulmuş yer tutucu)

Daha maraqlı və ya faydalı hesab etdiyiniz digər məlumatlardan öz siyahınızı yarada bilərsiniz. Enlem ve boylam sütunlarını daxil etdiyinizə əmin olun və vergüllə ayrılmış siyahı kimi qeyd edin.

#### GeoJSON İndiyə qədər məlumatlar vergüllə ayrılmış bir siyahıda yer alır, lakin veb Xəritəçəkmə vasitələri ümumiyyətlə GeoJSON standartını istifadə edir. GeoJSON vebdə məlumatların strukturlaşdırılmasının ən populyar yollarından biri olan JSON-a əsaslanır. GeoJSON coğrafi məlumatları təsvir etmək üçün "xüsusiyyətlər" anlayışından istifadə edir. Bu xüsusiyyətlər nöqtələr (indiki vəziyyətimiz kimi) və ya xətlər, çoxsaylı və çoxbucaqlılar kimi daha mürəkkəb həndəsələr ola bilər. Hər bir xüsusiyyət, həndəsəsi (nöqtə, xətt, çoxbucağın özü) ilə birlikdə xüsusiyyətləri ilə əlaqələndirmək istədiyiniz əlavə məlumatdır (bizim vəziyyətimizdə bir şəxsin adı, ünvanı, fotoşəkili və s.). Məsələn [^ GeoJSON]:

Elektron cədvəlimizi GeoJSON obyektinə çevirməliyik və daha sonra yer tutucusu enini və uzunluq dəyərlərini müvafiq dəyərlərə yeniləməyimiz lazımdır. Bunları anlamağımıza kömək etmək üçün xəritənin özündən istifadə edəcəyik. Asanlıqla idarə edə biləcəyimiz GeoJSON yaratmağımıza imkan verən bir alətə ehtiyacımız var.

GeoJSON.io-ya daxil olun! Bu "xəritələr yaratmaq, görüntüləmək və paylaşmaq üçün sürətli, sadə bir vasitədir". GeoJSON.io, ehtiyac duyduğumuz GeoJSON-u yaratmaq üçün istifadə edə biləcəyimiz bu uyğundur.

Davam edin və GeoJSON.io-nu yeni bir brauzer pəncərəsində açın. defolt xəritəni tam böyütdükdə görəcəksiniz. İndi bir az hack etmək lazımdır. Xəritədə bir yerə sağ vurun və Elementi yoxla seçin:

Sağ basın → Elementi yoxlayın

Bu, baxdığınız səhifənin kodunu (bu halda, xəritə interfeysi) nəzərdən keçirə və dəyişdirə biləcəyimiz inkişaf etmiş bir inkişafçı görünüşü açır. GeoJSON.io, göstərilən xəritəni idarə etməyə imkan verən bir proqramlaşdırma interfeysi (API) daxildir. Bu saytın özəyi, "Mobil Dostluq İnteraktiv Xəritələr üçün Açıq Mənbəli JavaScript Kitabxanası" olan Leaflet-in üstündə qurulmuş MapBoxJSdir. Hər ikisini də qeyd edirəm, çünki əksəriyyətində onlardan birində işləyən digərində işləyir (et qərar vermədən əvvəl sənədləri oxuyun!) və mən MapBoxJS əvəzinə Leaflet olaraq istinad edəcəm.

Konsol sekmesinde biraz mətn və alt hissədə JavaScript kodunu icra edə biləcəyiniz bir kursor görəcəksiniz. GeoJSON.io saytının yaradıcısından bəzi şərhləri və yeni JavaScript əmrlərini yaza biləcəyiniz bir sıra görəcəksiniz. Bunu həmin əraziyə yazın və ENTER düyməsini basın (aşağıdakı animasiya GIF-ə baxın):

Bu, xəritəni 1891-ci il xəritəsinin əhatə etdiyi ərazidə, Kolumbiya, Boqota mərkəzləşdirəcək və böyüdəcəkdir. İndi bunu yazın:

... və ENTER düyməsini basın. Bu, kafel qatını özü əlavə edəcəkdir. Kod xəttinə diqqət yetirin addım 1-də kopyaladığınız URL daxildir. Son nəticə belə bir şeyə bənzəyir:

GeoJSON.io-nun sürətli bir "hack"

İndi inkişaf pəncərəsini bağlaya bilərsiniz (yox brauzer pəncərəsi!).

Qeyd: GeoJSON.io-nu hər yüklədiyiniz zaman bu kodu yenidən tətbiq etməlisiniz, çünki konsol vasitəsilə edilən dəyişikliklərə qənaət etmir. Sən bacarmaq daxil olmaqla xəritəyə əlavə etdiyiniz məlumatları qeyd edin.

#### GeoJSON.io-ya məlumat əlavə etmək İndi xəritənin bu dəyişdirilmiş versiyasını CSV prezidentlərinin siyahısını düzgün şəkildə coğrafi olaraq tapmaq üçün əsas kimi istifadə edəcəyik.

Xəritədə yüklədiyiniz CSV sənədini sürükləyin:

GeoJSON.io-da sehr çəkin və buraxın

Verilənlərin dərhal GeoJSON-a (sağ bölmə) necə çevrildiyini və xəritəni böyüdərək hər bir prezidenti təmsil edən nöqtələri (sol bölmə) göstərdiyini görəcəksiniz. Yeddi xüsusiyyətin idxal olunduğunu göstərən kiçik bir yaşıl mesajı (yuxarı solda) görə bilərsiniz.

Ancaq 1891 xəritəsi yox olur! Narahat olma. Bu yalnız xəritənin "yerə çox yaxın" şəkildə böyüdülməsi və kafel URL şablonunda bu səviyyəyə qədər şəkillərin olmaması deməkdir. Bir az kiçikləşdirin və 1891 xəritəsinin yenidən göründüyünü görəcəksiniz.

#### Nöqtələrin ətrafına köçürülməsi CSV-dəki nöqtələrin hamısı Bogotá Plaza de Bolívar-da eyni nöqtədə bir-birinin üstündə coğrafi vəziyyətdədir. Onları lazımi yerə köçürməliyik. Boz sancağı tıklasanız, ən üst hissə üçün əlavə məlumatları görəcəksiniz (General Rafael Reyes). O zaman ünvanı 50, Calle 16 (50 16th Street) idi. Xəritədə həmin ünvanı tapmaq lazımdır.

Ünvanı tapmaq nisbətən asan olacaq, çünki hər blokun başlanğıc və bitiş ünvan nömrələri künclərində yazılmışdır. "Carrera" (şaquli iş küçələri) nömrələrinin şimala doğru tək, şərqə cüt ədədlərlə, "Calle" (üfüqi-iş küçələrinə) saylarına görə cənub və cüt rəqəmlərə görə qərbə doğru artdıqlarını görəcəksiniz:

Nöqtəni müəyyən bir blokda künclər arasındakı təxmini yerə yerləşdirəcəyik. Bunu etmək üçün işarəni vuraraq redaktə rejimini aktivləşdirin. Sancaqlar çəhrayı bir kontura sahib olacaq və onları gəzdirə bilərsiniz. Sancaqları istədiyiniz yerə qoyun və dəyişiklikləri etmək üçün "Saxla" düyməsini basın:

Bəzi çətin ünvanlar var, amma bu tapşırıq olduqca xoş ola bilər, çünki sözün əsl mənasında 1891-ci ildə Boqota-da itmisən. Bu xəritənin maraqlı tərəfi hökumət binalarının Kolumbiya bayrağı ilə rənglənməsidir. O vaxt oturan prezident Rafael Núñez Moledo'yu yerləşdirdiyiniz zaman onun ünvanının bayraq rəngli binalardan biri ilə (Casa de Nariño) uyğun gəldiyini görəcəksiniz.

#### GeoJSON-un qeyd edilməsi İndi interaktiv xəritəmizi yaratmaq üçün istifadə edəcəyimiz son GeoJSON-u yaratmalıyıq. Redaktor menyusundan Save & gt GeoJSON seçin. Map.geojson adlı bir fayl yaradılacaq və kompüterinizə yüklənəcəkdir. Həm də etdiyimi yükləyə bilərsiniz, aldadıcı!

### 3) 2014-cü il üçün xüsusi bir xəritə yaratmaq (istəyə görə) Bu 1891 xəritəsini bugünkü Boqota ilə müqayisə etmək istəyirik ki, zaman keçdikcə işlərin necə dəyişdiyini görə bilək. Əsasən GeoJSON.io-nu yüklədiyiniz kimi bir "baza xəritəsinə" ehtiyacımız var: günümüzün dünyanın (ümid edirəm dəqiq) "düz vanil" küçə xəritəsi. Tamamilə xüsusi bir xəritə yaratmaq üçün standart OpenStreetMap plitələrindən istifadə edə və ya MapBox kimi bir xidmətdən istifadə edə bilərsiniz (MapBox OSM məlumatlarını istifadə edir). MapBox olduqca güclüdür: rəngləri dəyişdirməyə, göstərilənləri (küçələr, binalar, parklar və s.) Fərdiləşdirməyə və hətta peyk görüntülərindən istifadə etməyə imkan verir!

MapBox-da öz xəritənizi necə yaradacağımı izah etməyəcəyəm. Bunu mükəmməl dərsliyinə buraxacağam. İşi bitirdikdən sonra istifadəçi adı.k53dp4io kimi bir şeyə bənzəyən Xəritə ID yazmalısınız. Bütün xəritələrinizi görmək və identifikatoru panoya asanlıqla kopyalamaq üçün MapBox layihələr səhifəsindən istifadə edə bilərsiniz:

QEYD: Xəritənizi özəlləşdirmə prosesindən keçmək istəmirsinizsə, daha sonra bir nümunə MapBox ID istifadə edə bilərsiniz.

İndi interaktiv xəritəmizi yığmaq üçün lazım olan bütün varlıqlarımız var:

  • xəritə məlumatlarını GeoJSON formatında
  • 1891 xəritəsi üçün bir kafel şablonu
  • bir fayans şablonu və ya 2014 xəritə üçün MapBox ID

HTML / JavaScript / CSS kodunu tez bir zamanda yaratmağınıza və sınamağınıza imkan verən bir vasitə olan JSFiddle-da interaktiv xəritəni prototipləşdirəcəyik. İnterfeyslə tanış olmaq üçün bu sürətli təlimə baxın.

JSFiddle-ın dörd əsas bölməsi var:

  • HTML kodu (yuxarı solda)
  • CSS kodu (yuxarı sağda)
  • JavaScript kodu (aşağı solda)
  • Son nəticə (sağ altda)

JSFiddle, hər dəfə "Çalıştır" düyməsini vurduğunuzda üç kod komponentinin nəticəyə yığılması ilə maraqlanır (üstdə mavi çubuq).

#### HTML & amp CSS Bu nümunədə HTML və CSS hissələri vardır çox sadə. Səhifədəki xəritəni və bütün nəzarətlərini əks etdirən düzbucaqlı bir sahəyə ehtiyacımız var.

Xəritənin gedəcəyi bir HTML elementinə ehtiyacımız var. Bunu HTML bölməsinə yazın və ya kopyalayın / yapışdırın:

Bu kodla identifikatoru xəritə olan div təsəvvür elementi yaradırıq və təsəvvür etdiyiniz kimi xəritəni ehtiva edir. İndi elementi "tərtib etməliyik" (genişlik və hündürlük verin və istəsən sərhədlər və digər atributlar verin). Styling CSS ilə idarə olunur. Bunu CSS bölməsinə yazın və ya kopyalayın / yapışdırın:

Bu, identifikatoru xəritədə olan elementə 400 piksel genişlik və yüksəklik tətbiq olunur (# prefiksi CSS-də "id" mənasını verir). Əlbətdə ki, düzbucağı daha böyük edə bilərsiniz (monitorunuz kifayət qədər böyükdürsə) və <> mötərizələr arasında digər atributları tətbiq edə bilərsiniz (məsələn: elementi xəritəsiz görmək istəsəniz, qırmızı fon üçün background-color: # f00), lakin Sadəcə çox sadə saxlamaq istəmişəm.

İndi "Çalıştır" düyməsini basarsanız, çox şey görməyəcəksiniz (elementə arxa plan rəngi və ya haşiyə əlavə etməmisinizsə). İndi lazım olacaq bütün HTML və CSS budur.

#### MapBoxJS əlavə etmək Xəritəni təqdim etmək və interaktiv etmək üçün bəzi xarici aktivlərə və JavaScript-ə ehtiyacımız olacaq. Leaflet və MapBoxJS-dən əvvəl də bəhs etmişdim. Xəritəni təqdim etmək və idarə etmək üçün onlara ehtiyacımız olacaq. Vərəqə MapBoxJS-ə daxil edilmişdir, buna görə sonuncudan narahat olmağımız lazımdır. MapBoxJS iki ayrı sənəddən ibarətdir: JS faylı və CSS faylı. Artıq CSS sənədinin nə etdiyinə dair bir fikriniz var. JavaScript faylı bütün interaktiv Xəritəçəkmə sehrini ehtiva edir. Sözügedən sənədlərin URL-ləri bunlardır (ən son MapBoxJS versiyası olmadığını unutmayın, amma narahat olmayın, işləyəcək):

CSS faylı: http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css

JavaScript faylı: http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js

JSFiddle-da sol sütunda "Xarici qaynaqlar" bölməsini tapın. Bu URL'ləri kopyalamalı və hər birini JavaScript / CSS URI qutusuna yapışdırmalı və + düyməsini basmalısınız. Bunu etdikdən sonra belə bir şey görəcəksiniz:

İki MapBoxJS sənədini əlavə etdikdən sonra "skripka" nız

Bu, JSFiddle-ı növbəti dəfə "Çalıştır" düyməsinə basdıqda və bundan sonra bu faylları yükləməyə məcbur edəcəkdir.

#### Salam xəritə! İndi gözlədiyimiz hissə gəlir! 1891 xəritəsini görə bilmək üçün bir az JavaScript yazaq. Bunu JavaScript bölməsinə yazın:

... və "Çalıştır" düyməsini basın. Görməli olduğunuz şey budur:

Leaflet sayəsində bu ki veb xəritələrlə işləmək asandır.

Qeyd: Leaflet və ya MapBoxJS API-lərinin fərqli aspektləri haqqında burada ətraflı danışmıram. Hər birinin öz dərs və nümunələri var. Bunun əvəzinə bəzi kod parçaları verəcəyəm və etdiklərini səthi izah edəcəyəm. Kopyalayacaqsınız, yapışdıracaqsınız və "Çalıştır" düyməsini vuracaqsınız sehr olacaq [^ sehrli]. Daha sonra daha çox zəhmli şeyləri təkbaşına necə edəcəyinizi anlayacaqsınız.

#### Birdən çox çini dəstini idarə etmək 1891 xəritəsi xaricində xəritənin hamısının ağ olduğunu və bunun yaxşı olduğunu görə bilərsiniz. Çini dəsti URL-də yalnız düzəldilmiş xəritə var və başqa heç nə yoxdur. Müqayisə etmək üçün 2014-cü il bir əlavə plitəyə sahib olmalıyıq (yuxarıdakı 3-cü addımda özünüzü yaratmadığınız təqdirdə bir nümunə MapBox Map ID istifadə edəcəyəm). JS kodunu yenisi ilə əvəzləyəcəyik:

  • xəritə üçün bəzi aidiyyət məlumatları (istədiyiniz zaman faydalıdır, bildiyiniz, xəritədəki atribut məlumatları)
  • 2014 kafel dəsti
  • bir plitəni digərinə dəyişdirməyimizə imkan verəcək bir nəzarət

Bu kod olmalıdır əvvəlki JS-nizi dəyişdirin:

Bu kodu düşündüyünüz kimi görsəniz, əvvəllər etdiyimizə bənzəyir. Əsas fərqlər atributların və MapBox çini dəstlərinin əlavə edilməsidir (xəritə ID vasitəsilə). İdarəetmə özü iki sətirdir: biri kafel dəstlərini saxlaya bilən baseMaps dəyişənini yaratmaq (istədiyiniz qədər çini dəsti əlavə edə bilərsiniz), digəri isə idarəetməni yaratmaq və xəritəyə əlavə etmək. Nəzarətə baxın:

Çini dəstlərini dəyişdirdikdə atributun necə dəyişdiyinə diqqət yetirin

Biz az qalmışıq! İndi məlumatlarımızı göstərməliyik. Leaflet, GeoJSON'u yerli olaraq dəstəklədiyindən bu prosesi olduqca asanlaşdırır. Proses yalnız bir neçə sətirdir, lakin əvvəlcə xəritə zoom funksiyasını silmək map.setView ([4.598056, -74.075833], 14). İndi bu kodu JS bölməsinin altına yapışdırın:

GeoJSON çıxışını GeoJSON.io-dan yüklədiyiniz mətn sənədindən kopyalamalı və 'paste_geojson_here_keep_quotes' gördüyünüz yerə yapışdırmalısınız. Bu sitatları saxladığınızdan əmin olun! Bu sətir aşağıdakı kimi görünməlidir:

Zum funksiyasını map.fitBounds (geolayer.getBounds ()) ilə əvəz etdik. Bu, xəritəni "daha ağıllı" edir: əvəzinə boylam, enlik və yaxınlaşma səviyyəsini əlimizlə yazmaq əvəzinə Leaflet-ə getBounds () ilə təmin edilmiş nöqtələr üçün sərhəd sahəsini hesablamağa və xəritənin fitBounds () funksiyasına bir dəyər kimi ötürməyə imkan veririk. . Voilá, xəritə artıq nöqtədəki bütün nöqtələri göstərmək üçün yaxınlaşdırır. Daha çox xal əlavə etsəniz, sərhədlər avtomatik olaraq dəyişəcəkdir!

Qat keçid cihazına balları və digər hər hansı məlumat örtüklərini də əlavə edə bilərsiniz. Çini dəstləri üçün yaratdığınıza bənzər bir dəyişən yaratmalı və nəzarət yaratma kodunu yeniləməlisiniz:

"Çalıştır" düyməsini vurduğunuzda belə bir şey görəcəksiniz:

Üzərində xüsusi məlumatlar olan xəritəniz

Qeyd: L.control.layers nəzarət yaratma kodunu bir nöqtəyə köçürdüyünüzdən əmin olun GeoJSON-un təhlil olunduğu yerdən aşağıda. Yer təbəqəsinə əlavə etmək üçün geolayer dəyişəninin mövcud olması lazımdır. Ətraflı məlumat üçün JSFiddle nəticəmə baxın.

Digər bir vacib xətt də L.geoJson () funksiyasına sahib olan xəttdir. Bu funksiya map.geojson tərəfindən təsvir olunan bütün xüsusiyyətləri təhlil edir. Leaflet / MapBoxJS, nöqtə xüsusiyyətləri üçün standart mavi pin nişanlarına malikdir, istəsəniz özəlləşdirə bilərsiniz. L.geoJson () həmçinin sancaqlara bir az qarşılıqlı təsir bağlamağımıza imkan verəcəkdir. Hal-hazırda onları tıklamaq heç bir şey etmir.

#### Sancaqları canlandırmaq Sancaqları vurmaq və əlaqələndirdiyimiz məlumatlarla (xüsusiyyət xüsusiyyətlərində) bir popup qutusu göstərmək istəyirik. İki şey etməliyik:

  1. verilmiş bir xüsusiyyət (nöqtə) üçün açılır pencəyi quracaq və təqdim edəcək bir funksiya
  2. bu funksiyanı istifadə etmək üçün L.geoJson () çağırışını dəyişdirin

Leaflet-in bindPopup () qat funksiyası bunu edir: verilmiş təbəqənin yanında mətni olan bir qutu çəkir. Bu mətn HTML ilə qeyd edilə bilər. Bu kodu indiyə qədər olanların altına kopyalayın / yapışdırın:

Bu showPopup () funksiyası bir xüsusiyyət, bütün məlumatları (həndəsə və xüsusiyyətlər) ehtiva edən bir GeoJSON parçasını və bir təbəqəni, Leaflet'in göstərdiyi ilə eyni GeoJSON'u (bizim halda mavi pin) alır. Bu iki parametr L.geoJson () funksiyası tərəfindən avtomatik olaraq ötürülür. showPopup () sonra xüsusiyyətdəki hər bir xassədə (ad, ünvan və s.) nəzərdən keçirir və HTML sətri yaradır. Bu simli açılan üçün işarələnmə kimi istifadə olunur.

ShowPopup'ı heç bir şeyə bağlamadıq. Hazırkı L.geoJson xəttinizi aşağıdakı kimi dəyişdirin:

… Sadəcə əlavə edirsən, geodatadan sonra. Bu, Leaflet-ə GeoJSON-dakı hər bir xüsusiyyət üçün showPopup funksiyasını tətbiq etməsini tələb edir.

Qeyd: GeoJSON'nuzda bir çox xüsusiyyət növü varsa (məsələn: nöqtələr, xətlər və çoxbucaqlar), unutmayın eyni funksiya hamısına tətbiq ediləcəkdir. Məsələn, çoxbucaqlıların hüdudları var, amma nöqtələri yoxdur. Xəritəni sığışdırmağa çalışmadan əvvəl tıklanan xüsusiyyətin hüdudlarının olub olmadığını yoxlamalısınız.

Xəritəni işə salmaq və bir sancağı tıklamaq belə bir şeylə nəticələnəcəkdir:

Bu çox yaxşıdır, amma əslində daha yaxşı olmaz görmək fotoşəkil və bəlkə də həmin səhifə nömrəsini qovluğun özünə bağlayın? Gəlin bunu edək! ShowPopup funksiyasını bu ilə əvəz edin:

Sadəcə döngüdə bir çek əlavə etdik: düymə "Səhifə" -yə bərabərdirsə, qovluğa keçid qururuq və düymə "Foto" -ya bərabərdirsə, bir şəkil etiketi düzəldirik və hündürlüyü 150 pikselə qədər məhdudlaşdırırıq (şəkil çox böyük olduğu təqdirdə) ).

Cənab Núñez indi belə görünür:

#### Hamısını sarma Yeni xəritənizi haradasa yayımlamaq üçün bu üç kod parçasını HTML səhifəsində tərtib etmək istəyəcəksiniz. Narahat olmayın, aşağıda CSS, HTML və JS yapışdırmaq üçün lazımi yerləri olan bir kod parçası verilmişdir. Bütün kodları .html faylı olaraq saxlayın və bir yerə yayımlayın:

Bitmiş xəritəni burada görə bilərsiniz. Brauzer pəncərəsini doldurmaq üçün CSS-də kiçik dəyişikliklər etdim.

Bu təlimatı faydalı tapdığınızı ümid edirəm. Hər hansı bir şərhiniz və ya sualınız varsa, mənə bir xətt atın!

[^ yenidən seçmə]: CD keyfiyyətindən MP3-ə çevrildikdə musiqi ilə baş verənlərə bənzər.

[^ maptiles]: Veb xəritəsi plitələrinin necə işlədiyini daha yaxşı təqdim etmək üçün bu izahatı oxuyun.

[^ xəbərdarlıq]: Sözügedən adları hərtərəfli araşdırmadım, belə ki, onların omonim olması (ehtimal ki) ola bilər.


Leaflet - Coğrafi İnformasiya Sistemlərindəki L.map obyektindən bütün kirəmitləri əldə edin

MDPI tərəfindən nəşr olunan bütün məqalələr açıq giriş lisenziyası altında dərhal dünya səviyyəsində təqdim olunur. Rəqəmlər və cədvəllər daxil olmaqla MDPI tərəfindən dərc olunmuş məqalənin hamısını və ya bir hissəsini yenidən istifadə etmək üçün xüsusi icazə tələb olunmur. Açıq giriş Creative Common CC BY lisenziyası ilə nəşr olunan məqalələr üçün məqalənin istənilən hissəsi orijinal məqalənin açıq şəkildə göstərilməsi şərtilə icazə olmadan yenidən istifadə edilə bilər.

Xüsusiyyət sənədləri, sahədəki yüksək təsir üçün əhəmiyyətli potensiala sahib olan ən inkişaf etmiş tədqiqatları təmsil edir. Bədii məqalələr elmi redaktorların fərdi dəvəti və ya tövsiyəsi ilə təqdim olunur və dərc olunmadan əvvəl həmyaşıdlar tərəfindən nəzərdən keçirilir.

Xüsusiyyət Kağızı ya orijinal bir araşdırma məqaləsi, ya da tez-tez bir neçə texnika və ya yanaşmanı ehtiva edən əhəmiyyətli bir yeni tədqiqat işi və ya bu sahədəki son inkişafa dair qısa və dəqiq yenilikləri əks etdirən hərtərəfli bir araşdırma sənədi ola bilər. ədəbiyyat. Bu tip kağızlar gələcək tədqiqat istiqamətləri və ya mümkün tətbiqetmələr haqqında bir fikir təqdim edir.

Editor’s Choice məqalələri dünyanın hər yerindən MDPI jurnallarının elmi redaktorlarının tövsiyələrinə əsaslanır. Redaktorlar, bu yaxınlarda jurnalda dərc olunan müəlliflər üçün xüsusilə maraqlı olacağına və ya bu sahədə əhəmiyyətli olacağına inandıqları az sayda məqalə seçirlər. Məqsəd, jurnalın müxtəlif tədqiqat sahələrində dərc olunmuş ən həyəcan verici əsərlərin bir hissəsini təqdim etməkdir.


Coğrafi Məlumat & amp müəssisələri

() & # 8212 coğrafi varlıqları, xüsusiyyətləri və s. Müəyyənləşdirmək üçün sərbəst formalı dilçilikdən istifadə edirlər.

Coğrafi Konstruksiyaları təmsil edir & # 187

Müəssisə və müəyyən edilmiş bir coğrafi şəxs (məsələn, mdash) )

Coğrafi birliyin ümumi adı və mdash ümumi çap edilə bilən adı

GeoVariant & mdash varlıqların variantlarını müəyyənləşdirir (məsələn, Alyaskalı və ya olmayan ABŞ)

GeoGroup & mdash hesablama məqsədləri üçün bir çox coğrafi obyektə vahid bir qrup kimi baxır

Coğrafi Yer Xüsusiyyətləri

GeoPosition & mdash müəyyən bir coğrafi varlığın coğrafi vəziyyətini tapır

GeoNearest & mdash müəyyən bir növü bir yerə ən yaxın obyekti tapır

GeoIdentify & mdash müəyyən bir yerin hansı ölkədə, dövlətdə və s. Olduğunu müəyyənləşdirir

GeoWithinQ & mdash müəyyən bir yerin müəyyən bir bölgədə olub olmadığını müəyyənləşdirir

GeoEntities & mdash, bölgədəki müəyyən bir növün coğrafi varlıqlarının siyahısını verir

GeoDistance & mdash coğrafi obyektlər və ya yerlər arasındakı məsafəni tapır

WikipediaSearch & mdash müəyyən bir yerə yaxın Wikipedia girişlərini tapın

Saat & amp; Yaz işığı

LocalTime, LocalTimeZone & mdash yerli vaxtı, vaxt zonasını müəyyən bir yerdə tapır

Xəritəçəkmə və s. & # 187

GeoListPlot & mdash sahəsi xəritədə yerləri və yolları

GeoRegionValuePlot & mdash coğrafi istilik xəritəsi yaradır

GeoGraphics & mdash istənilən miqyasda dünya səviyyəsində xüsusi xəritələr əldə edir

GeoStyling & mdash fərqli xəritə stillərinə (& quotOutlineMap & quot, & quotStreetMap & quot, & quotReliefMap & quot,.)

GeomagneticModelData & mdash cari və tarixi maqnit sahəsi məlumatları

GeogravityModelData & mdash Yerin cazibə sahəsi

Siyasi Coğrafiya üçün Təşkilatlar & amp

Ölkələr və mdash ölkələr və ərazilər, yüzlərlə əmlaka malikdir

HistoricalCountry & mdash 2000+ tanınmış tarixi ölkələr

İnzibati bölgə və dünyadakı əyalətlər, əyalətlər, vilayətlər və s

Şəhər və mdash şəhərləri və dünya miqyasında adlanan yerlər

CountryData, CityData & mdash ölkələr, şəhərlər haqqında məlumatlara ixtisaslaşmış giriş

Fiziki Coğrafiya üçün Müəssisələr və Amp Veriləri & # 187

GeographicRegion & mdash qitələri və Yerdəki digər böyük bölgələr

Okean və dəniz okeanları, dənizlər və digər böyük duzlu su hövzələri

Mountain &mdash notable mountains, hills and other prominences worldwide

Data on Geographic Points of Interest

Airport &mdash 10000+ airports, airstrips and helipads worldwide

Building &mdash notable buildings, skyscrapers, towers and other structures

University &mdash institutions of higher education

Related Data »

WikipediaData &mdash full information from Wikipedia about all geographic entities and topics

Importing Geospatial Data »

Import &mdash import data maintaining symbol structure, annotations, etc.


Videoya baxın: MapTiler: How to overlay an image over a map (Sentyabr 2021).