Mapbox vector tile examplemapbox vector tiles exampleVector tileVector tile serverMapbox vector tile github javamapbox vector tiles github

Vector tiles tutorial — GeoServer 2.21.x User Manual

文章推薦指數： 80 %
投票人數：10人

Vector tile formats¶. GeoServer can also produce vector tiles in three formats: GeoJSON, TopoJSON, and MapBox Vector (MVT). These are also supported by ... GeoServer About Blog Download Documentation GeoServer2.21.xUserManual» Extensions» VectorTiles» Vectortilestutorial Next Previous| Vectortilestutorial¶ ThistutorialwillshowhowtousetheGeoServervectortilesoutput. Whyusevectortiles?¶ Theadvantagesofvectortilesare; Renderingisdonebytheclient(forexample,OpenLayers),notbytheserver.Thisallowsdifferentmaps/applicationstostyleamapdifferentlywithouthavingtoreconfigureGeoServer. Thesizeofavectortileisusuallysmallerthananimagetile,resultinginfasterdatatransferandlowerbandwidthusage. GeoWebCache,embeddedwithGeoServerefficientlystoresthevectortiledata.Sincestylingisdonebytheclient,nottheserver,GeoWebCacheonlyneedstostoreonetileforalldifferentstyles. Becausethevectordataisavailableontheclient,veryhigh-resolutionmapscanbedrawnwithoutcorrespondingincreasesinbandwidth. Theclienthasnativeaccesstotheactualfeatureinformation(attributesandgeometry),allowingforverysophisticatedrendering. Ontheotherhand,themaindisadvantageofvectortilesisthatthegeographicdatamayneedtobepre-processedtoallowtheclienttodothedrawingsitrequires(similartopreprocessingdataforimagemaps).Withthisinmind,vectortilesshouldonlybeusedforrendering. Vectortileformats¶ GeoServercanalsoproducevectortilesinthreeformats:GeoJSON,TopoJSON,andMapBoxVector(MVT).ThesearealsosupportedbyOpenLayersandotherclients. Warning Whenusingvectortiles,besuretouseanup-to-dateclient.Olderclientsdonotsupportallvectortilescapabilitesandmayresultinrenderingerrors.WerecommendusingthelatestversionofOpenLayers(Currentlyv5.3.0). MVTisthepreferredformatforproduction. MapBoxVector(MVT) application/vnd.mapbox-vector-tile RecommendedFormatThisisanefficientbinaryformatthatiswidelysupportedbyalmostallVectorTileapplications. GeoJSON application/json;type=geojson ThisisahumanreadableJSONformat.Althoughmanygeo-spatialapplicationssupportGeoJSONdatasets,fewVectorTileapplicationssupporttilesinthisformat.SupportedbyOpenLayers3. TopoJSON application/json;type=topojson Thisisaverycomplex,butsomewhathumanreadableJSONformatthatisgoodforpolygoncoverages.ItisnotawidelysupportedandveryfewVectorTileapplicationssupportit.SuportedbyOpenLayers3. PublishvectortilesinGeoWebCache¶ We’llbepublishingourvectortilesthroughGeoWebCacheandpublishingthelayerinacustomOpenLayersapplication. Forthistutorial,we’llbeusingthelayeropengeo:countriestoshowoffthecapabilities,thoughwithslightmodifications,anylayerwilldo. Note DownloadtheAdmin0-Countriesshapefileandpublishthelayerasopengeo:countries. IntheGeoServeradmininterface,clickTileLayersunderTileCaching. TileLayers¶ Clickopengeo:countriesinthelistoflayers. Bydefaultthetileformatsareimage/jpegandimage/png.Checktheboxesforthefollowingvectortileformats: application/json;type=geojson application/json;type=topojson application/vnd.mapbox-vector-tile Vectortilestileformats¶ ClickSave. Ourlayerisnowreadytobeserved. CreateOpenLayersapplication¶ Createawww/vectortilesdirectoryinsideyourGeoServerDataDirectory. DownloadthelatestversionofOpenLayers. Extractthefollowingfilestofromthedownloadedarchivetothedirectorycreatedinstep1: ol.js ol-debug.js ol.css Inatexteditor,createanewfilewiththefollowingcontent:

Vectortiles

MapboxProtobuf-vectortiles

Savethisfileinthedirectorycreatedaboveasindex.html. Navigatetohttp://localhost:8080/geoserver/www/vectortiles/index.htmlandverifythattheoutputshowswithoutanyerrors. Note IfyourGeoServerisdeployedataserverotherthanhttp://localhost:8080/geoserver/,thenpleaseadjusttheaboveURL. Vectortileoutput¶ ThesetilesarebeingrenderedbytheOpenLayersclient. Stylingvectortiles¶ Sincethesetilesarerenderedintheclient,weneedonlychangethestylinginstructionsinsidetheclientapplication.NochangestoGeoServerarerequired,andtileswillnothavetoberegenerated. Changethefillcolortolightgreen: varstyle_simple=newol.style.Style({ fill:newol.style.Fill({ color:'lightgreen' }), stroke:newol.style.Stroke({ color:'#880000', width:1 }) }); Savethefileandreloadtheapplication. Vectortileoutputwithalternatecolor¶ Wecanalsodoattributed-basedstyling.Thisdatasetcontainshasaproperty(region_un)whichcontainstheregionthecountryisin.Let’shighlightcountriesinAfricabyaddinganotherstyledefinitionbelowtheexistingstyle: varstyle_highlighted=newol.style.Style({ fill:newol.style.Fill({ color:'yellow' }), stroke:newol.style.Stroke({ color:'#880000', width:1 }) }); Replacetheexistingstylefunction: functionsimpleStyle(feature){ returnstyle_simple; } withthefollowing: functionsimpleStyle(feature){ if(feature.get("region_un")=="Africa"){ returnstyle_highlighted; } returnstyle_simple; } Savethefileandreloadtheapplication. VectortileoutputwithAfricahighlighted¶ Previous:InstallingtheVectorTilesExtension Next:XSLTWFSoutputformatmodule TableOfContents Vectortilestutorial Whyusevectortiles? Vectortileformats PublishvectortilesinGeoWebCache CreateOpenLayersapplication Stylingvectortiles ContinueReading Previous:InstallingtheVectorTilesExtension Next:XSLTWFSoutputformatmodule ThisPage Edit KnownGeoServerissues Jiraissuetracker ©Copyright2021,OpenSourceGeospatialFoundation.LicenseCreativeCommonsAttribution. LastupdatedonNov15,2021. CreatedusingSphinx.

請為這篇文章評分？

延伸文章資訊