Daha çox

Leaflet ilə popupda link göstərilir?


Leaflet JavaScript kitabxanası ilə işləyirəm. Xəritəmi vurub bir popup görmək imkanı olmalıdır. Bunun üçün bir kodum var:

var popup = L.popup (); onMapClick (e) funksiyası {popup .setLatLng (e.latlng) .setContent (e.latlng.toString () + "
Google'u ziyarət edin") .openOn (xəritə);} map.on ('klikləyin', onMapClick);

Bu kod işləyir, amma sualım budur: bu popupa necə bir əlaqə qura bilərəm? Məsələn, "Google'a Ziyarət" adlı bir əlaqə olmalıdır. Bu linki tıkladığınızda www.google.com (açılmalıdır) (sürpriz). Məncə bu olmalıdır .setContent (e.latlng.toString ()) etiket, çünki orada bir mətn əlavə edə bilərəm Google'u ziyarət edin (gördüyünüz kimi).

Fikirləriniz varmı?


SetContent () içində html verirsiniz

var popup = L.popup (); onMapClick (e) funksiyası {popup .setLatLng (e.latlng) .setContent (e.latlng.toString () + 'Google'u ziyarət edin"') .openOn (xəritə);} map.on (' klikləyin ', onMapClick);

Vərəqə, interaktiv veb xəritələr hazırlamaq üçün mövcud olan bir çox fərqli çərçivələrdən biridir. Pulsuz və açıq mənbəli, yüngül və çevik olduğu və imkanlarını genişləndirmək üçün digər vasitələrlə asanlıqla birləşdirildiyi üçün xoşuma gəlir. Ən əsası belə bir seminar üçün hər cür hesaba yazılmadan Leaflet xəritələri yarada bilərsiniz ki, bu da onu yeni öyrənənlər üçün ideal bir çərçivə halına gətirir.

Leaflet bir JavaScript kitabxanasıdır. JavaScript, müasir veb inkişafında, ümumiyyətlə HTML və CSS ilə birlikdə geniş istifadə olunan bir proqramlaşdırma dilidir. HTML (və ya Hyper Text Markup Language) veb səhifənin mənasını və quruluşunu, CSS (Cascading Style Sheets) üslubunu, JavaScript isə funksionallığı təmin edir.

Bunların hər üçünü ilə bir az çalışacağıq. HTML, CSS və JS sənədlərinin yazılması və redaktəsi üçün mətn redaktoru tələb olunur. Atom.io-ya tövsiyə edirəm. Windows, Mac və Linux əməliyyat sistemlərində pulsuzdur.


Vərəqə və OpenStreetMap ilə İnteraktiv xəritə yaratmaq

Bir müddətdir məlum oldum ki, bəzi qan ləkəsi analizi proqram müştərilərini göstərən dünya interaktiv xəritəsi bir növ ləngdir. Veriləri göstərmək üçün Google & # 8217s API-nin çox köhnəlmiş bir versiyasından istifadə etdiyimi də bilirdim. Dünən onu düzəltmək üçün nə etməli olduğumu görmək üçün buna nəzər salmağa qərar verdim.

İlk dayanacağım API-nin v3-ə keçmək barədə Google səhifəsi oldu. Görünür Google Hesabımla bir şey yazaraq yeni bir API açarı almalıydım. Google istifadə məhdudiyyətləri əlavə etdi və indi tamamilə hər şeyi izləyir (bəli, ehtimal ki əvvəllər də etmişdilər, amma indi daha açıqdır). Ticarət saytında xəritələrdən istifadə edib etməyəcəyimi də düşünməli idim.

Maneələri sevmirəm və sadəliyi sevirəm, ona görə alternativ axtarmağa qərar verdim. Bir neçə il əvvəl xəritəmi qurduğumda və bunun kifayət qədər yaxşı olmadığına qərar verdiyim zaman OpenStreetMap-a (OSM) baxdığımı xatırladım. Vəziyyətlərini görmək üçün bir daha yoxlamağa qərar verdim. İşlərim necə dəyişir!

Yaxşı bir tənbəl inkişaf etdirici olduğum üçün (bununla demək olar ki, var olduqları, yaxşı kodlanmış və saxlanıla bilən şeylər yazmaqdan çəkinirəm) ilk düşüncəm WordPress plaginini almaq və xəritəm üçün istifadə etmək idi. OSM & # 8211 OpenStreetMap plaginini sınadım. Nə etməyə çalışdığım üçün işləsə də, mənim kimi istədiyim qədər özelleştirilemezdi, bir saytda bir xəritə üçün çox ağır görünürdü və məni WordPress-ə bağladı (digər saytım da yoxdur & # 8217t) hələ köçürülüb).

Növbəti düşüncəm, ağır yüklərin çox hissəsini birləşdirmək və idarə etmək üçün gözəl bir API ilə JavaScript kitabxanası axtarmaq idi. OSM saytını gəzərək OpenLayers-a rast gəldim. Olduqca güclü görünürdü və API-də bir ton şey var. Yüklədim (10M?) Və bir nəzər yetirdim, amma həqiqətən daha sadə bir şey istədim. Sonra broşuranı tapdım. Tam olaraq nə ehtiyacım var idi. Kiçik, sadə, möhtəşəm sənədlər və bəzi həqiqətən sadə nümunələr.

Bəzi JavaScript, jQuery və JSON konsepsiya və mdashthings üzərində işləməli olsam da nadir hallarda istifadə edirəm və mdash imkanlarımı araşdırdım və Google Xəritəimi bir neçə saat ərzində OpenStreetMap / Leaflet versiyası ilə əvəz etdim. İndi fərdiləşdirmək çox daha sürətli və sadədir.

Yeni OpenStreetMap / Vərəqə xəritəsi

Bu yazıda, necə edəcəyini göstərən bir nümunəyə nəzər salıram:

Nümunə olaraq yaşadığım və ya bir ay və ya daha çox müddət keçdiyim ölkələri göstərən bir xəritə hazırlayacağam. Nümunə üç sənəd və iki şəkildən ibarətdir:

  • index.html & # 8211 səhifənin özü
  • xəritələr / leaf-demo.js & # 8211 Xəritəni yaratmaq və işarələrlə doldurmaq üçün JavaScript
  • maps / markers.json Genişliyi və amp uzunluğu və göstərilməsi üçün bir url ilə markerlərin siyahısı & # 8211
  • maps / images / pin24.pngpin48.png & # 8211 göstərmək üçün pin (biri normal ekran üçün, biri retina üçün)

(Bu nümunədə istifadə olunan sənədlər GitHub-da mövcuddur. Qeyd edək ki, GitHubdakı versiya, kitabxanaların daha son versiyalarını istifadə etmək üçün yeniləndiyindən burada göstərilənlərdən fərqli görünə bilər. Kodu kopyalamaq əvəzinə istifadə etməyinizi məsləhət görürəm. bu səhifə.)


Broşuradan istifadə edərək CBS həllinin tətbiqi

Bir coğrafi informasiya sistemi (CİS) yer səthindəki mövqelərlə əlaqəli hər cür coğrafi və məkan məlumatlarının saxlanması, alınması, idarə olunması, göstərilməsi və təhlili üçün nəzərdə tutulmuşdur.

CİS Xüsusiyyətləri

  • Xəritələr və Qatlar - İstifadəçinin öz məlumatlarını istifadə edərək interaktiv xəritə yaratmasına imkan verir.
  • Görselleştirme - Bir istifadəçi nöqtələr, xətlər, sahələr, etiketlər, əfsanələr və rəsmlər üçün yazı / stil / qeyri-şəffaflıq parametrlərini təyin edə bilər. Rəsm əşyaları fərdiləşdirilə bilər.
  • Geocoding - Esnek pin-Xəritəçəkmə vasitələri ünvan, poçt kodu, şəhər / qəsəbə və koordinata görə coğrafi kodlamanı dəstəkləyir.

Vərəqə - Leaflet mobil dostluq interaktiv xəritələr üçün aparıcı açıq mənbəli JavaScript kitabxanasıdır. Budur bəzi Leaflet.js demoları. Lazım ola biləcəyiniz demək olar ki, bütün onlayn xəritə xüsusiyyətlərinə malikdir.

  • Çini qat
  • Popup
  • Markerlər
  • Polylines, polygons, dairələr və ya düzbucaqlılar kimi vektor təbəqələri

Google xəritəsi ilə CBS Solutions üçün broşuradan istifadə

1. leaflet.css və leaflet.js yükləyin.

2. broşura-google.js yükləyin.

3. Sənədin baş hissəsinə leaflet.css və sonra leaflet.js faylını daxil edin.

4. Sənədin baş hissəsinə google map API istinadını əlavə edin.

5. Xəritəni göstərmək üçün gövdə etiketinin içinə div elementi qoyun.

6. Xəritə divinin hündürlüyü və enini təyin edin.

7. Bir xəritə obyekti yaradın, ona & # 8216map & # 8217 div-də yaşamasını söyləyin və ilkin en, uzunluq, yaxınlaşma dəyərlərini verin.

8. Google qatını əlavə edin və qat seçimini təyin edin.

9. İndi xəritəyə marker əlavə edək

10. İndi markerə bəzi məlumatlar əlavə edək.

11. Hadisələrlə məşğul olmaq - Hadisələrdən istifadə edərək xəritədəki məlumat axınını idarə edə bilərsiniz. Aşağıda bəzi nümunələr var

Kod nümunəsi:

& lttitle & gtLeaflet Veb xəritəsi & lt / title & gt

& ltlink rel = & # 8221stylesheet & # 8221 href = & # 8221http: //cdn.leafletjs.com/leaflet-0.7.3/leaflet.css” / & gt
& ltscript src = & # 8221http: //cdn.leafletjs.com/leaflet-0.7.3/leaflet.js”></script>

& lt! & # 8211 & xəritə üçün genişlik və hündürlük stilləri təyin edin
& ltstyle & gt
# xəritə <
genişlik: 1020 piksel
hündürlüyü: 760 piksel
>
& lt / style & gt
& lt! & # 8211Google maps api & # 8211 & gt daxil edin
& ltscript src = & # 8221http: //maps.google.com/maps/api/js? key = API Açarınız & ampsensor = false & # 8221 & gt & lt / script & gt
& ltscript src = & # 8221leaflet-google.js & # 8221 & gt & lt / script & gt
& lt / head & gt

// xəritə obyekti yaradın, ona & # 8216map & # 8217 div-də yaşadığını söyləyin və ilkin enlem, boylam, zoom dəyərləri verin
var map = L.map (& # 8216map & # 8217) .setView ([40.0654443, -75.679283], 20)
googlelayer = yeni L.Google (& # 8216HYBRID & # 8217)
map.addLayer (googlelayer)
// əlavə marker
var marker = L.marker ([40.0654443, -75.679283]). addTo (xəritə)
marker.bindPopup (& # 8220 & ltb & gtIgnatiuz & ltbr & gtSoftware & lt / b & gt & # 8221) .openPopup ()

// Xəritə hadisəsi ilə məşğul olmaq
// hadisəni vurun.
map.on (& # 8216click & # 8217, function (e) <
var popup = L.popup ()
popup
.setLatLng (e.latlng)
.setContent (& # 8220Həritəni & # 8221 + e.latlng.toString ()) tıklamısınız
.openOn (xəritə)
>)
// yaxınlaşdırma hadisəsi.
map.on (& # 8216zoomend & # 8217, function (e) <
uyarı (& # 8220zoom sonu ve # 8220)
>)

Təşəkkür edirəm, bütün oxucular sizi növbəti bloqda görəcəklər. O vaxta qədər oxumağa davam edin.

Hər hansı bir sorğunuz var və ya CİS həlləri üçün broşura haqqında daha çox məlumata ehtiyacınız var? Bu gün +1 -484-876-1867 nömrəsi ilə əlaqə saxlayın və ya bizə bir mesaj göndərin.


Bu addım-addım rəhbərlik, broşuranın xəritəsini qurma, markerlər, polylines və popuplarla işləmək və hadisələrlə məşğul olmaq da daxil olmaqla, Leaflet əsaslarına tez başlamağınıza kömək edəcəkdir.

Səhifənizi hazırlayırsınız

Xəritə üçün hər hansı bir kod yazmazdan əvvəl səhifənizdə aşağıdakı hazırlıq addımlarını atmalısınız:

Leaflet CSS sənədini sənədinizin baş hissəsinə daxil edin:

Leaflet JavaScript faylını əlavə edin sonra Vərəqə və # 8217s CSS:

Xəritənizin olmasını istədiyiniz yerə müəyyən bir id ilə div elementi qoyun:

Xəritə konteynerinin müəyyən edilmiş bir hündürlüyə sahib olduğundan əmin olun, məsələn CSS-də quraraq:

İndi xəritəni başlatmağa və onunla bir şeylər etməyə hazırsınız.

Xəritə qurulur

Londonun mərkəzində olduqca Mapbox Streets çini ilə bir xəritə hazırlayaq. Əvvəlcə xəritəni işə salırıq və görünüşünü seçdiyimiz coğrafi koordinatlara və yaxınlaşma səviyyəsinə uyğunlaşdırırıq:

Varsayılan olaraq (xəritə nümunəsini yaratarkən heç bir seçim keçmədiyimiz üçün), xəritədəki bütün siçan və toxunuş qarşılıqlı təsirləri aktivləşdirilir və böyüdmə və aidetmə nəzarətinə malikdir.

SetView çağrısının xəritə obyektini də döndərdiyini və ən çox Leaflet metodlarının açıq jQuery kimi metod zəncirləməsinə imkan verən açıq bir dəyər vermədikləri zaman bu şəkildə hərəkət etdiyini unutmayın.

Bundan sonra xəritəmizə əlavə etmək üçün bir çini qat əlavə edəcəyik, bu halda bir Mapbox Streets çini təbəqəsi. Bir çini qatının yaradılması adətən çini şəkilləri üçün URL şablonunun, atribut mətninin və təbəqənin maksimum yaxınlaşma səviyyəsinin qurulmasını əhatə edir. Bu nümunədə Mapbox & Street-v11 plitələrini Mapbox & # 8217s Static Tiles API-dən istifadə edirik (Mapbox-dan plitələr istifadə etmək üçün bir giriş işarəsi istəməlisiniz). Bu API varsayılan olaraq 512x512 plitələr (256x256 əvəzinə) qaytardığından, bunu da açıq şəkildə göstərməli və zoomumuzu -1 ilə əvəz etməliyik.

Div və leaflet.js daxil edildikdən sonra bütün kodların çağırıldığından əmin olun. İşi bitdi! İndi işləyən bir vərəqə xəritəniz var.

Leaflet'in provayder-agnostik olduğunu qeyd etmək lazımdır, yəni plitələr üçün müəyyən bir təminatçının seçimini tətbiq etmir. Mapbox / küçə-v11-i mapbox / peyk-v9 ilə əvəz etmək üçün cəhd edə bilərsiniz və nə baş verdiyini görə bilərsiniz. Ayrıca, Leaflet bir provayderə məxsus bir kod xətti də içərmir, buna görə ehtiyacınız olsa digər provayderlərdən istifadə etməkdə sərbəst olursunuz (Mapbox təklif etsək də, çox gözəl görünür).

OpenStreetMap-a əsaslanan bir şey istifadə etdikdə, bir atribut müəllif hüququ bildirişinə əsasən məcburidir. Əksər kafel təminatçıları (Mapbox, Stamen və ya Thunderforest kimi) bir atributa da ehtiyac duyurlar. Kreditin verilməli olduğu yerdə kredit verməyinizə əmin olun.

İşarələr, dairələr və çoxbucaqlar

Çini təbəqələrindən əlavə, xəritənizə markerlər, çox xəttlər, çoxbucaqlılar, dairələr və popuplar daxil olmaqla digər şeyləri də asanlıqla əlavə edə bilərsiniz. Bir marker əlavə edək:

Bir dairə əlavə etmək eynidır (radiusun metrdə ikinci arqument kimi göstərilməsi istisna olmaqla), ancaq obyekt yaratarkən seçimləri son arqument kimi ötürərək göründüyünə nəzarət etməyə imkan verir:

Bir çoxbucaq əlavə etmək asandır:

Pop-uplarla işləmək

Popuplar ümumiyyətlə xəritədəki müəyyən bir obyektə bəzi məlumatlar əlavə etmək istədiyiniz zaman istifadə olunur. Vərəqədə bunun üçün çox lazımlı bir qısa yol var:

Obyektlərimizi vurmağa çalışın. BindPopup metodu göstəricinizə göstərilən HTML məzmunu olan bir popup əlavə edir, beləliklə obyekti vurduğunuzda popup görünür və openPopup metodu (yalnız markerlər üçün) dərhal əlavə edilmiş popupu açır.

Popupları qatlar kimi də istifadə edə bilərsiniz (bir obyektə bir popup əlavə etməkdən daha çox bir şey lazım olduqda):

Burada istifadə etmək üçün yaxşı olan yenisini açarkən əvvəlcədən açılan popupun avtomatik bağlanmasını idarə etdiyi üçün addTo yerinə openOn istifadə edirik.

Hadisələrlə məşğul olmaq

Vərəqədə hər dəfə bir şey olur, məsələn. istifadəçi markerə və ya xəritəyə yaxınlaşma dəyişikliklərinə vurursa, müvafiq obyekt bir funksiya ilə abunə ola biləcəyiniz bir hadisə göndərir. Bu istifadəçi qarşılıqlı reaksiya verir:

Hər bir obyektin öz hadisələr dəsti var və detallar üçün sənədlərə baxın. Dinləyici funksiyasının ilk arqumenti bir hadisə obyektidir və baş verən hadisə haqqında faydalı məlumat ehtiva edir. Məsələn, xəritəyə vurma hadisəsi obyekti (yuxarıdakı nümunədəki e), tıklamanın baş verdiyi bir yer olan latlng xüsusiyyətinə malikdir.

Xəbərdarlıq əvəzinə bir popup istifadə edərək nümunəmizi inkişaf etdirək:

Xəritəni tıklamağa çalışın və koordinatları pop-upda görəcəksiniz. Nümunə və rarr-a tam baxın

İndi Broşuranın əsaslarını öyrəndiniz və dərhal xəritə tətbiqetmələri yaratmağa başlaya bilərsiniz! Ətraflı sənədlərə və ya digər nümunələrə nəzər salmağı unutma.


Vektor KML ilə iş

KML (Keyhole Markup Language), Google Earth və Google Maps ilə əlaqəli olduğu üçün vektorlu CİS xüsusiyyətləri üçün məşhur bir formatdır. KML, əvvəllər Google tərəfindən dəstəklənən, lakin indi OGC standartında təsdiqlənən açıq bir spesifikasiyaya uyğun olaraq formatlaşdırılmış XML-dir. KML raster qatların yerləşdirilməsini təyin edə bilsə də, bu dərsdə vektor KML-ə diqqət yetirəcəyik.

KML-in arxasındakı əsas XML etiketi yer işarəsidir. Bu, bir popupda görünə biləcək bir coğrafi xüsusiyyəti, simvolu və əlavə məlumatları müəyyənləşdirir. Nümunə KML sənədini saxlayır və mətn redaktorunda açarsanız bəzi yer işarələrini görə bilərsiniz. Bu ən təmiz fayl deyil, ancaq bir yer işarəsini görmək üçün edəcəkdir:

Bundan sonra KML-ə aşağıdakı kimi bir təbəqədə müraciət edə bilərsiniz:

Xəbərdar olmağınız bir şey, Omnivore'un KML-i göstərmədən əvvəl GeoJSON formatına çevirməsidir (GeoJSON haqqında daha çox məlumat üçün dərsin sonrakı hissəsinə baxın). Beləliklə, xəritəniz əvvəlcə KML-də müəyyənləşdirilmiş bütün üslubu göstərə bilməyəcək. KML-də ballar üçün bir növ xüsusi şəkil simvolu varsa, bu şəkli markerlərə tətbiq etmək üçün broşura kodu yazmalısınız. Ancaq yuxarıdakı kodun KML təsvirini gətirdiyini və bu mətni pop-upda tətbiq etdiyinə diqqət yetirin. Bu, qatdakı bindPopup metodu ilə həyata keçirilir.

Yenə də bütün sintaksisini əzbərləməkdən narahat olmayın. Əksər ssenarilərdə yalnız öz KML-yə qoşulmaq üçün yuxarıdakı nümunəni çimdikləməlisiniz.


ArcGIS Onlayn Ölçmə Pop-Ups

ArcGIS Online-da pop-upların ölçüsünün necə dəyişdiriləcəyinə dair hər hansı bir məlumatın olub olmadığını merak edirdim. Hal-hazırda açılan qutu standart ölçülüdür (kiçik) və mətnim pis görünən və çox intuitiv olmayan açılan qutuda kəsilir. Kimsə məni qutunun ölçüsünü dəyişdirmək üçün doğru istiqamətə yönəldə bilərsə, çox yaxşıdır.

Xeyr. Ancaq bunu düşünürlər:

Görünən budur ki, açılan pəncərəni ekranın bir tərəfinə yerləşdirə bilər ki, bu da daha böyük ölçülü deməkdir.

Bəlkə bu barədə oxuduğum yerdəki bir ssenari idi?

& QuotPop Up Panel & quot adlı istifadə edə biləcəyiniz xüsusi bir widget var, onu son dərəcə faydalı tapdım, lakin istifadəçilərdən istifadə edə bilməsi üçün Veb Tətbiq Oluşturucusuna və öz tətbiqlərinizi yerləşdirməyin bir üsuluna ehtiyacınız var.

Xüsusi widgetlar / dev tətbiqləri olmadan açılan qutuları yenidən ölçmək üçün bir yol olmasa da, bunun üçün bir yol var. ArcGIS-dəki xəritələrin atribut sahələrinə onlayn HTML əlavə edə bilərsiniz və kod / mətn göstərmək əvəzinə istənilən veb səhifədə olduğu kimi görünəcəkdir.

Python ilə mətninizdəki uyğun yerlərə & lt / br & gt (sətir sonu) əlavə etmək üçün sadə bir ssenari yaza bilərsiniz ki, orta sözün qırılmasın. Əlavə olaraq, bir keçid əlavə etməyə çalışırsınızsa və uzun URL əvəzinə hiper bir keçid mətn kimi göstərmək istəyirsinizsə, aşağıdakı kimi bir şey istifadə edə bilərsiniz:


Leaflet ilə popupda link göstərilir? - Coğrafi İnformasiya Sistemləri

Bu gün sizi R üçün vərəqə paketi ilə tanış etmək istərdim. Bu paket, vərəqə xəritələrini R-ə inteqrasiya etməyi və idarə etməyi asanlaşdırır. Başqa sözlə: JavaScript-i heç bir məlumat olmadan R-dən olan məlumatlarınızla gözəl vərəqə xəritələri yarada bilərsiniz. , HTML, CSS və s. & # 8230 Gözəl səslənir, elədir? Bu necə işləyir & # 8230
Əvvəlcə bəzi məlumatlar hazırlayaq:

Bəzi təsadüfi məlumatlara çatmağın ən sürətli yolu, raster paketini yükləmək və getData () funksiyasından istifadə edərək seçdiyiniz bir ölkənin inzibati sərhədlərini yükləməkdir. Ölkə sərhədlərinin əlavə məlumatlar olmadan (əhali, gəlir və s.) Gəldiyini unutmayın. Daha sonra bəzi rənglər və açılan pencerələrdən istifadə edərək xəritəmizdəki bəzi məlumatları görüntüləmək istədiyimiz üçün SpatialPolygonsDataFrame-ə yeni bir sütun əlavə etdim və rnorm funksiyasından istifadə edərək təsadüfi məlumatlarla doldurdum.

Xəritəni yaradın

Vərəqə xəritəsi olan bir HTML səhifəsi yaratmağın ən asan yolu RMarkdown istifadə etməkdir. Bu məqsədlə Yeni Dosya - & gt RMarkdown - & gt HTML. Son RMarkdown sənədi belə görünür:

Gördüyünüz kimi kod qısa və olduqca intuitivdir:

leaflet () yeni broşura xəritəsini başlatır, plitələr / basemape addTiles () və ya addProviderTiles () funksiyalarından istifadə edərək əlavə edilə bilər. Mənim nümunəmdə CartoDB tərəfindən verilən & # 8220Positron & # 8221 adlı bir xəritəni daxil etdim. SetView () funksiyasından istifadə edərək görünüşü və zoom səviyyəsini təyin etdikdən sonra, məlumatlarınızı addPolygons () funksiyası ilə üst-üstə sala bilərsiniz. Və budur! KnitHTML düyməsini vurun və brauzerinizdəki son nəticəyə baxın:

Ümid edirəm R üçün çox güclü broşura paketi ilə tanış olmaqdan məmnun qaldınız, daha ətraflı dərsliklər və ya kod nümunələri ilə maraqlansanız, xahiş edirəm aşağıda bir şərh buraxın və ya R & # 8211 Təqdimat üçün bu rəsmi Vərəqəni ziyarət edin.


Humanitar elmləri Xəritəçəkmə: Rəqəmsal Humanitar Təqaüd üçün CİS və Xəritəçəkmə Vasitələri üzrə Rəhbər

Bu resurs, coğrafi məkanı təhlilini humanist səylərinə inteqrasiya etmək istəyən rəqəmsal humanitar elm adamlarına kömək məqsədi daşıyır.

Xəritəçəkmə və coğrafi informasiya sistemləri (CİS) humanitar elmlər təqaüdünü dəstəkləmək və ya artırmaq üçün güclü vasitə ola bilər, lakin hər vasitə hər rəqəmsal humanitar layihəyə uyğun deyil. Məsələn, interaktiv icma arxivi müəllifliyinin arxa plana keçməsinə imkan vermək əvəzinə bir çox şəxsə səs verən və iştirak üçün texniki maneələrin aşılması mümkün olmayan bir vasitə tələb edir. Müəlliflik sualları, fin-de-siecle Parisdəki sənətçilərin hərəkətləri və qarşılıqlı əlaqələrinin xəritəsi üçün daha az aktualdır, lakin belə bir proyekt, fasiləsiz animasiyalar və interaktiv açılan pəncərələri asanlaşdıran bir vasitə üzərində qurulsa yaxşı inkişaf edəcəkdir. istehsal olunan əsərləri nümayiş etdirir. Şəxsi yazışmaların xəritələşdirilməsi üçün yalnız nöqtə əsaslı məlumatlar tələb oluna bilər, lakin dəyişən siyasi və ya dil sərhədlərinin araşdırılması üçün əhatə dairəsinə əsaslanan məlumatlar əvəzolunmazdır. Hər bir yerleşim humanitar layihəsi “yerleşim analizi” ni bir az fərqli şəkildə müəyyənləşdirir və texniki platformasından fərqli qabiliyyətlər tələb edir. Layihənizə qarşı mübarizə aparmaq əvəzinə texnologiya ilə işləyə bilmək üçün iş üçün doğru bir vasitə seçmək vacibdir.

The İstinad cədvəli humanist tədqiqatların xüsusi ehtiyaclarına və narahatlıqlarına baxaraq bir neçə aparıcı CİS və xəritələşdirmə vasitələrinin imkanlarına ümumi baxış təqdim edir. The Ətraflı Sahə Bələdçisi (sağdakı bağlantılar) rəqəmsal humanitar elmlərdə ideal istifadəsinin qiymətləndirilməsi və faydaları və xərclərinin real qiymətləndirilməsi ilə birlikdə hər bir vasitənin dərindən təhlilini təmin edir. Birlikdə bu iki qaynaq rəqəmsal humanitar layihəniz üçün doğru xəritə / CİS alətini seçmək üçün lazımi məlumatları təqdim edir.


Google Maps-i Leaflet-də necə istifadə etmək olar?

Bu məqalə istifadəçiyə Leaflet istifadə edərək səhifədəki xəritəni göstərməyə kömək edir. Vərəqədən istifadə edərək xəritəni bir HTML elementinə çevirə bilərik və xəritədə işarəni təyin edə bilərik. Leaflet bütün əsas masa üstü və mobil platformalarda səmərəli işləyir.

Giriş

Vərəqə ağıllı veb xəritələr üçün açıq mənbəli JavaScript kitabxanasıdır. Yüngül, təməl və uyğunlaşa bilən və çox güman ki, əsas açıq mənbəli Xəritəçəkmə kitabxanasıdır. Vərəqə Vladimir Agafonkin (hazırda MapBox-dan) və müxtəlif tərəfdarları tərəfindən hazırlanmış və ya inkişaf etdirilmişdir.

Vərəqə nədir:

Böyütmə, Çini qatları, WMS, İşaretleyiciler, Popuplar, Vektor qatları (çox xətlər, çoxbucaqlılar, dairələr və s.), Görüntülü bindirmələr və GeoJSON ilə təchiz edilmiş kəskin xəritələr. Məlumat qatını dəyişdirmək və siçan əlaqələrini dəyişdirmək kimi fərqli əsas təşəbbüsləri idarə edir və plaginlərlə uzanması çətin olan bir şey var. Eynilə bir çox cihazın üzərində çarpaz şəkildə işləyəcəkdir. Leaflet-in faydalı olduğu ən geniş yayılmış veb xəritələr üçün bir giriş üçün Veb Xəritə Anatomiyasına baxın.
Sizin üçün hər hansı bir məlumat verin! Vərəqə, xəritə məlumatları ilə görünmək və əlaqə qurmaq üçün bir sistemdir, bununla birlikdə bir baza xəritəsi də daxil olmaqla bu məlumatları vermək sizin üçün asılıdır. Vərəqə, CİS-ə bənzər qabiliyyətlər üçün CartoDB kimi cihazlarla birləşdirilə biləcəyinə baxmayaraq CİS deyil. Forma, ünsiyyət, dəyişikliklər və xəritə proqnozları üçün bir fürsət əlavə etməyinizi tələb etdiyiniz qeyri-adi şansda.

Başlamadan əvvəl!

Sublime Text və ya Notepad ++ kimi mətn redaktoruna sahib olmalısınız.

Gəlin bir xəritə hazırlayaq!

Yuxarıdakı xəritə yalnız bir neçə şey tələb edir:

Leaflet JavaScript kitabxanası

& ltdiv & gt elementi xəritəni saxlamaq üçün

Xəritə div üçün göstərilən bir hündürlük stili.

Bu & ltdiv & gt-də xəritə yaratmaq üçün qısa bir skript

Vərəqə endirilir

Leaflet-i yükləyə bilərsiniz

Sonuna yaxın olan & ltscript & gt etiketindəki kod ətrafında mərkəzləşsək necə olar?
Nə etdik?

    • Bir xəritə dəyişən etdi
      • Xəritə obyektini yaratmaq üçün L.map () istifadə edilmişdir.
        • bu obyekti göstərmək üçün xəritəyə ehtiyacımız olan div idinə ötürmək
          • İlkin xəritəni cəmləşdirmək üçün setView () funksiyasından istifadə edin
          • Xəritə plitəsi şəkillərinin URL-sini ötürmək üçün L.tileLayer () funksiyasından istifadə edin. Xəritə plitələrinin əsas təbəqəsini yaratmaq üçün Məsələn, bu məqalədə google’in bazemap xəritəsini istifadə edirik. Buna baxmayaraq, orada çox sayda alternativ var. // Leaflet-in düzgün zoom, x və y plitələrini tapmaq üçün istifadə etdiyi bir formatdır. (Bax Veb Veb Xəritəsinin Anatomiyası). Eynilə, bir cüt göstərdik
            alternativlər:

          Bu çini qatını xəritəyə əlavə etmək üçün addTo () metodundan istifadə etdik, yeni yaratdıq.

          Səhifənizdə broşuradan istifadə üçün addımlar:

          Əvvəlcə css və js sənədlərini səhifənizə daxil edin

          Bir id ilə div element yaradın

          Xəritə konteynerinin müəyyən edilmiş bir hündürlüyə sahib olduğundan əmin olun.
          # mənim xəritəm

          Səhifənizə skript bölməsi əlavə edin

          Xəritə qurulur
          Əvvəlcə xəritəni işə salın və coğrafi koordinatları təyin edin və zoom səviyyəsini bu kodu window.onload-da edin
          var mymap = L.map ('xəritə'). setView ([51.505, -0.09], 13)

          L.tileLayer ('http: //.google.com / vt / lyrs = m & ampx =& ampy =& ampz =', <
          maxZum: 20,
          alt domenlər: ['mt0', 'mt1', 'mt2', 'mt3']
          >). addTo (mymap)

          xəritədə marker qoyun:

          İşarəni təyin etmək üçün coğrafi koordinatları L.markerə ötürəcəyik və xəritəyə əlavə edəcəyik

          var marker = L.marker ([51.5, -0.09]). addTo (mymap)

          Markerdə popup quraşdırın:
          Açılan pəncərəni təyin etmək üçün mesajı bindPopup-a ötürəcəyik və açılan pəncərəni açacağıq


          marker.bindPopup ('Mən markerəm.')
          marker.openPopup ()

          Xüsusi nişan işarəsini təyin edin:

          Nişanı düzəldin


          var customicon = L.icon (<
          iconUrl: 'customicon.png', // şəkil faylı
          iconSize: [38, 95], // ikon ölçüsü
          >)

          Bu işarəni xəritəyə əlavə edin

          var marker = L.marker ([51.5, -0.09], ) .addTo (mymap)
          marker.bindPopup ('Mən markerəm.')
          marker.openPopup ()

          İşarəni bir şəkil ikonundan daha çox HTML məzmunu olaraq təyin edə bilərik. Bunun üçün Div Icon yaradacağıq və sonra xəritəyə əlavə edəcəyik


          var markerOptions = <
          nişanı: yeni L.DivIcon (<
          className: 'my-div-icon',
          html: '& ltb style & gticon & lt / b & gt'
          >)
          >

          Xarici CSS də istifadə edilə bilər, baxmayaraq ki, satır içi CSS istifadə etdim.

          İndi markerə & # 8220markerOption & # 8221 dəyişənini əlavə edin

          var marker = L.marker ([51.5, -0.09], markerOptions) .addTo (mymap)

          marker.bindPopup (& # 8216Mən markerəm. & # 8217)
          marker.openPopup ()

          marker popupunu sətir və ya mətndən daha çox html məzmunu olaraq təyin edə bilərik. Bunun üçün popupa html əlavə edin və bu popupun enini və hündürlüyünü də təyin edə bilərsiniz


          var marker = L.marker ([51.5, -0.09]). addTo (mymap)
          marker.bindPopup ("& ltdiv & gt & lth2 & gtLondon, UK & lth / h2 & gt & lth3 & gtÇərşənbə,
          2:00 PM & lt / h3 & gt & lth3 & gtÇoğun Bulutlu & lt / h3 & gt & lt / div & gt ", <
          maksimum genişlik: 560
          >)
          marker.openPopup ()

          Müəllif haqqında:
          Zeeshan Raza Khan, 1.4 il təcrübəsi olan QSS Technosoft-da bir proqram geliştiricisi olaraq çalışır. .Net, PHP, jQuery, JavaScript biliklərinə sahib olmaq.