您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 项目/工程管理 > OpenLayers
OpenLayersWorkshopThomasWoodOpenLayersUser&ContributorSoCSummerSchool09SouthamptonTuesday,8thSeptemberFollowalongwiththedemosat●“anOpenSourcemapviewingframeworkwritteninJavaScript”-analternativetocommercialmappingAPIs-consideredbysomehardtouseandtoocomplex–Iamgoingtotryanddispelsomeofthatmyth!-designedtointegratewellwithexistingGISwebserversaswellasneogeograpy'standards'WhousesOpenLayers?TheLord'sCricketgroundwebsiteWhousesOpenLayers?OpenStreetMapandmanyofitschildprojectsáficoNacionalWhousesOpenLayers?InstitutGéographiqueNational-GéoportailAPIWhousesOpenLayers?OpenSpaceAPI–OrdnanceSurveyWhousesOpenLayers?whitehouse.gov/changeGettingStartedThefirststepistocreateatextfilecontainingthiscode,thisistheabsoluteessentialsforanyOpenLayersprojecthtmlheadtitleOpenLayersWorkshop1/titlescriptsrc=(){varmap=newOpenLayers.Map(map_box);}/script/headbodyonload=start()h1OpenLayersWorkshopExample1/h1divid=map_box/div/body/htmlGettingStartedThispartofthecodedealswithcreatingthepageandtheboxinwhichthemapwillgoItcanbestyledusingthestandardHTML/CSSmethodshtmlheadtitleOpenLayersWorkshop1/titlescriptsrc=(){varmap=newOpenLayers.Map(map_box);}/script/headbodyonload=start()h1OpenLayersWorkshopExample1/h1divid=map_box/div/body/htmlGettingStartedThiscodeloadsOpenLayersthenrunsthestartfunctionwhenthepageloadsThestartfunctioncreatesanewOpenLayersmapinthemap_boxHTMLcontainerhtmlheadtitleOpenLayersWorkshop1/titlescriptsrc=(){varmap=newOpenLayers.Map(map_box);}/script/headbodyonload=start()h1OpenLayersWorkshopExample1/h1divid=map_box/div/body/htmlOpenLayers.MapSo,what'sthismagicalOpenLayers.Mapthing?●Anobject●varmap=newOpenLayers.Map(div_id,options)●Containsseveralveryusefulfunctions:●addLayer●AddControl●getCenter/setCenterAdding(Raster)LayersOpenLayerssupportsawiderangeoftypesofrasterlayerproviders:●ArcGISservers(bothServer9.3+'sRESTinterfaceandArcIMS)●GoogleMaps●Plainimagefiles(inaformatthatthebrowserunderstands–unfortunatelynot.tiff)●KaMap●MapGuide●MapServer●TileCache●TMS●VirtualEarth(nowBing)●WMS●WorldWind●Yahoo●XYZtiles(asOpenStreetMapuses)AddingaWMSLayerfunctionstart(){varmap=newOpenLayers.Map(map_box);varwms=newOpenLayers.Layer.WMS(OpenLayersVMAP0,{layers:basic});map.addLayer(wms);varcentre=newOpenLayers.LonLat(-3,55);map.setCenter(centre,5);}Thereare4newlinesaddedhere:●AWMSLayeriscreated,thethreeparameterspassedare:●Thenameofthelayer(thiswillbedisplayedtotheuser)●TheWMSserverURL●Andanyparameterstopasstotheserver●TheLayerisaddedtothemap●ALonLatcoordinateiscreated●Themap'scentreandzoomlevelissettothatcoordinate(EPSG:4326isassumedbydefault)MoreWMSThepreviousexamplewasverysimplisticbecauseOpenLayer'sdefaultprojection(unprojectedlat/lons)andscaleconfigurationwereusedForcustomrasterlayers,thelayershouldbeconfiguredwithitsextents,resolutionsorscales,andprojectionTheresolutionconfigurationcanbedoneinseveralways,inthiscase,theminandmaxresolutionshavebeendefined,OLwilldeterminetheresolutionforeachzoomlevelvarnpe=newOpenLayers.Layer.WMS(OSNewPopularEdition(1940s),{'format':'jpeg','layers':'npeoocmap'},{projection:newOpenLayers.Projection(EPSG:27700),maxExtent:newOpenLayers.Bounds(0,0,800000,1300000),maxResolution:2500,minResolution:1});IntroducingProjectionsOpenLayerswillworkwithanyprojection,providedthatrastersofdifferentprojectionsarenotmixedWithproj4js,OpenLayerscanreprojectvectordataasrequiredvaros=newOpenLayers.Projection(EPSG:27700);varwgs=newOpenLayers.Projection(EPSG:4326);varcentre=newOpenLayers.LonLat(-1.4,50.92);centre.transform(wgs,os);scriptsrc==(inthiscasetheOSnationalgrid,EPSG:27700)Projectingacoordinateisthenquitesimple,theprojectionsareinitialisedandthenusedinatransformonthegeometryXYZTileLayersGriddedtilesinthe“Google”XYZfilenamingschemeareaneverpopularwayofservingcustommaprendersvarosmrail=newOpenLayers.Layer.XYZ(OSMRailMap,~steve8/railway_tiles/${z}/${x}/${y}.png,{sphericalMercator:true,attribution:DataCCBYSAOpenStreetMap,renderingbySteveChilton});●Thelayername●TheURLwherethetileimageswillbefound●${x}${y}and${z}arereplacedbytheappropriatetilereference●Theoptions'hash',containing:●AshortcutconfigurationoptiontotellOLtousetheappropriateprojectionsettingsforSphericalMercatortypelayers●Thelayer'sattributiontobedisplayedwiththelayer3rdPartyLayersOpenLayerssupportsthemaincommercialmapAPIsaslayersImportth
本文标题:OpenLayers
链接地址:https://www.777doc.com/doc-5401036 .html