Как вставить данные зоны из www.educationcounts.govt.nz в мою собственную карту Leaflet? - PullRequest
0 голосов
/ 18 июня 2020

На этом веб-сайте https://www.educationcounts.govt.nz/find-school/school/profile?school=780&district=16&region=3 расположение школ показано на карте, и в некоторых школах есть зоны приема, поэтому только определенные области школы позволяют учащимся записываться. Есть ли способ добавить возможность встраивания зонированной карты на другой веб-сайт? Например, если школа хотела встроить карту на свой веб-сайт? [Это карта OpenStreetMap с использованием Leaflet]

1 Ответ

1 голос
/ 18 июня 2020

Похоже, вы имеете в виду выделенную область на картах на веб-сайте educationcounts.govt.nz :

enrollment zone

Немного поигравшись с сетевым монитором веб-браузера , показывает, что данные для этой области регистрации передаются через Geo JSON (заключенные в тривиальную структуру данных JSON) через конечную точку https://www.educationcounts.govt.nz/js-content/school-enrolment-zone-geo-data?school=780 , где 780 - это числовой c школьный идентификатор. Это хорошие новости: конечная точка не запутана, нет процесса регистрации в API, никаких странных вещей.

Теперь есть несколько способов добавить данные в вашу собственную карту Leaflet. Можно было бы получить некоторые javascript данные запроса от этой конечной точки с вашей веб-страницы, а затем позволить Leaflet проанализировать и отобразить эти данные Geo JSON, то есть:

fetch('https://www.educationcounts.govt.nz/js-content/school-enrolment-zone-geo-data?school=780')
.then(function(response){return response.json()})
.then(function(json){
    var zone = L.geoJson(json.schoolZones[0]).addTo(map);
    map.fitBounds(zone.getBounds());
});

Однако, если вы попробуйте чтобы запустить этот , вы получите ошибку CORS . Это означает, что веб-страница, размещенная в доменном имени educationcounts.govt.nz, может запрашивать данные из конечной точки, размещенной в educationcounts.govt.nz, но если веб-страница и конечная точка данных находятся в разных доменах, ничего не будет работать.

Второй подход - настроить прокси-сервер. Браузер, посещающий вашу веб-страницу, будет запрашивать данные с конечной точки на вашем прокси-сервере, а затем ваш прокси-сервер будет запрашивать данные с конечной точки educationcounts.govt.nz. Я чувствую, что то, как установить такой прокси-сервер, выходит за рамки этого ответа.

Другой подход тогда был бы старым добрым копипастом. Обратите внимание, что мы можем это сделать, поскольку Министерство образования Новой Зеландии разрешает это делать любому :

"[...] Если не указано иное для c items [. ..] этот материал, защищенный авторским правом, лицензирован для повторного использования в соответствии с международной лицензией Creative Commons Attribution 4.0. По сути, вы можете свободно копировать, распространять и адаптировать материал, если вы приписываете его [название агентства / лицензиара] и соблюдайте другие условия лицензии. [...]

Таким образом, вы можете просто загрузить https://www.educationcounts.govt.nz/js-content/school-enrolment-zone-geo-data?school=780, скопировать и вставить данные Geo JSON в свой JS код, добавить ссылку на источник текст, и все будет готово, например:

var geojson_for_school_780 = {
    "type": "Feature", 
    "geometry": {
        "type": "Polygon",
        "coordinates": [[[175.228088376393515, -37.72252796906151], [175.226034730098121, -37.720644653205419], [175.22766664238091, -37.719790045099124], [175.226669852036935, -37.719494534245776], [175.226063764869849, -37.719139298407981], [175.225684377028415, -37.718639517004007], [175.229416445471969, -37.718249363032648], [175.229085250983672, -37.71615637690455], [175.232916799597604, -37.715781597614502], [175.232994305233518, -37.716138715739554], [175.233444251633273, -37.716777017700473], [175.234158364268694, -37.71640115383375], [175.236281071637421, -37.716492901297777], [175.236778969848842, -37.714982027731864], [175.23678197389944, -37.714972736633278], [175.237007068442892, -37.714289969996393], [175.237241870249363, -37.713577440478581], [175.237270572373717, -37.713490244242642], [175.240150572754345, -37.714065821500597], [175.240643435719903, -37.712513828060004], [175.243666181667777, -37.712865753620441], [175.250868816480903, -37.716764632124416], [175.251583336046906, -37.717696153282141], [175.254009088257504, -37.723034477939613], [175.253880254830392, -37.723454795140654], [175.25349101820072, -37.723784706999517], [175.253036672946649, -37.724303029748867], [175.252594231767404, -37.72400311293994], [175.251708805537902, -37.724234350926004], [175.250761189334611, -37.724405921967168], [175.248617924442527, -37.724701883851303], [175.248670831855691, -37.724983622610388], [175.248108644705894, -37.725216958649114], [175.248650574856413, -37.725715016374757], [175.249211188456741, -37.72611261827015], [175.249655009537463, -37.726795407802669], [175.249611471330013, -37.727653444472836], [175.249251932365951, -37.728735469804036], [175.24882851502224, -37.729535978099591], [175.248699477963925, -37.729951947833527], [175.248679639737873, -37.730696376073432], [175.247396212196207, -37.730617917521215], [175.246153794004499, -37.730656875737637], [175.241864451038253, -37.727794371200304], [175.241180169528519, -37.728000311784783], [175.240588231182812, -37.727848333950995], [175.240153830359304, -37.727715480402672], [175.239851710703874, -37.727454948983301], [175.239875963992915, -37.727229477760901], [175.240149140367777, -37.726915638650944], [175.240215554761789, -37.726697642096219], [175.239903506117116, -37.726453987907334], [175.239653784325327, -37.726127205552878], [175.239401725478814, -37.725855878978372], [175.23926283076392, -37.725450394672841], [175.238884215081299, -37.725544253360944], [175.238640207482177, -37.725662986352773], [175.238359547776611, -37.725743664646863], [175.237811460334513, -37.725663095694664], [175.237255020354979, -37.725649360565903], [175.236522478420255, -37.725705843488996], [175.235863906512094, -37.725769794857271], [175.235254998449847, -37.725764800151751], [175.234768745586678, -37.725649642237613], [175.23447386768197, -37.725613939759789], [175.234072007153287, -37.725513740156622], [175.233809457524046, -37.725177407031069], [175.233740971157573, -37.725003820731189], [175.233592583214886, -37.724956818310353], [175.23343240605891, -37.724868400347226], [175.233446176252102, -37.724643142640126], [175.232926621407813, -37.724158104107403], [175.232567102025371, -37.72386686778475], [175.232324859841981, -37.723743049267213], [175.231984024121715, -37.723568840798833], [175.23168917633987, -37.723418148852147], [175.230339273580199, -37.721887519404923], [175.230117128172367, -37.720706116231113], [175.229491841292969, -37.720595274641148], [175.229321718089551, -37.720651789039294], [175.229205499717182, -37.720954090252832], [175.228911973926813, -37.72096000947694], [175.22877250197385, -37.720862830025283], [175.228781549692457, -37.721145956121312], [175.228565121524923, -37.721266978437441], [175.228351630524628, -37.72147959497768], [175.228462480264795, -37.721993967796962], [175.228088376393515, -37.72252796906151]]]}, "properties": {"Office": "HM", "PolyID": 780, "INSTTYPE": "Contributing", "PolyName": "Te Ao Marama School", "SchoolID": 780, "ApprovalDate": "2017/03/16", "EffectiveDate": "2019/01/01"
    }
}

var zone_780 = L.geoJson(geojson_for_school_780,{
    attribution: "<a href='https://www.educationcounts.govt.nz/site-info/privacy'>CC-by NZ Ministry of Education</a>"
});

zone_780.addTo(map);
map.fitBounds(zone_780.getBounds());

См. рабочий пример здесь .

Это имеет (очевидный) недостаток, заключающийся в том, что его нелегко автоматизировать если вы хотите сделать это для тысячи школ, и любые обновления исходных данных не будут отражены в вашей копии. Если это проблема, пора подумать об автоматизации процесса.

В в любом случае, связь с веб Персонал может быть хорошей идеей. У них могут быть другие каналы для распространения географических данных школ, которые не рекламируются, и они могут быть полезны, особенно если конечными получателями являются школы.

...