Daha çox

Vərəqə və Esri-Vərəqə: JSON obyektləri 'sahələr' filtrindən istifadə edərkən düzgün çəkilmir


Leaflet 0.7.3 və esri-broşura beta.6 ilə işləyirəm. L.esri.Layers.FeatureLayer istifadə edərək sahələr süzgəcini əlavə edənə qədər yaxşı işləyir. Bu nöqtədə, geojson obyektləri ara-sıra çəkir (əksəriyyəti heç olmur). Ekranda bir və ya iki forma görə bilərəm.

Nümunə kodu http://codepen.io/BBurnworth/pen/fhBrG/

Sətirlər 32-36:

// Aşağıdakı xətt işləyir. var parcels = new L.esri.Layers.FeatureLayer (url + '24'); // ** Aşağıdakı sətir işləyir (firebug-da JSON atributları yoxlanılır), lakin bağlamalar titrəyir və düzgün görünmür ** // var parcels = new L.esri.Layers.FeatureLayer (url + '24', {sahələri: "CITY"});

Bu səhvdir, yoxsa bir şey buraxıram? JSON (Firebug-da) həndəsə məlumatları daxil olmaqla düzgün oxuyur. Düzgün çəkmir.

Birinin itkin olduğum sadə bir şeyə işarə etməsini istərdim. İstəyirəm ki, istifadəçi istədiyi zaman atribut məlumatlarını əldə etmək üçün tapşırıqlardan istifadə edim.


burada bir neçə şey ...

  1. bu qurucu seçimi bir sıra gözləyir
  2. ən azı hər şeyin müştərilərin yanında lazımi səviyyədə işləməsi üçün OBJECTID sahəsini həmin massivə daxil etməlisiniz.

    {sahələr: ["OBJECTID", "CITY"]}

yəqin ki, bunu insanlar üçün həll etməliyik. mən buna baxacağam.

http://codepen.io/anon/pen/pjEtD


Esri Texniki Dəstək Bloqu

Andrew - Johnson tərəfindən

3B məlumatlar günümüzdə daha çox yayılmışdır və xüsusilə ArcGIS Platformasında yayılmışdır. Veb səhnələrindən, CityEngine-dən, ArcGIS Pro-ya qədər, 3D məlumatlarınızı idxal etmək, idarə etmək, modelləşdirmək və paylaşmaq üçün bir çox fərqli tətbiqetmə var. Axtardığınız nəticəni əldə etmək üçün çoxsaylı addımlar və alətlər tələb oluna bilər. Bu addımlardan və vasitələrdən bəzilərini araşdırmaq üçün ArcGIS-də 3B məlumatlarla işləmək üçün bəzi tövsiyələr və tövsiyələr.

3D Fayl Koordinat Sistemləri

3B formatların əksəriyyəti koordinat sistemi saxlamır. GeoVRML və KML tək istisnalardır. KML ölçü vahidi üçün WGS 1984 koordinat sistemi və sayğaclardan istifadə edəcəkdir. Bütün digər növlər (DAE, 3DS, OBJ) düzgün şəkildə yerləşdirilməlidir, əks halda "0,0" (Afrika sahillərindən kənarda) idxal edə bilərlər. Hiylə # 1

CityEngine istifadə edirsinizsə, formanı Naviqator pəncərəsindən səhnəyə sürükləyə və aça bilərsiniz (bu iş axını bir səhnə koordinat sisteminin artıq qurulduğunu güman edir). Formanı bir çox eşleme xüsusiyyətinə köçürdüyünüz zaman, başqa bir ArcGIS məhsuluna gətirə biləcəyiniz üçün koordinat sistemi məlumatlarla birlikdə yaradılır.

Eyni iş axını ArcGIS Pro-da həyata keçirilə bilər. Boş bir çox xüsusiyyət xüsusiyyət sinfi yaradın, Editor & gt Xüsusiyyətlər Yaradın və gt seçin Modelinə gedin və modeli yerləşdirmək üçün dünyanı vurun. Hiylə # 3 Model ilə dəyişdirin (ArcScene və ya ArcGlobe) və ya Multipatch ilə dəyişdirin (ArcGIS Pro) alətindən istifadə edin.ArcGIS Desktop'ı ModelArcGIS Pro ilə dəyişdirin Multipatch Trick # 4 ilə dəyişdirin

ArcScene, ArcGlobe və ya ArcGIS Pro istifadə edirsinizsə, Hərəkət, Döndür və ya Ölçek əməliyyatlarından istifadə edərək modeli bir tənzimləmə sessiyası zamanı əl ilə yerləşdirin. Qeyd: 3D sənədləri import etmə vasitəsi ilə bağlı məlum problem var. Yerləşdirmə nöqtələri parametri ArcGIS 10.4.1 və ya ArcGIS Pro 1.3-ə uyğun olaraq qiymətləndirilmir, bu vasitə uyğun bir seçim deyil. Bu məsələnin gələcək bir buraxılışda düzəldilməsi planlaşdırılır.

3D dosyanızı dokularla idxal etmək üçün, toxumanın fərdi bir şəkil faylı və ya şəkillər olan bir qovluq olaraq, 3D sənədin yanında yerləşməsini təmin etməlisiniz. Qeyd: Həm quruluşu tanımaq üçün həm fayl, həm də qovluq proqram üçün eyni ada sahib olmalıdır. Hiylə # 1

Dokular yalnız fayl və ya müəssisə geodatabases-da dəstəklənir. Shapefile çox eşlemeleri dokuları dəstəkləmir, beləliklə bir çox məlumatı bir coğrafi məlumat bazasına gətirdiyinizə əmin olun.

3D məlumatlarınızın etibarlı z dəyərlərinə sahib olduğundan əmin olun. Bir veb səhnə paylaşarkən və ya məlumatları ArcGIS Pro-ya idxal edərkən, yüksəklik dəyərlərinin düzgün olduğundan əmin olmaq istəyirsiniz. Hiylə # 1

Çox ovucunuz düzgün yüksəklikdə deyilsə, bu hiylədən istifadə edə bilərsiniz. ArcGIS Pro-da "çox yerdəki məlumatları" yerə qoyun və Layer 3D To Feature Class alətindən istifadə edin. Yüksəklik dəyərləri daha sonra çoxluğa yerləşdirilir. Hiylə # 2

Sadə xüsusiyyət məlumatlarını (çoxlu olmayan) istifadə edirsinizsə, məlumatlara z dəyərləri əlavə etmək üçün Səth Məlumatı əlavə edin. Ayrıca, bir atribut cədvəlinə z dəyərləri əlavə edə bilərsiniz və Z Məlumat Əlavə et vasitəsi ilə dəyərləri alətin çıxışı ilə təsdiqləyə bilərsiniz. Məlumatların etibarlı yüksəklik dəyərləri yoxdursa, növbəti ipucuya baxın.

Hansı vasitələrin 3D məlumat yarada biləcəyini anlayın: Layer 3D-dən Xüsusiyyət Sınıfına, İnterpolat Formasına və ya Atributla 3D-dən Xüsusiyyət.

3D məlumatlarınızı anlayın. Ekstrüde edilmiş 2D poliqonları gerçək 3B xüsusiyyətlər deyildir, buna görə çoxbucağı həqiqi bir 3D xüsusiyyəti halına gətirmək üçün çox qatmaq üçün ixrac etməlisiniz. Sadə nöqtə, xətt və çoxbucaqlı xüsusiyyətlər düzgün z dəyərlərinə sahib olduqları halda 3B məlumatlar hesab edilə bilər. 2B xüsusiyyətləri də 3D marker simbologiyası istifadə edərək simvollaşdırıla bilər.

Atribut cədvəlində z sahəsi olan z effektiv xüsusiyyət sinfi ilə z effektiv olmayan xüsusiyyət sinfi arasındakı fərqi bilin. Xüsusiyyət siniflərinin düzgün yüksəklikdə göstərilməsi üçün z aktivləşdirilməlidir. Atribut cədvəlində bir z sahəsi görə bilər, lakin bu həndəsənin düzgün z dəyərlərinə sahib olması demək deyil. Yuxarıda göstərildiyi kimi, zirvələri düzəltmək və ya bir atribut cədvəlinə z-dəyərləri əlavə etməklə bunu yoxlamaq olar.

Bu blog 3B data ilə işin hər tərəfini əhatə etməsə də, ArcGIS Platformasında 3B data ilə işləmək üçün bəzi dəyərli məlumatlar verəcəyinə ümid edirəm. Andrew J. - Masaüstü Dəstək Analitiki


Protobuf Çini Server

Xəritələrlə işləmək heyrətləndirici ola bilər, coğrafi məkan məlumatları ilə bir platforma hazırlayarkən məlumatları xəritələr daxilində göstərmək ən çətin hissələrdən biridir. Məlumatların xəritədə göstərilməsi üçün kiçik bir addım plitələrin istifadəsidir. Bu yazıda Node.js, Hapi, Redis və Postgres istifadə edərək protobuf plitələrə xidmət edəcək kiçik bir çini serverini yaradacağıq.

Bu dərslik PostGIS-dən Protobuf-a çox ilham verildi (vektor plitələrlə) xahiş edirəm yoxlayın. Unutmayın ki, bu təlimat həqiqətən əsas bir kafel server tətbiqetməsini göstərəcəkdir, əgər daha inkişaf etmiş və sınaqdan keçirilmiş bir yol tapmaq istəyirsinizsə, TileStache-i sınaya bilərsiniz və ya burada bir çox möhtəşəm kommunal tapa bilərsiniz. Ümid edirəm ki, öz mini kafel serverinizi yaratmağı sevəcəksiniz.

Docker və Docker-Compose Quraşdırma

Docker, konteynerlər yaratmağımıza və hər hansı bir yerdə (maşın Docker-i dəstəklədiyi müddətdə) layihəmizi işə salmağımıza imkan verəcək, paket versiyalarının bütün məsələlərini və ya bu kimi sadə bir təlim üçün bir verilənlər bazasının çətin bir şəkildə qurulmasını kənara qoyun. Dərslik, versiyanızın aşağıdakı əmrləri yerinə yetirdiyini yoxlamaq üçün docker-compose 1.11.2 və Docker 17.03.0-ce istifadə edəcək:

Kök qovluğunda iki Dockerfiles yaratmağa başlayaq. Birinci Dockerfile yalnız pack.json və npm-shrinkwrap.json-u yaratmaq üçün olacaq, ikincisi kafel serverinin işə salınmasından məsul olacaq.

Dockerfile öz-özünə izah edir, ehtiyac duyduğumuz bağlamalarla bir şəkil yaradırıq, beləliklə kafel serverimiz çalışa bilər, lakin bu asılılıqlar içərisində bir neçə var:

1.- Mapnik, rəsmi veb saytında bildirildiyi kimi mapnik, piksel mükəmməl görüntü çıxışı ilə ildırım sürətli kartoqrafik alqoritmləri birləşdirir və C ++, Python və Node interfeyslərini ifşa edir. Serverimizdəki plitələr yaratmaq üçün bu kitabxanadan istifadə edəcəyik.
2.- Eksik pack.json və npm-shrinkwrap.json, bu sənədlərin hazırda mövcud olmamasının səbəbi, bütün faylları yaratmaq üçün Docker və docker-compose istifadə etmək istədiyimizə görədir.

Artıq Dockerfile sahib olduğumuz üçün asan bir inkişafa imkan verəcək digər qablar yaratmalıyıq, docker-compose.yml faylımızda elan edəcəyimiz ilk xidmət qovşaq konteyneridir. Pack.json və npm-shrinkwrap.json faylları yaratmaq üçün bu konteynerdən istifadə edəcəyik. Kök qovluğumuzda bir docker-compose.yml faylı yarataq:

Bununla, qovşaq işlədə bilən bir konteyner çalışdıra bilərik, bu konteynerdən fayllarımızı yaratmaq üçün istifadə edək. Node konteynerimizi quraq və istədiyiniz əmrləri işə salaq:

İndi kök qovluğumuza baxsaq, yeni yaradılan iki sənədimizi tapacağıq: pack.json və npm-shrinkwrap.json. Fayllar fərqli bir mülkiyyətə sahib ola bilər, buna görə yazı probleminə səbəb olur, bunu həll etmək üçün aşağıdakıları edərək mülkiyyəti tez bir zamanda dəyişə bilərik:

Server konteynerimizi sınamaq üçün bir server.js faylı yarataq:

Docker-compose.yml-də serverimiz üçün bir konteyner əlavə edək:

Komanda seçimimizdə npm run start-development qurduq, hal hazırda pack.json-da bu skript yoxdur, onu "skriptlər" sahəsinə əlavə edək:
pack.json

Nodemondan avtomatik olaraq qovluq serverimizi yenidən yükləmək və ctlr + c istifadə etməkdən və server sənədlərimizdəki hər dəyişiklik üçün docker-compose up fayans-server işlətməkdən istifadə edirik. Docker-compose.yml dəyişdirilərkən ctlr + c istifadə edərək və docker-compose up faylı-server işləyən docker-compose prosesini yenidən başlamalıyıq. Konfiqurasiyamızı tez bir zamanda sınamaq üçün bir server.js faylı yaradın:
server.js

Qurğumuzun docker-compose up fayans-serverini işə salmaqla işlədiyini nəhayət test edə bilərik:

Konteynerimiz işləyir, ancaq server.js konteyner yalnız bir console.logdur. Http istəklərini alacaq bir serverə ehtiyacımız var, hapijlərin köməyi ilə bir server yaradaq.

Server

Sadə bir server yaratmaq üçün hapi istifadə edəcəyik. Hapi ilə bir server yaratmaq olduqca sadədir:
server.js

İndi docker-composer run tile-server-i çalıştıraraq serverimizi çalışdıra bilərik:

Brauzerimizə gedərək işləyən serverimizi test edə və http://0.0.0.0:8081 saytına keçə bilərik

İnanılmazdır, serverimiz işləyir. Bir verilənlər bazasına qoşulmalıyıq, bu dərsdə Postgres istifadə edəcəyik. Bir verilənlər bazasına qoşulmağımıza kömək edəcək bir plagin yarataq.

Postgres plagini

Serverimizdən verilənlər bazasına qoşulmaq üçün docker-compose.yml-ə bir qab əlavə etməyimiz lazımdır, postgis şəklindən istifadə edəcəyik:
docker-compose.yml

Kafel-server konteynerində yeni seçimlər təyin olundu əlaqələr seçim başqa bir xidmətdəki konteynerlərə keçid verəcəkdir. Verilənlər bazası ilə ünsiyyət qura bilmək üçün bu seçkiyə ehtiyacımız var, bu da başlanğıc sifarişinə qərar verəcək xidmətlər arasındakı bir asılılığı ifadə edəcəkdir. The asılıdır seçim, vəziyyətimizdə asılılıq qaydasında xidmətlərə başlayacaq db bizdən əvvəl başlayacaq kafel-server. Docker-compose up fayans-server işlətsək, o da yaradacaq və başlayacaq db.

İndi serverimiz və verilənlər bazamız var, indidən etibarən verilənlər bazamız boşdur. Verilənlər bazamıza daxil edilmiş bəzi nümunə məlumatlar əldə edək. Bu təlimatda Meksikadan olan əyalətlərdən istifadə edəcəyik. Aşağıdakı .sql faylı bizə lazım olan bütün məlumatları ehtiva edən bir sxem və cədvəl yaradacaq:

Verilənlər bazamızda məlumatlar var və düzgün işləyir, indi hapi plagini yaradaraq verilənlər bazamızı serverimizə bağlayaq. Əgər hapi plaginlərindən istifadə etməmisinizsə, plaginin necə işlədiyi barədə daha çox məlumat üçün sənədləri yoxlayın.

Yaratmaq eklentilər kök qovluğumuzdakı qovluq və a postgres içərisindəki qovluq, postgres eklentisi bir pack.json və index.js iki fayldan ibarət olacaq. Bu sənədləri yaratmağa icazə verin, aşağıdakı kimi bir quruluşa sahib olmalısınız:

İndex.js faylı verilənlər bazamıza qoşulmaq və daha sonra işləyicilərimizdə istifadəyə veriləcək bir əlaqə yaratmaq üçün məntiqi ehtiva edəcəkdir.

Hazırda serverimizdəki plaginlər seriyası boşdur, yeni yaradılan plaginimizi massivə daxil etməliyik ki, hapi yükləsin.

Plaginlər massivini dəyişdirdikdən sonra nodemon vasitəsilə serverimizdə yenidən yükləmə görməliyik:

Gəlin hər şeyin olub olmadığını görək, verilənlər bazamızla əlaqəni yoxlamaq üçün kiçik bir marşrut əlavə edək:

Http://0.0.0.0:8081/postgres-test ünvanına gedin və nəticəni yoxlayın, belə bir şey görməlisiniz:

Layer plugin

Çini bir xəritəni brauzerdə göstərmək üçün ümumiyyətlə veb eşleme çərçivəsinin dəstəyi lazımdır. Bu çərçivə, plitələrin alınması, ekran, önbelleğe alma və istifadəçi naviqasiyasını idarə edir. Çini xəritələr üçün populyar çərçivələrə Google Maps API, OpenLayers və Leafet daxildir. Bu təlimatda broşuradan istifadə edəcəyik
Ən çox kafel veb xəritələr müəyyən Google Xəritə konvensiyalarını izləyir:

  • Fayanslar 256x256 pikseldir
  • Xarici ən yaxınlaşdırma səviyyəsində, 0, bütün dünya bir xəritə çini ilə göstərilə bilər.
  • Hər bir böyütmə səviyyəsi hər iki ölçüdə ikiqat artır, beləliklə yaxınlaşdırarkən tək bir kafel 4 plitlə əvəzlənir. Bu, demək olar ki, 22 praktik məqsəd üçün 22 yaxınlaşma səviyyəsinin kifayət etməsi deməkdir.
  • Genişlik hüdudları 85 dərəcə civarında olan Web Mercator proyeksiyasından istifadə olunur.

Slippy Map Tilenames [2] və ya XYZ [3] kimi tanınan faktiki olaraq OpenStreetMap standartı bu konvensiyaları izləyir və daha çoxunu əlavə edir:

  • X və Y nömrələmə sxemi
  • Plitələr üçün PNG şəkilləri
  • Şəkillər http: // kimi bir URL ilə REST API vasitəsilə təqdim olunur. /Z/X/Y.png, burada Z yaxınlaşma səviyyəsidir və X və Y plitəni təyin edir.

Raster kafel təbəqələri

Rastr kafel təbəqələri əvvəlcədən təyin edilmiş və serverdə saxlanılan və müştəri tərəfindən olduğu kimi görünən şəkil sənədləri (məsələn, JPG və ya PNG formatı) kimi müştəri tətbiqetməyinizə əsas xəritələr təqdim edir. Rastr kafel təbəqələri xəritələrinizə görüntü kimi coğrafi kontekst verən əsas xəritələr (Dünya Təsəvvür baza xəritəsində olduğu kimi) və ya Topoqrafik, National Geographic, Okeanlar və digər bazemaplar kimi xüsusiyyətə əsaslanan xəritələr üçün ən uyğundur. Rastr kafel təbəqələri də məlumatlarınızın tematik xəritələri kimi statik əməliyyat qatlarından ibarət ola bilər.

Çini təbəqə formatı İnternet üzərindən sürətli bir şəkildə ötürülür və ən çox yayılmış Xəritəçəkmə proqramı tərəfindən asanlıqla başa düşülür, belə ki, bu əsas xəritələr yalnız ArcGIS və ArcGIS API-ləri ilə qurulmuş veb tətbiqetmələrlə deyil, OGC protokollarından istifadə edən üçüncü tərəf tətbiqetmələrlə də uyğundur. WMS / WMTS kimi. Raster kafel təbəqələrinin digər faydaları aşağıdakılardır:

  • ArcMap kimi masaüstü tətbiqetmələr və veb brauzerlərin köhnə versiyaları da daxil olmaqla geniş tətbiq və cihazlarda (veb, masa üstü və mobil) yaxşı işləyin.
  • Qabaqcıl etiket yerləşdirmə və simbologiya kimi yüksək səviyyəli kartoqrafik imkanları təmin edin.
  • Təsvir və yüksəklik məlumatları kimi müxtəlif raster məlumat mənbələrini dəstəkləyin.
  • Veb Xəritəçəkmə tətbiqlərindən çap edilə bilər.

Vektorlu kafel təbəqələri

Vektor çini təbəqələri xəritə məlumatlarını vektor faylları şəklində çatdırır (məsələn, PBF formatı) və təbəqə ilə çatdırılmış bir üslub əsasında müştəriyə göstərilən bir və ya daha çox təbəqəni əhatə edir. Vektor karoları mövcud raster kafel əsas xəritələrinin bəzilərində (hamısında deyil) bənzər məlumatları ehtiva edir, lakin məlumatların bir vektor təqdimatını saxlayır, yəni coğrafi xüsusiyyətlər nöqtələr, xətlər və çoxbucaqlar kimi başa düşülən bir formatda təmsil olunur müştəri tətbiqi. Raster kafel təbəqələrindən fərqli olaraq, vektor kafel təbəqələri ekran cihazının qətnaməsinə uyğunlaşa bilər və bir çox istifadə üçün yenidən yerləşdirilə bilər. Vektör plitələr, raster plitələrdən daha kiçik bir fayl ölçüsünə sahibdir, bu da daha sürətli xəritələrə və daha yaxşı bir işə çevrilir. Çini giriş performansı və vektor rəsminin birləşməsi, plitələrin cihazlarda fərqli ola biləcək ekranın istənilən həllinə uyğunlaşmasına imkan verir.

Xəritə görüntüləyicisində, vektor plitələrinin müştəri tərəfindən çəkilməsi, vektor kafel qatının tərzini və xəritənin məzmununu fərdiləşdirməyə imkan verir. Vektor çini təbəqələrinin digər üstünlüklərinə aşağıdakılar daxildir:

  • Tək bir vektor plitələrindən istifadə edərək bir çox fərqli xəritə tərzi yaratmaq üçün istifadə edilə bilər. Vektor çini təbəqələrini, məsələn, görünürlüklərini gizlətmək, simvolları və şriftləri dəyişdirmək, etiketlər üçün dilləri dəyişdirmək və s.
  • Ayrı, yüksək çözünürlüklü versiyaların yaradılmasına ehtiyac olmadan, aşağı çözünürlüklü (96 dpi) raster plitələrdən daha yaxşı bir qətnamə təklif edən yüksək qətnamə ekranlarında (məsələn, retina cihazları) əla görün. ArcGIS Pro kimi masa üstü tətbiqlərdə aydın simbologiya və etiketlər ilə vektor plitələr istənilən miqyasda göstərilə bilər.
  • Müvafiq raster plitələrdən çox daha sürətli və daha az hardware mənbəyi ilə yaradıla bilər. Bu, plitələrin hazırlanması üçün xərcləri azaldır və məlumat yeniləmələrinin təqdim olunma sürətini yaxşılaşdırır.
  • Vektor plitələr ölçülərinə uyğun raster plitələrdən xeyli kiçikdir və plitələrin saxlanılması və xidmət xərclərini azaldır.
  • Etiketlər və digər simvollar təhrif olunmadan ArcGIS Pro kimi masa üstü tətbiqetmələrdən istifadə edərək müxtəlif koordinat sistemlərinə proqnozlaşdırıla bilər.

Vektor çini qatlarını əməliyyat görüntüləyicisinə və ya səhnə görüntüləyicisinə əməliyyat qatları və ya əsas xəritələr kimi əlavə edə bilərsiniz. Yapılandırılabilir bir tətbiq, Web AppBuilder və ya JavaScript üçün ArcGIS API istifadə edərək veb tətbiqetmələrdə vektor kafel təbəqələri ilə xəritələr və səhnələr istifadə edə bilərsiniz. Vektorlu kafel təbəqələri, daha yeni aparatla təchiz olunmuş maşınlarda ən yaxşı göstəriciyə malikdir və bunlar Internet Explorer 11 və sonrakı versiyalarında və Chrome, Firefox və Safari daxil olmaqla masa üstü brauzerlərin digər mövcud versiyalarında göstərilə bilər.

Vektor plitələri haqqında bir az daha çox şey başa düşdüyümüz üçün, plitələrimizi serverimizə necə tələb edəcəyimizi başa düşək. Çini xəritələri göstərmək üçün əvvəllər də qeyd edildiyi kimi bir veb Xəritəçəkmə çərçivəsi tələb olunur, bu anda vektor plitələrimizi göstərmək üçün broşuradan istifadə edəcəyik. Versiya 1.0.3-dən etibarən broşura API-lərindən istifadə edərək vektor plitələrini yükləməyə və göstərməyə imkan vermir. Bu bir problem ola bilər, ancaq ianəçilərin böyük səyi və broşura plaginləri sistemi sayəsində vektor plitələrimizi göstərə biləcəyik. Leaflet.VectorGrid kitabxanasından istifadə edəcəyik.

Xəritəmizi göstərməyimizə kömək edəcək bir html faylı yarataq. Hapinin statik varlıqlara xidmət göstərməsi üçün bir plaginə ehtiyacımız olacaq, təsirsiz bu tələbdə bizə kömək edəcəkdir.

Və kök qovluğumuzda bir index.html faylı yaradın:
index.html

Bu html-ə xidmət etmək üçün bir marşruta ehtiyacımız var, bunu serverimizə əlavə edək:

Http://0.0.0.0:8081/test-vector-tiles saytına daxil olaraq broşura xəritəmizi görməliyik. Google Chrome istifadə edirsinizsə, DevTools'u aça və Şəbəkə nişanına gedə bilərsiniz, İmg filtrini seçin və cizgi məzmunu çatdırılma şəbəkəsinə edilən istəkləri görə biləcəksiniz:

Gördüyünüz kimi ilə bir istək edildi // format, bu formatı izləyən işləyici yaratmağa çalışaq.

İşləyən bir verilənlər bazası ilə, qat plaginimizi yaratmağa davam edəcəyik. Bizim eklentilər qovluq yaratmaq a qatlar qovluq, postgres plaginimiz olduğu üçün qat plagini iki sənəddən ibarət olacaq pack.json və index.js. Bu sənədləri yaratmağa icazə verin, aşağıdakı kimi bir quruluşa sahib olmalısınız:

Bu anda qat plaginimizdə sadə bir konsol.log olacaq:

Və eklentilərimiz sırasına daxil edin:

Plaginlər massivini dəyişdirdikdən sonra nodemon vasitəsilə serverimizdə yenidən yükləmə görməliyik:

Plaginlərimizdə / qat / qovluğumuzda bir qat qovluğu yarataq və States.js faylı yarataq:

İşləyicidə nə baş verdiyini öyrənməyə çalışaq, bu işləyicinin məhdudlaşdırma qutusundakı hər bir çini üçün çalışacağını unutmayın.

Merkator sayğacları, ekran pikselləri (256x256 və ya konfiqurasiya edilə bilən ölçülü plitələr) və enlem / boylam arasında konvertasiya üçün proyeksiya riyaziyyatını təmin edərək bizə kömək edəcək sferikmerkator paketini idxal edirik.

Sonra bir sorğu elan edəcəyik, iki funksiyadan istifadə edəcəyik. Birinci funksiya st_intersects Həndəsələr / Coğrafiya “məkan baxımından 2B-də kəsişərsə”, DOĞRU qaytarır. ST_CONTAINS və ya ST_Within istifadə etməyə cazibədar ola bilərsiniz, ancaq müəyyən bir çoxbucağı kəsən bütün çoxbucaqlıları almalıyıq.

İkinci funksiya ST_MakeEnvelope, bu funksiya minimum və maksimumdan əmələ gələn düzbucaqlı bir Çoxbucaq yaradır. Unutmayın ki, bu işləyici hüdud qutusundakı hər bir çini üçün işləyəcəkdir, buna görə meydana gətirəcəyimiz çoxbucaq yalnız çini olacaqdır.

Əsasən, sahə geomunun təmin etdiyimiz düzbucaqlı çoxbucaqlı ilə kəsişdiyi cədvəl estadosundan topojson və cve_ent sahələrini mənə alın deyirik.

İndi sorğu parametrlərini alaq (göstərilən plitədən xyz dəyərlərimiz olacaq) və bunları formanın [w, s, e, n] qutusuna çevirmək üçün istifadə edək. Bbox metodu aşağıdakı imza qutusuna malikdir (x, y, zoom, tms_style, srs) ilk üç parametr xyz formatından olan plitələrdir, tms_style, tms-style və srs istifadə edərək hesablamaya qərar verəcək və nəticədə çıxan bbox üçün proyeksiyanı təyin edəcəkdir. (WGS84 | 900913).

İndi ST_MakeEnvelope funksiyası vasitəsilə çoxbucağımızı yaratmağın bir yolu var, sorğumuzu işə salaq. Hər hansı bir sorğu nəticəsində yaranan maska ​​aşağıdakı db.any imzasına malikdir (sorğu, dəyərlər), bu səbəbdən sorğumuzu və dəyərləri sfericalmercator paketi vasitəsilə bu yaxınlarda yaradılan qutumuzdan bir sıra olaraq ötürək və sorğu nəticəsi ilə cavab verək.

İşləyən işləyicimiz var, lakin bu işləyicini icra edəcək bir marşrut hələ də itkindir. Qatlar plagin qovluğumuzdakı indeks sənədimizə girək və marşrutumuzu qeyd edək:
plugins / layer / index.js

İndi http://0.0.0.0:8081/layers/states/7/28/56.pbf saytına daxil olsaq, aşağıdakı kimi bir cavab almalıyıq:

Bəs nə baş verir? Çini çoxbucaqlı ilə kəsişən çoxbucaqlıları alırıq. 7, 28, 56 saylı zoom səviyyəsində kafel çoxbucağı ilə kəsişən 10 vəziyyətin olduğunu söyləyə bilərik. Bu, bir vektor plitəsini qaytarmaq üçün kiçik bir addımdır, ancaq bu anda yalnız bir json cavabını qaytarırıq. Plitəmizi yaratmaq üçün mapnik istifadə edəcəyik:

Yol və mapnik modullarını tələb edirik. Mapnik, müxtəlif formatlara giriş imkanı verən bir plagin arxitekturasını dəstəkləyir, geojson'u format olaraq istifadə edəcəyimiz mapnik konfiqurasiyamıza icazə verməliyik. Geojson.input-un registerDatasource vasitəsilə qeydiyyatdan keçməyimiz, mapnik modulu daxilində GeoJSON-dan format kimi istifadə etməyimizə imkan verəcəkdir. Çini yaratmaq üçün asılılığımızı yeni elan etdik, indi çini yaratmaq üçün bir funksiya yarataq:

Əvvəlcə mapnik’in kafel generatorundan istifadə edərək yeni bir vektor plitəsi yaradırıq; bu, sıxılmış və sadələşdirilmiş kirəmitli məlumatlar üçün Mapbox Vector Tile spesifikasiyasına uyğun bir çini düzəldəcəkdir. Məlumat ötürmə ölçüsünü azaltmaq üçün sorğumuzda topojson məlumatlarını tələb edirik, VectorTile obyekti üçün API topoJSON qəbul etmir. Hər topoJSON-u etibarlı bir GeoJSON-a çevirməliyik, bu vəzifəyə çatmaq üçün topojson modulundan istifadə edəcəyik. Etibarlı bir FeatureCollection olduğumuz zaman addGeoJSON metodunu istifadə edərək yaratdığımız plitəyə əlavə edə bilərik. İnanılmaz, bir kafel yaradıldı, hələ də məlumatları sıxmaq lazımdır:

GetData metodu vektor kafelindəki məlumatları bufer olaraq götürəcək, imza aşağıdakı getData-dır ([seçimlər], geri çağırış), seçimləri biraz düzəldə bilərik, ancaq standart parametrlər problemsiz işləməlidir. İkinci parametr, bu tapşırığın asenkron bir şəkildə yerinə yetirilməsinə imkan verən geri çağırışdır. Verileri kafelimizdən tampon şəklində alırıq, sadəcə onu sıxmaq lazımdır. Zlib deflate getData metodundan aldığımız buferi sıxacaq, deflate metodu üçün imza deflate (buf [, options], geri çağırış) birinci parametr bufer, ikincisi geri çağırışdır, buna görə də bu metod eyni zamanda asinxrondur. Hər iki metod da uyğun gəlmədiyi üçün onları vədlə bağlayacağıq. Nəhayət, yalnız cavab interfeysimizə başlıqları təyin etməliyik:

Dövlətlər.js sənədimiz bu anda belə olmalıdır:
plugins / layer / layer / state.js

Bütün bunlarla, son nöqtəmiz işləsə, sadəcə qıvrımla test edə bilərik:

Son nöqtə vektor plitələrə protobuf kimi işləyir və xidmət edir, indi onları index.html faylımızda göstərməliyik:

Http://0.0.0.0:8081/test-vector-tiles saytına keçək və plitələrimizin xəritələrimizdə işlədiyini görməliyik. Şaşırtıcı bir şəkildə, sorğunuza qoşulmaqla, xüsusiyyətlərinizi GeoJSON cavablarınıza daxil etməklə əldə etmək olar, belə bir şey:

Təhlil funksiyasında istədiyiniz sahələri xassələr obyektinə ötürməlisiniz:

İstədiyiniz xüsusiyyətlərə əsaslanan xüsusiyyətləri tərtib etmək üçün bir funksiya təyin edin:

Dərsin əvvəlində düzgün xatırladığımız təqdirdə redislərdən istifadə edəcəyimizi xatırladıqda, üslubları asanlıqla dəyişdirmə qabiliyyətinə sahib işləmə plitələrimiz var. Verilənlər bazamızdakı zəngləri azaltmaq üçün redis plagini yarataq.

Redis plugin

Redis, verilənlər bazası, önbellek və mesaj brokeri kimi istifadə olunan açıq mənbəli (BSD lisenziyalı), yaddaşda olan məlumat strukturu deposudur. Redis sadə bir əsas dəyər deposu deyil, əslində müxtəlif dəyərləri dəstəkləyən bir məlumat strukturu serveridir. Bunun mənası budur ki, ənənəvi açar dəyər mağazalarında simli düymələri simli dəyərlərlə əlaqələndirdiyiniz halda, Redis-də dəyər sadə bir simlə məhdudlaşmır, eyni zamanda daha mürəkkəb məlumat strukturlarına sahib ola bilər.

Mürəkkəb quruluşlardan biri ikili təhlükəsiz simlərdir, lazımsız verilənlər bazası çağırışlarının qarşısını almaq üçün bunlardan istifadə edəcəyik. Bəzi istifadə hallarında kafel məlumatları müəyyən bir müddətdə dəyişməyəcək və mənbələrə qənaət etmək üçün işləyicilərimizin nəticələrini redis ilə saxlaya bilərik.

Redis server cari konfiqurasiyamızda yoxdur, gəlin onu docker-compose.yml-yə əlavə edək
docker-compose.yml

Plaginlər qovluğumuzda redis qovluğu yaradın və index.js və package.json faylı yaradın.

Redis modulunda bluebird.promisifyAll istifadə edirik, sənədlərdə izah edildiyi kimi obyektin xüsusiyyətlərindən keçərək obyektdə və prototip zəncirində hər bir funksiyanın async ekvivalenti yaratmaqla bütün obyekt vəd olunur. Vədlərin istifadəsi redislərlə daha təmiz bir şəkildə məşğul olmağa kömək edəcəkdir. Http üzərindən önbelleğimizi təmizləmək üçün bir yol da daxil etdik, əlbəttə ki, bu son nöqtə yalnız inkişaf mərhələsində olmalıdır və ya son nöqtəni qorumalıdır.

Eklentimizi bir sıra eklentilərimizə yazmağı unutmayın:

Redis serverimizi eklentimiz vasitəsilə istifadə edək:

Redis istifadə edərək ikili sənədimizi önbelleğe almağı bacaran yeni bir funksiyanı elan edirik. İndi önbelleğimizdə açarın olub olmadığını yoxlamalıyıq, getAsync bununla məşğul olacaq. Keşimizdə açarı tapsaq, saxladığımız ikili təhlükəsiz sətirdən bufer yaradırıq və istədiyiniz dəyəri qaytarmaq üçün replyProtoBuf funksiyamızdan istifadə edirik. Açarımızı redisdə tapa bilmədiyimiz halda kafelimizi yaratmaq üçün proseduru izləyirik, ancaq vəd zəncirinə əlavə setTileInCache funksiyasını da daxil edirik.

Redis istifadəsi, serverimizdən cavab müddətini bir az azaltmağa imkan verir.


Daxil olan blas / lapack kitabxanaları ilə birlikdə quraşdırılmış ən son quraşdırılmış R versiyamızı (3.0.2) HiPerGator1 aparatında (AMD Abu Dhabi 2.4GHz) Intel MKL kitabxanaları ilə inşa edilmiş 3.2.0 (2015-ci ilin aprel ayından etibarən) ilə müqayisədə müqayisə etdik. CPU) və Intel Haswell 2.3GHz CPU-lar HiPerGator2-də mümkün istifadəni sınaqdan keçiririk. Nəticələr R Benchmark 2.5 cədvəlində təqdim olunur

  • S: 'Paralel' paketi istifadə edərək bir iş göndərdiyim zaman, bütün mövzuları istədiyim ayrı nüvələrdə çalışmaq əvəzinə tək bir CPU nüvəsini paylaşdığı görünür.
    • A: SLURM-də mövcud nüvələrin sayını təyin etmək üçün - hər bir tapşırıq üçün - istifadə etməlisiniz. Məs.

    'paralel' paketdən mcapply və ya digər funksiyanın bütün tələb olunan nüvələrdə işləməsinə imkan verəcəkdir


    Osmnx.elevation modulu¶

    Düyün yüksəkliklərini əldə edin və kənar qiymətləri hesablayın.

    osmnx.elevation. add_edge_grades ( G, add_absolute = Doğru, dəqiqlik = 3 ) ¶

    Hər qrafik kənarına dərəcə atributu əlavə edin.

    Qrafadakı hər bir kənar üçün yönləndirilmiş dərəcəni hesablamaq (yəni qaçışdan yuxarı qalxmaq) və kənara atribut kimi əlavə etmək üçün vektorlaşdırılmış funksiya. Bu funksiyanı istifadə etmək üçün qovşaqlarda onsuz da yüksəklik atributları olmalıdır.

    Ayrıca add_node_elevations funksiyasına baxın.

    • G (şəbəkəx.MultiDiGraph) - yüksəklik düyün atributu ilə giriş qrafiki
    • add_absolute (bool) - Doğru olarsa, grade_abs atributu kimi qiymətin mütləq dəyərini də əlavə edin
    • dəqiqlik (int) - dəyirmi qiymət dəyərlərinə ondalık dəqiqlik

    G - kənar dərəcə (və isteğe bağlı dərəcə_abs) atributları olan qrafik

    İstifadə etməyin, köhnəlmiş, gələcək buraxılışda silinəcəkdir.

    Bu funksiya və elevation_provider ayarı köhnəlmişdir.

    • G (şəbəkəx.MultiDiGraph) - köhnəlmişdir, istifadə etməyin
    • api_key (simli) - köhnəlmişdir, istifadə etməyin
    • max_locations_per_batch (int) - köhnəlmişdir, istifadə etməyin
    • fasilə_doldurma (sal) - köhnəlmişdir, istifadə etməyin
    • dəqiqlik (int) - köhnəlmişdir, istifadə etməyin

    Bir veb xidmətindən istifadə edərək hər bir qovşaq üçün yüksəklik (metr) atributu əlavə edin.

    Bu, Google Maps Elevation API istifadə edir və API açarı tələb edir. Pulsuz, yerli alternativ üçün add_node_elevations_raster funksiyasına baxın. Add_edge_grades funksiyasına da baxın.

    • G (şəbəkəx.MultiDiGraph) - giriş qrafiki
    • api_key (simli) - Google Maps Elevation API açarı
    • max_locations_per_batch (int) - hər bir API çağırışında təqdim ediləcək maksimum koordinat cütlərinin sayı (bu çox yüksəkdirsə, server sorğunu rədd edəcək, çünki xarakter həddi icazə verilən maksimumdan çoxdur)
    • fasilə_doldurma (sal) - API zəngləri arasında fasilə vaxtı, dərəcəsi məhdudlaşdıqda artırıla bilər
    • dəqiqlik (int) - dairəvi yüksəklik dəyərlərinə ondalık dəqiqlik

    G - Düyün yüksəkliyi atributları olan qrafik

    Yerli raster sənədlərindən hər bir qovşaq üçün yüksəklik atributu əlavə edin.

    Filepath yolların siyahısıdırsa, bu aralıq bir addım olaraq bu yollardakı fayllardan ibarət bir virtual raster yaradır.

    • G (şəbəkəx.MultiDiGraph) - giriş qrafiki, rasterlə eyni CRS-də
    • filepath (simlivə yapathlib.Pathvə yasimlərin siyahısı / yollar) - sorğu etmək üçün raster fayl (lar) ına yol (və ya yolların siyahısı)
    • qrup (int) - sorğu üçün hansı raster zolağı
    • cpus (int) - yoxdursa neçə CPU nüvəsi istifadə ediləcəksə, mövcud olanların hamısını istifadə edin

    G - Düyün yüksəkliyi atributları olan qrafik


    Franck34-ün verdiyi töhfə sayəsində DVF artıq şəkilləri markerlərə və ya iki yoldan birində göstərilə bilən hər hansı bir Vərəqə yolu əsaslı təbəqəyə yerləşdirmə seçimini dəstəkləyir. Ən sadə yol bir təmin etməkdir imageCircleUrl normalın bir hissəsi olaraq seçim L.Path kimi variantlar:

    Bu, yol şəklinin üstündə göstərilən şəkil ilə doldurulmuş bir dairə qoyacaqdır. Şəkil sahəsi doldurmaq üçün şəkil avtomatik olaraq ölçüləcəkdir. Əlavə etdiyiniz şəkillər üzərində daha incə nəzarət üçün a şəkil şəkli seçim. Bu, örtük şəklini idarə etməyə imkan verir və a. Kimi əsas SVG formalarını təmin edə bilərsiniz dairə, a düz, ya da ellips & # 8211 və həmçinin şəklin və naxışın ölçüsünə nəzarət edin. Aşağıdakı nümunə, radius 24 piksel olan bir dairə yaradır və sonra bir şəkil müəyyən edilir şəkil eni və hündürlüyü 48 piksel olan seçim


    Vərəqə xüsusiyyətləri

    Xəritəmizə marker əlavə etmək

    Bəzi mərhələlərdə çox güman ki, xəritəmizə bir şey dəqiqləşdirmək üçün bir işarə əlavə etmək istəyəcəyik. Vərəqə bir neçə seçim ilə marker funksiyası daxil edərək prosesi gözəl və asanlaşdırır

    Ən sadə formada aşağıdakılar marker ilə xəritəni göstərmək üçün tam koddur

    Bu koddan sadə xəritə kodu arasındakı yeganə fərq, JavaScript hissəsinin altındakı bir sətir əlavə edilməsidir

    Burada L.marker metodu ilə -41.29042 enlem və 174.78219 enlem nöqtəsində bir dəyişən elan edirik. Sonra sadəcə .addTo (xəritə) əlavə edərək xəritəmizə əlavə edirik.

    Və işarə ilə tamamlanan xəritəmiz budur ...

    Markerimizə popup əlavə etmək

    Marker əlavə etmək daha asan ola bilməzdi, lakin bu baxımdan olduqca məlumatlı deyil. Axı markerimizin nəyə işarə etdiyinə dair heç bir məlumatımız yoxdur. Bununla birlikdə, bu konteksti markerlə əlaqəli kiçik bir mətn balonu olan bir popup şəklində əlavə edə bilərik. Bunu etmək üçün markerimiz üçün kod belə olmalıdır

    Burada əlavə xətlərimiz Yeni Zelandiyanın & ltb & gtTe Papa & lt / b & gt & ltbr & gtMuseum mətni ilə .bindPopup istifadə edərək poperimizi markerimizə bağlayır. (where the <b> tags will make the text bold and the <br> tag will insert a line break). Then we open the popup with .openPopup() .

    But wait! The coolness doesn’t end there. You can click on the marker and the popup will alternately disappear and return. If you omit the .openPopup() portion the popup won’t be open when your map loads, but if you click on the marker it will open up.

    Marker options

    As well as the standard marker functions shown thus far there are several options that can be utilised when displaying a marker. These are enabled by including an array of the appropriate options and their desired values in a section contained in curly braces after the latitude, longitude declaration. Below there is some sample code for the marker function with three different options demonstrating use for a boolean value (true / false) a string and a number.

    Drag a marker

    The draggable option is a boolean which is set to false by default, but when set to true, the marker can be repositioned by clicking on it with the mouse and moving it.

    The following is a code example

    Add a title to a marker

    The title option is a string which will be displayed in a small rectangle beside the pointer when a users mouse is hovered over the marker.

    The following is a code example

    And this is what it looks like…

    Marker with a title as hover text
    Adjust the markers transparency

    The opacity option will vary the transparency of the marker from 0 (transparent) to 1 (opaque).

    The following is a code example

    And this is what it looks like…

    Semi transparent marker

    . A copy is also in the appendices and a copy of all the files that appear in the book can be downloaded (in a zip file) when you download the book from Leanpub.

    The full code of a live example of a map incorporating a marker with a popup, draggability, a title and opacity are available from bl.ocks.org, GitHub and there is a copy of this file called marker-map-complex.html that can be downloaded (in a zip file) when you download the book from Leanpub. The online version at bl.ocks.org and GitHub both use subresource integrity to support secure CORS CORS (Cross Origin Resource Sharing) requests.

    Adding multiple markers to our map

    At some stage we will most likely want to add multiple markers to our map to pinpoint several things. While we could do this one by one following the previous example, we could also do it programmatically with an array of data.

    The following is the full code to show multiple markers on a map

    The full code of a live example of a map incorporating multiple markers is available online at bl.ocks.org or GitHub. A copy can also be downloaded (in a zip file) when you download the book from Leanpub. It’s called multiple-markers.html.

    There are two differences between this code and the code to add a single marker. Firstly we have declared an array ( planes ) which has a range of values with each row including an identifier (the first column) and latitude and longitude values.

    Secondly we include a for loop that contains our marker adding line.

    In the for loop we go from 0 to the end of the planes array ( planes.length ). For each row in our array, we add a marker where the latitude corresponds to planes[i][1] (in the planes array at row i and column 1 (remembering that the first column is 0)) and the longitude is planes[i][2] . We also add a popup to our marker with the identifier ( planes[i][0] ) before adding each marker to the map ( .addTo(map) ).

    And here’s our map complete with markers…

    Multiple markers on a map

    Adding a line to our map

    Adding a line to our map is a great way to provide an indication of a path or border. Leaflet provides the polyline function to do this

    The following is the full code to show a simple map with a line drawn with 4 lines

    The only difference between this code and the simple map code is the addition of the var polyline = section at the bottom of the JavaScript portion

    Here we are defining a path going from one lat/long point to another. We declare a variable with the L.polyline method and step through our points in the array. Then we simply add that to our map by adding .addTo(map) .

    And here’s our map complete with path…

    Obviously this hasn’t been set to follow any logical route :-).

    Adding options to our polyline

    There are a range of options that can be incorporated into our path and these are added after the array (separated by a comma) and contained in curly braces. The following is an example of the same line but with the colour changed to red, the width (weight) of the line set to 10 pixels, the opacity (transparency) set to 0.7 (on a scale of 0 (transparent) to 1 (opaque)), drawn with dashes of 20 pixels followed by a space of 15 pixels ( dashArray ) and with rounded corners where the lines join.

    And here’s our path with options…

    The full code of a live example of a map incorporating a the polyline and options is available online at bl.ocks.org or GitHub. A copy of the file (polyline-options-map) can be downloaded (in a zip file) when you download the book from Leanpub.

    Using multiple tile layers on your map

    Leaflet has a great feature that allows you to easily switch between tile layers when viewing your map. It’s built right in to leaflet.js and (as usual) it’s simple to implement.

    What we’re going to do is define the locations and appropriate attributions for two different sets of tiles and then tell leaflet to place a control on the map that allows us to switch. These different sets of tiles are referred to as ‘base layers’ and as such only one can be visible at any one time.

    The end result is a small icon in the top right hand corner that looks like this…

    And when we hover over it with our mouse it changes to show the different tile layers that we have defined for use.

    Layers control with mouse over

    There is no change to the HTML part of our code from the simple map example. The full code for this example can be found here on GitHub and a working example is here on bl.ocks.org. A copy of the file (layers-map.html) can be downloaded (in a zip file) when you download the book from Leanpub.

    The only change is in the JavaScript portion. and that looks like the following

    The first block of code sets up the links that we will use for attribution

    This just makes it easier to add later when juggling multiple layers.

    The we declare the URLs for the tiles and the attributions to display

    Again, by declaring these as variables, the process of defining the distinct layers is simplified.

    Which is what we do in the next block of code

    Declaring the layers like this is pretty handy since now we have a single variable for each layer that has all the information associated with it that is required to display the tiles for that layer.

    Now we add the map with the following lines of code

    It looks a lot like our simple map example, but in this case we have added in an option called layers and set that to the osmMap layer. This will be the initial layer that is shown on the map/ I have a note there to say that it’s a good idea to only have one of your base layers in there. That’s because if you put more than two it will load both layers when the map first loads and we don’t need to do that unnecessarily.

    The second last section of the code declares what our base layers are (there are other sorts of layers, but we’ll get to that later) and gives them appropriate text to display in the layers selection box.

    Then the last line adds the control for the baseLayers to the map

    For a fantastic way of finding different tile providers I can recommend heading to the preview page set up here.

    As I mentioned earlier, the full code for this example can be found here on GitHub and a working example is here on bl.ocks.org. A copy of the file (layers-map.html) can be downloaded (in a zip file) when you download the book from Leanpub.

    Overlaying information interactively on your map

    In the previous section we described how to declare and switch between more than one tile layer. Tile layers are described as ‘base layers’ in the sense that only one of them will be visible at a time and they will form the ‘base’ of the map.

    However, it is obvious that a really useful thing to be able to do would be to add information to our map so that different features or areas can be highlighted. These features or areas will exist on top of the base layer so that they have context. In Leaflet these can be set up as ‘overlays’ where an object or group of elements can be added to a map.

    Overlays are treated in much the same way as base layers. In the sense that they are declared and controlled using similar methods but Leaflet is clever enough to recognise that as many overlays as desired can exist on an individual base layer.

    What we aim to do is to add an overlay to one to our previous base layer switching example. The end result will be the same icon in the top right corner of the map

    But this time when we move our mouse over it, it will present an option to select ‘Interesting places’.

    And when selected it will show a series of markers with a connecting line.

    As with the base layer switching example, there is no change to the HTML part of our code from the simple map example. The full code for this example can be found here on GitHub and a working example is here on bl.ocks.org. A copy of the file (layers-map-overlays.html) can be downloaded (in a zip file) when you download the book from Leanpub.

    The only change is in the JavaScript portion. and that looks like the following

    There are only really two differences between this block of script and that for the base layers example.

    The first is where we define what our overlay will be made up of.

    Here we declare a new LayerGroup called coolPlaces ( var coolPlaces = new L.LayerGroup() ). Then we simply define a set of markers and a polyline (see the earlier sections on these two elements for a fuller description) and add them to our coolPlaces layer.

    The second change to our code is right at the end of the block of code.

    Here we declare our overlays (there is only one ( coolPlaces ), but you can add as many as you want) using var overlays = <<put overlays here>>. Then we add overlays to our layers control so that it knows to include the layer in the screen widget.

    And that’s all there is to it!

    As stated earlier, the full code for this example can be found here on GitHub (and there’s a copy in the appendices) an online example is here on bl.ocks.org and copy of the file (layers-map-overlays.html) can be downloaded (in a zip file) when you download the book from Leanpub.


    ImageOverlay

    Used to load and display a single image over specific bounds of the map. Extends Layer .

    Usage example

    Creation

    Factory Description
    L.imageOverlay( imageUrl, bounds, options?) Instantiates an image overlay object given the URL of the image and the geographical bounds it is tied to.

    Seçimlər

    Option Yazın Default Description
    opacity Number 1.0 The opacity of the image overlay.
    alt String '' Text for the alt attribute of the image (useful for accessibility).
    interactive Boolean yalan If true , the image overlay will emit mouse events when clicked or hovered.
    crossOrigin Boolean yalan If true, the image will have its crossOrigin attribute set to ''. This is needed if you want to access image pixel data.
    Option Yazın Default Description
    pane String 'overlayPane' By default the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default.
    attribution String null String to be shown in the attribution control, describes the layer data, e.g. "© Mapbox".

    Events

    Event Məlumat Description
    vurunMouseEvent Fired when the user clicks (or taps) the layer.
    dblclickMouseEvent Fired when the user double-clicks (or double-taps) the layer.
    mousedownMouseEvent Fired when the user pushes the mouse button on the layer.
    mouseoverMouseEvent Fired when the mouse enters the layer.
    mouseoutMouseEvent Fired when the mouse leaves the layer.
    contextmenuMouseEvent Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).
    Event Məlumat Description
    əlavə edinEvent Fired after the layer is added to a map
    removeEvent Fired after the layer is removed from a map
    Event Məlumat Description
    popupopenPopupEvent Fired when a popup bound to this layer is opened
    popupclosePopupEvent Fired when a popup bound to this layer is closed
    Event Məlumat Description
    tooltipopenTooltipEvent Fired when a tooltip bound to this layer is opened.
    tooltipcloseTooltipEvent Fired when a tooltip bound to this layer is closed.

    Metodlar

    Sets the opacity of the overlay.

    Brings the layer to the top of all overlays.

    Brings the layer to the bottom of all overlays.

    Changes the URL of the image.

    Update the bounds that this ImageOverlay covers

    Get the bounds that this ImageOverlay covers

    Get the img element that represents the ImageOverlay on the map

    Adds the layer to the given map

    Removes the layer from the map it is currently active on.

    Removes the layer from the given map

    Returns the HTMLElement representing the named pane on the map. If name is omitted, returns the pane for this layer.

    Used by the attribution control , returns the attribution option.

    Binds a popup to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .

    Removes the popup previously bound with bindPopup .

    Opens the bound popup at the specified latlng or at the default popup anchor if no latlng is passed.

    Closes the popup bound to this layer if it is open.

    Opens or closes the popup bound to this layer depending on its current state.

    Returns true if the popup bound to this layer is currently open.

    Sets the content of the popup bound to this layer.

    Returns the popup bound to this layer.

    Binds a tooltip to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .

    Removes the tooltip previously bound with bindTooltip .

    Opens the bound tooltip at the specified latlng or at the default tooltip anchor if no latlng is passed.

    Closes the tooltip bound to this layer if it is open.

    Opens or closes the tooltip bound to this layer depending on its current state.

    Returns true if the tooltip bound to this layer is currently open.

    Sets the content of the tooltip bound to this layer.

    Returns the tooltip bound to this layer.

    Adds a listener function ( fn ) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick' ).

    Adds a set of type/listener pairs, e.g.

    Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to on , you must pass the same context to off in order to remove the listener.

    Removes a set of type/listener pairs.

    Removes all listeners to all events on the object.

    Fires an event of the specified type. You can optionally provide an data object — the first argument of the listener function will contain its properties. The event can optionally be propagated to event parents.

    Returns true if a particular event type has any listeners attached to it.

    Behaves as on(…) , except the listener will only get fired once and then removed.

    Adds an event parent - an Evented that will receive propagated events

    Removes an event parent, so it will stop receiving propagated events

    An abstract class that contains options and constants shared between vector overlays (Polygon, Polyline, Circle). Do not use it directly. Extends Layer .

    Seçimlər

    Option Yazın Default Description
    stroke Boolean true Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.
    color String '#3388ff' Stroke color
    weight Number 3 Stroke width in pixels
    opacity Number 1.0 Stroke opacity
    lineCap String 'round' A string that defines shape to be used at the end of the stroke.
    lineJoin String 'round' A string that defines shape to be used at the corners of the stroke.
    dashArray String null A string that defines the stroke dash pattern. Doesn't work on Canvas -powered layers in some old browsers.
    dashOffset String null A string that defines the distance into the dash pattern to start the dash. Doesn't work on Canvas -powered layers in some old browsers.
    fill Boolean depends Whether to fill the path with color. Set it to false to disable filling on polygons or circles.
    fillColor String * Fill color. Defaults to the value of the color option
    fillOpacity Number 0.2 Fill opacity.
    fillRule String ɾvenodd' A string that defines how the inside of a shape is determined.
    renderer Renderer Use this specific instance of Renderer for this path. Takes precedence over the map's default renderer.
    className String null Custom class name set on an element. Only for SVG renderer.
    Option Yazın Default Description
    interactive Boolean true If false , the layer will not emit mouse events and will act as a part of the underlying map.
    Option Yazın Default Description
    pane String 'overlayPane' By default the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default.
    attribution String null String to be shown in the attribution control, describes the layer data, e.g. "© Mapbox".

    Events

    Event Məlumat Description
    vurunMouseEvent Fired when the user clicks (or taps) the layer.
    dblclickMouseEvent Fired when the user double-clicks (or double-taps) the layer.
    mousedownMouseEvent Fired when the user pushes the mouse button on the layer.
    mouseoverMouseEvent Fired when the mouse enters the layer.
    mouseoutMouseEvent Fired when the mouse leaves the layer.
    contextmenuMouseEvent Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).
    Event Məlumat Description
    əlavə edinEvent Fired after the layer is added to a map
    removeEvent Fired after the layer is removed from a map
    Event Məlumat Description
    popupopenPopupEvent Fired when a popup bound to this layer is opened
    popupclosePopupEvent Fired when a popup bound to this layer is closed
    Event Məlumat Description
    tooltipopenTooltipEvent Fired when a tooltip bound to this layer is opened.
    tooltipcloseTooltipEvent Fired when a tooltip bound to this layer is closed.

    Metodlar

    Redraws the layer. Sometimes useful after you changed the coordinates that the path uses.

    Changes the appearance of a Path based on the options in the Path options object.

    Brings the layer to the top of all path layers.

    Brings the layer to the bottom of all path layers.

    Adds the layer to the given map

    Removes the layer from the map it is currently active on.

    Removes the layer from the given map

    Returns the HTMLElement representing the named pane on the map. If name is omitted, returns the pane for this layer.

    Used by the attribution control , returns the attribution option.

    Binds a popup to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .

    Removes the popup previously bound with bindPopup .

    Opens the bound popup at the specified latlng or at the default popup anchor if no latlng is passed.

    Closes the popup bound to this layer if it is open.

    Opens or closes the popup bound to this layer depending on its current state.

    Returns true if the popup bound to this layer is currently open.

    Sets the content of the popup bound to this layer.

    Returns the popup bound to this layer.

    Binds a tooltip to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .

    Removes the tooltip previously bound with bindTooltip .

    Opens the bound tooltip at the specified latlng or at the default tooltip anchor if no latlng is passed.

    Closes the tooltip bound to this layer if it is open.

    Opens or closes the tooltip bound to this layer depending on its current state.

    Returns true if the tooltip bound to this layer is currently open.

    Sets the content of the tooltip bound to this layer.

    Returns the tooltip bound to this layer.

    Adds a listener function ( fn ) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick' ).

    Adds a set of type/listener pairs, e.g.

    Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to on , you must pass the same context to off in order to remove the listener.

    Removes a set of type/listener pairs.

    Removes all listeners to all events on the object.

    Fires an event of the specified type. You can optionally provide an data object — the first argument of the listener function will contain its properties. The event can optionally be propagated to event parents.

    Returns true if a particular event type has any listeners attached to it.

    Behaves as on(…) , except the listener will only get fired once and then removed.

    Adds an event parent - an Evented that will receive propagated events

    Removes an event parent, so it will stop receiving propagated events


    Vector Data file formats list in GIS

    In GIS, we require some data formats to express the geographical features, which mainly are of two types Raster and Vector data formats. These data sources also has multiple file formats in them which are often used to express the geographical features. In this post we are looking forward to see the List of Vector Data file formats in GIS. Vector considers the geographical features as geometrical shape and express them by different types of geometry.


    PosAnimation

    Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9.

    Usage example

    Constructor

    Events

    Event Məlumat Description
    startEvent Fired when the animation starts
    addımEvent Fired continuously during the animation.
    endEvent Fired when the animation ends.

    Metodlar

    Run an animation of a given element to a new position, optionally setting duration in seconds ( 0.25 by default) and easing linearity factor (3rd argument of the cubic bezier curve, 0.5 by default).

    Stops the animation (if currently running).

    Adds a listener function ( fn ) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick' ).

    Adds a set of type/listener pairs, e.g.

    Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to on , you must pass the same context to off in order to remove the listener.

    Removes a set of type/listener pairs.

    Removes all listeners to all events on the object.

    Fires an event of the specified type. You can optionally provide an data object — the first argument of the listener function will contain its properties. The event can optionally be propagated to event parents.

    Returns true if a particular event type has any listeners attached to it.

    Behaves as on(…) , except the listener will only get fired once and then removed.