反応リーフレット：geojsonに基づいてズームを設定する方法

Question

私は反応リーフレットを使用しています。私はまた、<GeoJson>を使って多角形を重ね合わせることに成功しました。

私は現在、中心とズーム値をハードコードしていますが、デフォルトのズームを設定してGeoJSONポリゴン全体が表示されるようにしたいと思います。私はウェブ上で見つけたドキュメンテーション/答え（私は初心者/中級者のJSです）と闘っています。私は、開発ツールを反応させるの私の<MapHolder>コンポーネントを選択し、コンソールに切り替えて、

$r.refs.foo.leafletElement.fitBounds($r.refs.geojson.leafletElement.getBounds());

を実行して使用する場合

：

import React from 'react'; 
import { StyleSheet, css } from 'aphrodite/no-important'; 
import L from 'leaflet'; 
import { Map, TileLayer, Marker, Popup, GeoJson } from 'react-leaflet'; 
import axios from 'axios'; 

const styles = StyleSheet.create({ 
    map: { 
    height: 240, 
    width: '100%' 
    } 
}); 

const geodatas = { "type": "Polygon", "coordinates": [ [ [ 0.901409326032148, 51.87846074983652 ], [ 0.900728205963941, 51.87844428860128 ], [ 0.899345524616457, 51.8784325381963 ], [ 0.898758899468915, 51.878417331772674 ], [ 0.898382518544509, 51.87839424237513 ], [ 0.897325195329164, 51.878223304667991 ], [ 0.89594922021314, 51.877976588301692 ], [ 0.894955640203439, 51.877846407999037 ], [ 0.894280316390969, 51.877785709788448 ], [ 0.893320356777677, 51.877703150758911 ], [ 0.892628493048771, 51.877632959777358 ], [ 0.892139172447305, 51.877548791413972 ], [ 0.891852225577892, 51.877468544876464 ], [ 0.891748332612011, 51.877548514557468 ], [ 0.891456640213901, 51.877849701135801 ], [ 0.891291905863462, 51.878157745192553 ], [ 0.891212527716225, 51.878460992695949 ], [ 0.891079390830871, 51.879306113637384 ], [ 0.891068489722895, 51.879386403461886 ], [ 0.890532814748409, 51.879394179295069 ], [ 0.890012032842571, 51.879477202674821 ], [ 0.889375209183071, 51.879561187317655 ], [ 0.888523881288328, 51.879678311227721 ], [ 0.887732863790842, 51.87978495647382 ], [ 0.887717924807106, 51.879755652410928 ], [ 0.8877112616848, 51.879741430134168 ], [ 0.887496874906409, 51.879752090096723 ], [ 0.887360497828209, 51.879779715499488 ], [ 0.887280191227346, 51.879796073522684 ], [ 0.88718833818694, 51.879813614145419 ], [ 0.88706385375741, 51.879821166518113 ], [ 0.886767033455902, 51.879837445743426 ], [ 0.886758489556766, 51.879954631053209 ], [ 0.886578395546395, 51.879956355274935 ], [ 0.886452014758515, 51.879956760590304 ], [ 0.886200176414292, 51.879994412073138 ], [ 0.886030078804612, 51.880039946947051 ], [ 0.885567071719315, 51.880138525670596 ], [ 0.885346650339984, 51.880169110424305 ], [ 0.885139730722157, 51.880182280172704 ], [ 0.884856862688072, 51.88016764209975 ], [ 0.884439622271071, 51.880097857131176 ], [ 0.883460215670161, 51.879938459949649 ], [ 0.882545487519237, 51.879816041218362 ], [ 0.88202611994388, 51.879760440037977 ], [ 0.881353079538259, 51.879758054179931 ], [ 0.880867549737238, 51.879731289583212 ], [ 0.880629373069327, 51.879688482840614 ], [ 0.879914179646963, 51.879502802111887 ], [ 0.87909138760359, 51.879339442609194 ], [ 0.878624991225511, 51.879272639047592 ], [ 0.878295085017608, 51.879226768603523 ], [ 0.877982758160618, 51.879114741366571 ], [ 0.877645624873188, 51.878978235040002 ], [ 0.877294418532155, 51.8788708439507 ], [ 0.876897013638247, 51.878814842967316 ], [ 0.876417345581585, 51.878813991095299 ], [ 0.876164532039012, 51.87881388193393 ], [ 0.875555156171977, 51.878806309116875 ], [ 0.875145809085678, 51.87876776746041 ], [ 0.874727443401668, 51.878724949298828 ], [ 0.874688370094159, 51.879227792320627 ], [ 0.874678085840498, 51.879635434120594 ], [ 0.874646030296739, 51.879634419620402 ], [ 0.874509194844878, 51.879630572109889 ], [ 0.874491729010884, 51.87963099911331 ], [ 0.874461033018298, 51.879763919892177 ], [ 0.874266864459982, 51.879772263150876 ], [ 0.874273115896171, 51.879825158282216 ], [ 0.874509916131233, 51.879778908931314 ], [ 0.874571095956836, 51.879802588494051 ], [ 0.875011735049452, 51.880879207933553 ], [ 0.875063877959868, 51.881012800603493 ], [ 0.875154852104679, 51.881208471872306 ], [ 0.875175413531478, 51.881256521442964 ], [ 0.87529051738762, 51.881443510495714 ], [ 0.875489363187087, 51.881780402402256 ], [ 0.875722161078739, 51.882104775064533 ], [ 0.876014940309792, 51.882456451913107 ], [ 0.876082550654661, 51.88253571873868 ], [ 0.876168143697128, 51.882579480046651 ], [ 0.876482554975814, 51.882723829494935 ], [ 0.876539940045734, 51.88280244710019 ], [ 0.876593128121568, 51.882884763830063 ], [ 0.876828235972976, 51.883290088395555 ], [ 0.877005895766627, 51.883703921217418 ], [ 0.877029497141308, 51.883778869632195 ], [ 0.877124155114336, 51.884054470794702 ], [ 0.877175392208823, 51.88415122089723 ], [ 0.877258066409254, 51.884194243657916 ], [ 0.877339931934844, 51.884224608588156 ], [ 0.877423526548593, 51.884235150553707 ], [ 0.877430762369245, 51.884235872597479 ], [ 0.877656259525027, 51.884261823162831 ], [ 0.877765412001952, 51.884310401458563 ], [ 0.877891165133687, 51.884457476321913 ], [ 0.877997316320446, 51.884822797224388 ], [ 0.878229652774874, 51.885819896448112 ], [ 0.87834363069242, 51.886056361674164 ], [ 0.878505517980494, 51.886361785147784 ], [ 0.878571706765954, 51.886351173607551 ], [ 0.880334009665515, 51.886091239694117 ], [ 0.880424791914881, 51.886077327296213 ], [ 0.88043783327319, 51.88607700782093 ], [ 0.880704881703364, 51.886025509676543 ], [ 0.88090326748098, 51.88597029854111 ], [ 0.880981920754037, 51.885926022943693 ], [ 0.881055688461447, 51.885876562201595 ], [ 0.881139171026242, 51.8858178721824 ], [ 0.881241958942011, 51.88574252491086 ], [ 0.881337559220615, 51.885715906077138 ], [ 0.881385937856071, 51.885676058458287 ], [ 0.881404549670886, 51.885672905013088 ], [ 0.881631036319648, 51.885667354634286 ], [ 0.882076471813645, 51.885656437325643 ], [ 0.882056078006435, 51.885745949945587 ], [ 0.881993450315757, 51.88585897570433 ], [ 0.881874182519518, 51.885948304245524 ], [ 0.881879755943845, 51.886035382145558 ], [ 0.882347992750353, 51.887241671205189 ], [ 0.882404707654513, 51.88749113499459 ], [ 0.882853957884807, 51.887494597204501 ], [ 0.884028759735186, 51.887500853841111 ], [ 0.885202413300444, 51.887511622501421 ], [ 0.886590316907309, 51.88753330410465 ], [ 0.887555928029772, 51.88756264315473 ], [ 0.888202481793116, 51.88758182931528 ], [ 0.888956015183013, 51.887592988828722 ], [ 0.889658183982424, 51.88759551550784 ], [ 0.890322869160589, 51.887490165863746 ], [ 0.892203940736874, 51.887131827383271 ], [ 0.892629205597487, 51.887054831392291 ], [ 0.893388163095852, 51.886969623054483 ], [ 0.89404980532498, 51.886929063714575 ], [ 0.895280219891035, 51.886805174667664 ], [ 0.895323478152911, 51.886801412129813 ], [ 0.896179817068388, 51.886713787718342 ], [ 0.897415056318077, 51.886622215638788 ], [ 0.898647041286751, 51.886591851018451 ], [ 0.899686268373963, 51.886569823711085 ], [ 0.900351520883763, 51.886540828313116 ], [ 0.900884573173965, 51.886511494268028 ], [ 0.901340110935552, 51.886476877525794 ], [ 0.901562391659487, 51.886452510943201 ], [ 0.901902151973541, 51.886402766551157 ], [ 0.902463248379137, 51.886291722255116 ], [ 0.902757098309845, 51.886226924440386 ], [ 0.903150888634868, 51.886113803082765 ], [ 0.903243962294006, 51.886226592689667 ], [ 0.903355623961783, 51.886291269748519 ], [ 0.903443835883261, 51.886328652951633 ], [ 0.903640578390754, 51.886359849425965 ], [ 0.903777366271163, 51.886451778405799 ], [ 0.903921275467924, 51.886542632232221 ], [ 0.904619569200365, 51.886529879935892 ], [ 0.904647145263885, 51.886530097842467 ], [ 0.904644680496465, 51.886423163114955 ], [ 0.904806010678643, 51.886423673231825 ], [ 0.904807446404658, 51.886423637762697 ], [ 0.906076204161999, 51.886422856835182 ], [ 0.907022198544648, 51.886441731102899 ], [ 0.90730666281605, 51.88645807500005 ], [ 0.907404335168953, 51.886463752026572 ], [ 0.90810606059014, 51.886526420497582 ], [ 0.908497633992893, 51.886559083872683 ], [ 0.909250409977232, 51.886669934534716 ], [ 0.909920399282772, 51.886781031005334 ], [ 0.910794842211242, 51.886931209477844 ], [ 0.911857500375587, 51.887069437663193 ], [ 0.914187992691951, 51.887236571851361 ], [ 0.915564259859456, 51.887368881794721 ], [ 0.916237185524361, 51.887458290661186 ], [ 0.917096872133215, 51.88757992659508 ], [ 0.91728495272614, 51.887612214370037 ], [ 0.917386434020573, 51.887630376379299 ], [ 0.917533327200215, 51.887543023084007 ], [ 0.917674599005015, 51.887457697250859 ], [ 0.917830466960201, 51.887372009032987 ], [ 0.917964904772121, 51.887294045428717 ], [ 0.91799293120233, 51.887277165650318 ], [ 0.918270843270076, 51.887147897468367 ], [ 0.918324311895519, 51.887120495771434 ], [ 0.918260947025518, 51.887063625303497 ], [ 0.918242493122197, 51.887046999930959 ], [ 0.918219263299262, 51.887025098336316 ], [ 0.918193394778538, 51.887006858727382 ], [ 0.918167681980051, 51.886968834490808 ], [ 0.918121993594273, 51.886892553702928 ], [ 0.918118598509993, 51.8868845458341 ], [ 0.918111416611052, 51.886886522324808 ], [ 0.918092090118659, 51.886856431705347 ], [ 0.918088866304774, 51.886852915211819 ], [ 0.918070859203, 51.886820993594071 ], [ 0.918054695110634, 51.886795320112185 ], [ 0.918012659454562, 51.886753205307109 ], [ 0.918019724977938, 51.886749433459734 ], [ 0.918029545579465, 51.88674379498778 ], [ 0.918070768510037, 51.88670680692686 ], [ 0.918078917373575, 51.886699411688461 ], [ 0.918082936905406, 51.886693018055482 ], [ 0.918085575617747, 51.886689356067215 ], [ 0.918085284714103, 51.886684867660044 ], [ 0.918084993810534, 51.886680379252859 ], [ 0.918074688990573, 51.886656358610303 ], [ 0.918026444493577, 51.886538781457205 ], [ 0.917967819210123, 51.886442231699029 ], [ 0.917917539541698, 51.8863616590615 ], [ 0.917856018831887, 51.886242613057391 ], [ 0.917875485331733, 51.886228643096942 ], [ 0.917905644965449, 51.886222499897784 ], [ 0.918266441324591, 51.886138918296524 ], [ 0.91843543741289, 51.886100557024506 ], [ 0.918588288139598, 51.886058999768181 ], [ 0.918621765414349, 51.886037488897976 ], [ 0.918650101834482, 51.885981039731959 ], [ 0.918654816251417, 51.885987216586045 ], [ 0.918698403834106, 51.886031090891748 ], [ 0.918908038135575, 51.886013299171736 ], [ 0.919197702484083, 51.885998914921643 ], [ 0.919223496487564, 51.885991980642089 ], [ 0.919256527153531, 51.88598576581176 ], [ 0.919292603806707, 51.885982172722741 ], [ 0.919311329258946, 51.885980808676692 ], [ 0.919346148055345, 51.885978145927318 ], [ 0.919367457097976, 51.885970423845514 ], [ 0.919365436126073, 51.885963281018427 ], [ 0.91935093750544, 51.885872739394792 ], [ 0.919346665993608, 51.885853064685733 ], [ 0.919340263582773, 51.885820855124173 ], [ 0.919328542022821, 51.885752812601339 ], [ 0.919289882788854, 51.885559471383921 ], [ 0.919280004480731, 51.88549767697058 ], [ 0.919249774710786, 51.885343777893503 ], [ 0.919220816514632, 51.885211336342415 ], [ 0.919208881861081, 51.885162180736742 ], [ 0.919188799077709, 51.885053885128599 ], [ 0.919179322619601, 51.884998284695968 ], [ 0.919168652382673, 51.884944602064856 ], [ 0.919127319807822, 51.884778390844936 ], [ 0.919103755432662, 51.884706955902153 ], [ 0.919031022166563, 51.88470516511407 ], [ 0.918878337657739, 51.884727028021807 ], [ 0.918790953612087, 51.884722903411216 ], [ 0.918757889943345, 51.884414335024665 ], [ 0.918735830940248, 51.883872529953408 ], [ 0.918749725312522, 51.883661699688126 ], [ 0.91876948654494, 51.883517348999135 ], [ 0.918807074323049, 51.883335601694213 ], [ 0.91889079846776, 51.882878475620764 ], [ 0.918958313313544, 51.882417166316976 ], [ 0.918982419246705, 51.882251128670951 ], [ 0.91903609340834, 51.881868386851345 ], [ 0.919083135265649, 51.88171976225923 ], [ 0.919132074133214, 51.881646617138863 ], [ 0.919460445307968, 51.881375829199726 ], [ 0.919682376169793, 51.881189504020099 ], [ 0.919622144819442, 51.881156832903159 ], [ 0.919532145528479, 51.881114111420317 ], [ 0.919467662737287, 51.881084243173227 ], [ 0.9193478408487, 51.88102877517116 ], [ 0.919311923435926, 51.881012583586418 ], [ 0.919145777688999, 51.880937495751546 ], [ 0.918979576869284, 51.880863398092266 ], [ 0.918770168817696, 51.880769692921554 ], [ 0.91874166217972, 51.880756913698789 ], [ 0.918749929520663, 51.880749515455761 ], [ 0.918664590785148, 51.8807102741292 ], [ 0.91853467017157, 51.88081510045231 ], [ 0.918421577960399, 51.880907820274757 ], [ 0.91828483339089, 51.881018300359699 ], [ 0.918189474725769, 51.881094395519042 ], [ 0.91809830931614, 51.881166790020707 ], [ 0.917993479597975, 51.881253909586817 ], [ 0.917904394743247, 51.881336232592744 ], [ 0.917810644813509, 51.881414984882035 ], [ 0.917765061520439, 51.881451182002245 ], [ 0.917727277189953, 51.881474597804313 ], [ 0.917687827925033, 51.881492660154741 ], [ 0.917648938456006, 51.881499019964004 ], [ 0.917592528229499, 51.881503117155624 ], [ 0.917556338675728, 51.881504914307293 ], [ 0.917505499482299, 51.881504377586126 ], [ 0.917451553238886, 51.881502119688008 ], [ 0.917286552659126, 51.881490928668363 ], [ 0.917022454180388, 51.881474103927459 ], [ 0.916854640826272, 51.881463881213051 ], [ 0.916681143470547, 51.881454698387849 ], [ 0.916542458322954, 51.881444651770153 ], [ 0.916450828929447, 51.881443328165275 ], [ 0.916365058019841, 51.88144365742528 ], [ 0.91613912610168, 51.88145555515014 ], [ 0.915933298553328, 51.881463357339797 ], [ 0.915652217169243, 51.881476621848734 ], [ 0.915484247081051, 51.881486181825672 ], [ 0.915303179167124, 51.881495167199617 ], [ 0.915032382081902, 51.881509973470926 ], [ 0.914778873006563, 51.881523451410523 ], [ 0.914515256753215, 51.881536280217745 ], [ 0.914315286865372, 51.881545732613532 ], [ 0.914202349364867, 51.881552128410966 ], [ 0.91416305610943, 51.881550404942168 ], [ 0.914133753676999, 51.881547534711132 ], [ 0.914092037330798, 51.881530586147313 ], [ 0.914064635192414, 51.881534861802102 ], [ 0.914058939568137, 51.881604235603618 ], [ 0.913871780046409, 51.881607974990075 ], [ 0.913900532364438, 51.88133383846192 ], [ 0.913917565262247, 51.88074341037305 ], [ 0.913915618714501, 51.880511484301309 ], [ 0.913833603674322, 51.880456872005311 ], [ 0.913786842581242, 51.880386010937187 ], [ 0.913649135214015, 51.880053959957102 ], [ 0.913403240720076, 51.879533075995766 ], [ 0.913283588243218, 51.879300380117705 ], [ 0.913185285838128, 51.879038383111109 ], [ 0.913038300145875, 51.878653512941725 ], [ 0.912870983102134, 51.878111709462075 ], [ 0.912874541304731, 51.877694337226671 ], [ 0.912882068522283, 51.877542108633129 ], [ 0.912867085588723, 51.877466054180474 ], [ 0.912805599364724, 51.877437906363596 ], [ 0.912671047036016, 51.877400779144196 ], [ 0.912582803327189, 51.877384982718738 ], [ 0.912494153328336, 51.877362902414752 ], [ 0.912106774318374, 51.87730497366146 ], [ 0.911659053816844, 51.877279198182528 ], [ 0.910845194815755, 51.87725529345915 ], [ 0.909926648245021, 51.877274434814687 ], [ 0.909670899249886, 51.877252891518367 ], [ 0.909314163264232, 51.877218561517246 ], [ 0.908384292245072, 51.8771309752075 ], [ 0.908277728226409, 51.877122731840934 ], [ 0.908232519705985, 51.877120253622557 ], [ 0.908188745426027, 51.877208641402873 ], [ 0.908007083445798, 51.877545900731107 ], [ 0.907888040374143, 51.87770439359209 ], [ 0.907726401053779, 51.877900893805283 ], [ 0.907586018157088, 51.878023949121449 ], [ 0.907354930378132, 51.878224863611997 ], [ 0.90713896490615, 51.878368668968015 ], [ 0.907122137459287, 51.878378975413113 ], [ 0.907045194451947, 51.878425024888081 ], [ 0.906476964377067, 51.878739470610434 ], [ 0.906305963132985, 51.878857886479572 ], [ 0.905803484441867, 51.879157216640536 ], [ 0.90439353651545, 51.880006840402224 ], [ 0.904392100993312, 51.880006875863238 ], [ 0.904344316112181, 51.880033231718144 ], [ 0.904336166117978, 51.8800406260278 ], [ 0.904185133823075, 51.880132560746368 ], [ 0.904031996055894, 51.880282900377274 ], [ 0.904003347248133, 51.880310581683851 ], [ 0.903871370881516, 51.880270683389554 ], [ 0.903593978168444, 51.880183126162159 ], [ 0.903353643783826, 51.880107240915706 ], [ 0.903161900201356, 51.880017477750883 ], [ 0.90296870540926, 51.879882883859892 ], [ 0.902777974766133, 51.879630353765876 ], [ 0.902671125181507, 51.879506215333478 ], [ 0.902619161218453, 51.879443570543998 ], [ 0.902557150743474, 51.879383061909991 ], [ 0.902488132571657, 51.879327221855746 ], [ 0.902407746268306, 51.879273460640192 ], [ 0.9022556990, 51.879169319160937 ], [ 0.90213067173243, 51.879123762764571 ], [ 0.902039998502742, 51.879070255219737 ], [ 0.901914565974001, 51.878994228325332 ], [ 0.901692967582603, 51.87880359876965 ], [ 0.901515661277313, 51.878601176198579 ], [ 0.901441918235169, 51.878516590297131 ], [ 0.901409326032148, 51.87846074983652 ] ] ] } 

class MapHolder extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     geodatas: geodatas, 
     lat: 51.881403, 
     lng: 0.918583, 
     zoom: 17, 
    }; 
    } 


    render() { 
const accessToken = 'pk.eyJ1IjoiZ2F6YXN0b24iLCJhIjoiY2loa21hNzRoMG50eHQ0bHp2azNpeHhwaiJ9.h81FekBCVUufbqxc9ywySQ' 
const position = [this.state.lat, this.state.lng]; 

console.log(this.refs.geojson); 
console.log(this.refs.foo.leafletElement); 

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.getBounds()); 

return (
    <div> 
    <Map ref="foo" style={{height: "260px"}} center={position} zoom={this.state.zoom} scrollWheelZoom={false} > 
    <TileLayer 
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     url={`https://api.mapbox.com/styles/v1/gazaston/cihkojpjh00whrom498ghjoc5/tiles/256/{z}/{x}/{y}?access_token=${accessToken}`} 
     id='gazaston.o9phia6g' 
     detectRetina={true} 
    /> 
    <GeoJson ref="geojson" data={this.state.geodatas} /> 
    </Map> 
    </div> 
); 

} 

export default MapHolder; 

UPDATE：ここ

は私のコンポーネントです

すべて正常に動作します。しかし、私のコードで

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());

戻りUncaught TypeError: Cannot read property 'leafletElement' of undefined

私はとても近いんですよ！私は何が欠けていますか？

Answer 1

@IvanSanchez応答に基づいて、どのように私が最初にあなたにGeoJSON層

<GeoJson ref="geojson" data={this.state.geodatas} /> 

に参照を追加することをお勧め反応し、リーフレット作品はその後、そのため、そのREF

this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds()) 

Answer 2

でマップにアクセス反応リーフレットがそのlifecycleを処理して、Mapコンポーネントをマウントした直後に制御をリーフレットに切り替えると、サブコンポーネントのrefにアクセスするのは難しいことがあります。

私はこの問題を2通り解決しました。

最初の試みでは、外側のコンポーネントの状態で追加していた機能の数を保存し、上記のようにlayeraddのマップオブジェクトイベントハンドラをアタッチし、すべてのポリゴンが追加されたらGeojson refにアクセスしました。

`` `

componentDidMount() { 
    let count = 0; 
    const map = this.refs.map.leafletElement; 
    map.on('layeradd',() => { 
     count += 1; 
     if (count > this.state.polygonCount) { 
      setTimeout(()=>{DO STUFF}, 200) 
     } 
    }); 
} 

` ``

これは動作しますが、それが臭いです。

私がこれを解決したのはturf-bboxを使用してgeojsonの境界を事前に計算し、それを次に私のレンダー方法でMapオブジェクトに渡したことです。

`

const bboxArray = bbox(geojson); 
const corner1 = [bboxArray[1], bboxArray[0]]; 
const corner2 = [bboxArray[3], bboxArray[2]]; 
this.state.bounds = [corner1, corner2]; 

`

、次いで

`

<Map bounds={this.state.bounds} ref="map"> 

`

第二の方法は、非常にクリーンであります何もする必要がなければGeoJSONのリーフレット要素でもっと多くのことをすることができますが、最初の方法では、任意の数のイベントハンドラなどを設定できます。