WebGIS原理及開發(fā)-基于開源框架的WebGIS技術(shù) 課件 07-OpenLayers多源數(shù)據(jù)匯聚

基于開源框架的WebGIS技術(shù)WebGIS原理及開發(fā)1.WebGIS概述2.WebGIS基礎(chǔ)技術(shù)3.WebGIS技術(shù)原理4.WebGIS的Web服務(wù)8.OpenLayers進(jìn)階9.移動GIS10.三維WebGIS5.地圖發(fā)布6.WebGIS客戶端開發(fā)7.OpenLayers多源數(shù)據(jù)匯聚11.WebGIS應(yīng)用案例12.未來展望與研究熱點(diǎn)第7章

OpenLayers多源數(shù)據(jù)匯聚公共地圖數(shù)據(jù)7.1OGC地圖數(shù)據(jù)加載7.2開放格式數(shù)據(jù)加載7.3針對多元數(shù)據(jù)匯聚OpenLayers封裝了ol/layer/Layer及相關(guān)子類作為渲染地圖數(shù)據(jù)的圖層容器、ol/source/Source及相關(guān)子類作為GIS數(shù)據(jù)源載體。常用的有：矢量圖層（ol/layer/Vector）、瓦片圖層（ol/layer/Tile）、矢量瓦片圖層（ol/layer/VectorTile）、圖像圖層（ol/layer/Image）；矢量數(shù)據(jù)源（ol/source/Vector）、WMS數(shù)據(jù)源（ol/source/WMS）、WMTS數(shù)據(jù)源（ol/source/WMTS）、XYZ瓦片數(shù)據(jù)源（ol/source/XYZ）等。地圖應(yīng)用中需要根據(jù)不同數(shù)據(jù)源選用對應(yīng)的Layer和Source進(jìn)行加載渲染：瓦片數(shù)據(jù)源：一般使用ol/layer/tile

+

ol/source/tile這種方式加載瓦片地圖服務(wù)數(shù)據(jù)，也可以ol/layer/Image

+

ol/source/Image方式加載一張圖片數(shù)據(jù)源。矢量數(shù)據(jù)源：一般使用ol/layer/Vector

+

ol/source/Vector方式加矢量數(shù)據(jù)，也有兩種方式加載到source對象。一種是把取到的數(shù)據(jù)創(chuàng)建成feature要素，再用addFeature和addFeatures進(jìn)行添加；另一種是url

+

format方法，把url地址下的數(shù)據(jù)用format格式轉(zhuǎn)換器加載到source對象。地圖、百度地圖、高德地圖等網(wǎng)絡(luò)公共地圖服務(wù)；ESRI、超圖、中地?cái)?shù)碼、ZGIS等GIS廠商提供的自定義格式GIS數(shù)據(jù)；其他企事業(yè)單位或研究機(jī)構(gòu)提供的各種格式GIS數(shù)據(jù)等。來源豐富、格式各異如何匯聚？多源數(shù)據(jù)包含哪些？7.1公共格式數(shù)據(jù)網(wǎng)絡(luò)上各大廠商和機(jī)構(gòu)提供的基礎(chǔ)地圖服務(wù)，一般均為瓦片形式地圖，可以直接調(diào)用作為應(yīng)用地圖。如天地圖、百度地圖、高德地圖、OpenStreetMap、谷歌地圖等，它們圖面精美、數(shù)據(jù)范圍大、定期更新數(shù)據(jù)，為WebGIS應(yīng)用開發(fā)提供了便利服務(wù)天地圖是國內(nèi)常用的免費(fèi)地圖服務(wù)，采用CGCS2000坐標(biāo)系，可以與WGS84進(jìn)行疊加。使用時(shí)需要授權(quán)的key，官方申請網(wǎng)址：/server/guide.html。在src/views/dataService目錄下創(chuàng)建PublicMap.vue文件，添加createLyrTian方法創(chuàng)建天地圖。引入上面寫好的Map.vue組件復(fù)用地圖創(chuàng)建，在地圖創(chuàng)建完成的created事件上綁定onMapCreate方法，調(diào)用createLyrTian創(chuàng)建圖層并添加到地圖實(shí)例map對象。匯聚天地圖constcreateLyrTian=()=>{//你的keyconstkey=''returnnewTileLayer({properties:{name:'tian',title:'天地圖',},source:newXYZ({projection:'EPSG:4326',url:`http://t{0-7}./vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`})})}constonMapCreate=map=>{map.addLayer(createLyrTian())}在src/views/dataService目錄下創(chuàng)建PublicMap.vue文件，添加createLyrTian方法創(chuàng)建天地圖。引入上面寫好的Map.vue組件復(fù)用地圖創(chuàng)建，在地圖創(chuàng)建完成的created事件上綁定onMapCreate方法，調(diào)用createLyrTian創(chuàng)建圖層并添加到地圖實(shí)例map對象主要基于ol/source/XYZ接口加載天地圖數(shù)據(jù)。高德地圖采用“火星坐標(biāo)系”，它與CGCS2000和WGS84疊加時(shí)有偏移，需要糾偏

。在src/views/dataService目錄下創(chuàng)建PublicMap.vue文件，添加createLyrTian方法創(chuàng)建天地圖。引入上面寫好的Map.vue組件復(fù)用地圖創(chuàng)建，在地圖創(chuàng)建完成的created事件上綁定onMapCreate方法，調(diào)用createLyrTian創(chuàng)建圖層并添加到地圖實(shí)例map對象。匯聚高德地圖constcreateLyrGd=()=>{

returnnewTileLayer({

properties:{

name:'gaode',

title:'高德地圖',

},

source:newXYZ({

url:'http://webrd0{1-4}./appmaptile?lang=zh_cn&size=1&scl=1&style=8&lstyle=7&x={x}&y={y}&z={z}'

})

})}constonMapCreate=map=>{

map.addLayer(createLyrGd())}在src/views/dataService/PublicMap.vue文件中新增createLyrGd方法。在地圖創(chuàng)建完成的響應(yīng)onMapCreate方法中，調(diào)用createLyrGd創(chuàng)建圖層并添加到地圖實(shí)例map對象。基于ol/source/XYZ接口加載高德地圖數(shù)據(jù)。百度地圖采用“百度坐標(biāo)系”，與CGCS2000和WGS84疊加時(shí)有偏移，需要糾偏

。匯聚百度地圖在src/views/dataService/PublicMap.vue文件中新增createLyrBd方法在地圖創(chuàng)建完成的響應(yīng)onMapCreate方法中，調(diào)用createLyrBd創(chuàng)建圖層并添加到地圖實(shí)例map對象；基于ol/source/TileImage接口加載百度地圖數(shù)據(jù)。leturl='http://online{0-3}./onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20191119&scaler=1&p=1'constresolutions=[]for(leti=0;i<19;i++)resolutions.push(Math.pow(2,18-i))//創(chuàng)建切片規(guī)則對象consttileGrid=newTileGrid({origin:[0,0],resolutions})returnnewTileLayer({properties:{name:'baidu',title:'百度地圖'},source:newTileImage({projection:'EPSG:3857',tileGrid:tileGrid,

tileUrlFunction:....})})百度地圖服務(wù)地址構(gòu)造分辨率和切片網(wǎng)格對象構(gòu)造圖層對象和數(shù)據(jù)源tileUrlFunction:function(tileCoord,pixelRatio,proj){if(!tileCoord)return''

//構(gòu)造瓦片地址urllettempUrl=urltempUrl=tempUrl.replace('{z}',tileCoord[0])tempUrl=tempUrl.replace('{x}',tileCoord[1]<0?`M${-tileCoord[1]}`:tileCoord[1])tempUrl=tempUrl.replace('{y}',tileCoord[2]<0?`M${tileCoord[2]+1}`:-(tileCoord[2]+1))//范圍替換varmatch=/\{(\d+)-(\d+)\}/.exec(tempUrl)if(match){vardelta=parseInt(match[2])-parseInt(match[1])varnum=Math.round(Math.random()*delta+parseInt(match[1]))tempUrl=tempUrl.replace(match[0],num.toString())}returntempUrl}匯聚OpenStreetMap在src/views/dataService/PublicMap.vue文件中新增createLyrOSM方法；在地圖創(chuàng)建完成事件created綁定的onMapCreate方法中調(diào)用createLyrOSM創(chuàng)建圖層，并將圖層添加到地圖實(shí)例map對象；

OpenStreetMap數(shù)據(jù)主要是通過ol/source/OSM加載。constcreateLyrOSM=()=>{returnnewTileLayer({properties:{name:'osm',title:'OpenStreetMap地圖'},source:newOSM()})}constonMapCreate=map=>{map.addLayer(createLyrOSM())}匯聚必應(yīng)地圖必應(yīng)地圖是微軟提供的在線地圖，使用時(shí)需要授權(quán)的Key，官方申請網(wǎng)址為：/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key在src/views/dataService/PublicMap.vue文件中新增createLyrBing方法，在地圖創(chuàng)建完成事件created綁定的onMapCreate方法中調(diào)用createLyrBing創(chuàng)建圖層，并將圖層添加到地圖實(shí)例map對象。必應(yīng)地圖數(shù)據(jù)主要是通過ol/source/BingMaps加載constcreateLyrBing=()=>{//用戶的Key,如AvehefmVM_surC2UyDjyO2T_xxxxxxxconstkey=''returnnewTileLayer({properties:{name:'bing',title:'Bing地圖'},source:newBingMaps({key:key,imagerySet:'RoadOnDemand'})})}constonMapCreate=map=>{map.addLayer(createLyrBing())}匯聚ArcGIS地圖針對ArcGIS地圖數(shù)據(jù)，OpenLayers封裝了ol/source/TileArcGISRest接口和ol/source/ImageArcGISRest接口。在arcgisonline上提供了很多的在線服務(wù)：/arcgis/rest/services在src/views/dataService/PublicMap.vue文件中新增createLyrArc方法在地圖創(chuàng)建完成事件created綁定的onMapCreate方法中調(diào)用createLyrArc創(chuàng)建圖層，并將圖層添加到地圖實(shí)例map對象constcreateLyrArc=()=>{returnnewTileLayer({properties:{name:'arc',title:'Arcgis地圖'},visible:false,source:newXYZ({url:'/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'})})}constonMapCreate=map=>{map.addLayer(createLyrArc())}7.2OGC數(shù)據(jù)加載幾乎所有的GIS廠商都支持OGC標(biāo)準(zhǔn)，GIS開發(fā)者可以很方便地使用網(wǎng)絡(luò)中發(fā)布的OGC服務(wù)資源，不但可以加載顯示矢量、切片、影像等數(shù)據(jù)，也可以通過WFS的接口進(jìn)行要素查詢、編輯等操作，還可以通過WPC進(jìn)行GIS空間分析。在對接OGC的服務(wù)時(shí)一定要查看對應(yīng)的能力文檔。WMS使用本地GeoServer中的nurc:Img_Sample圖層服務(wù)；WMTS使用在線天地圖服務(wù)；WFS使用本地GeoServer中的sf:roads圖層服務(wù)；在vite.config.js文件中配置了geoserver的代理地址：WMS數(shù)據(jù)在src/views/dataService目錄下創(chuàng)建OGCMap.vue文件，引入上面寫好的Map.vue組件復(fù)用地圖創(chuàng)建新增createLyrWMS方法創(chuàng)建圖層，并將圖層添加到地圖實(shí)例map對象。WMS數(shù)據(jù)主要是通過ol/source/TileWMS加載constcreateLyrWMS=()=>{//提示跨越時(shí)使用代理使用服務(wù)代理地址consturl='/local/geoserver/nurc/wms'//consturl='http://localhost:8080/geoserver/nurc/wms'returnnewTileLayer({properties:{name:'wms',title:'WMS服務(wù)',locate:[-11853698.36373101,4522979.57274383,4],},visible:false,source:newTileWMS({url:url,params:{'LAYERS':'nurc:Img_Sample'},projection:'EPSG:4326',ratio:1,serverType:'geoserver'}),})}WMTS需要配置數(shù)據(jù)源發(fā)布時(shí)的切片方案、原點(diǎn)、投影等信息，在地圖服務(wù)的能力文檔中有詳細(xì)說明，服務(wù)地址：ip地址:端口號/路徑?request=GetCapabilities&service=wmts天地圖的WMTS能力文檔地址為：/vec_c/wmts?request=GetCapabilities&service=wmtsWMTS數(shù)據(jù)WMTS能力文檔中<Contents>下的<layer>和<TileMatrixSet>模塊描述了服務(wù)的圖層標(biāo)識、數(shù)據(jù)的投影、切片的原點(diǎn)和級數(shù)、渲染樣式和輸出的格式等信息。//2-創(chuàng)建切片規(guī)則對象consttileGrid=newWMTSTileGrid({origin:[-180,90],resolutions:resolutions,matrixIds:matrixIds})//3-創(chuàng)建切片圖層和WMTS數(shù)據(jù)returnnewTileLayer({properties:{name:'wmts',title:'WMTS服務(wù)'},source:newWMTS({url:`http://t{0-7}./vec_c/wmts?tk=${key}`,projection:'EPSG:4326',tileGrid:tileGrid,crossOrigin:'*',format:'image/png',layer:'vec',matrixSet:'c',style:'default'})})（1）url：WMTS的地址。（2）format：WMTS輸出的切片格式，一般采用PNG格式。（3）projection：WMTS數(shù)據(jù)的投影坐標(biāo)系。能力文檔中定義的是EPSG:4490坐標(biāo)系，但代碼中使用的是EPSG:4326坐標(biāo)系，這是因?yàn)檫@兩個坐標(biāo)系的誤差很小，就直接使用EPSG:4326了；否則需要先擴(kuò)展坐標(biāo)系定義，才能使用EPSG:4490。（4）tileGrid：切片網(wǎng)格的描述，是WMTS獲取數(shù)據(jù)的關(guān)鍵。（5）origin：切片的原點(diǎn)，會影響各切片網(wǎng)格的編號。（6）resolutions：各級切片的分辨率。（7）matrixIds：各級切片對應(yīng)的矩陣標(biāo)識，resolutions和matrixIds要相互匹配。WFS數(shù)據(jù)constcreateLyrWFS=()=>{

//提示跨越時(shí)使用代理使用服務(wù)代理地址consturl='/local/geoserver/sf/ows'returnnewVectorLayer({properties:{name:'wfs',title:'WFS服務(wù)',locate:[-11534858.696299767,5493787.393992992,7],},source:....，

strategy:bboxStrategy,}),style:{'stroke-width':2,'stroke-color':'red','fill-color':'rgba(100,100,100,0.25)',}})}newVectorSource({format:newGeoJSON(),url:extent=>{return(url+'?service=WFS&'+

'version=1.0.0&request=GetFeature&typename=sf:roads&'+'outputFormat=application/json&srsname=EPSG:3857&'+'bbox='+extent.join(',')+',EPSG:3857')},7.3開發(fā)格式數(shù)據(jù)加載空間數(shù)據(jù)除了各GIS廠商提供的封閉格式數(shù)據(jù)，還有一些方便共享的開放數(shù)據(jù)格式數(shù)據(jù)，如KML、GML、GeoJSON、GPX等，它們可以在多種軟件、平臺或程序中使用，讓GIS數(shù)據(jù)的使用更靈活，應(yīng)用范圍更廣泛。GeoJSON是基于JSON的地理數(shù)據(jù)交換格式，它定義了多種JSON對象和方式，組合起來表達(dá)地理要素及其屬性、空間范圍等。KML最初由Keyhole公司開發(fā)，是一種基于XML語法與格式的、用于描述和保存地理信息（如點(diǎn)、線、圖形、多邊形和模型等）的編碼規(guī)范，可以被谷歌地球（GoogleEarth）和谷歌地圖（GoogleMap）識別并顯示。地理標(biāo)記語言（GeographicMarkupLanguage，GML）是指由OGC制定的用于建模、傳輸和存儲地理及與地理相關(guān)信息的XML，主要用于地學(xué)/地理信息的傳輸和存儲。GXL包括了地理要素和層的空間與非空間特征。GPX（GPSeXchangeFormat）指GPS交換格式，是一種基于XML格式為應(yīng)用軟件設(shè)計(jì)的通用GPS數(shù)據(jù)格式。GeoJSON數(shù)據(jù)OpenLayers是通過ol/source/Vector和ol/format/GeoJSON加載GeoJSON數(shù)據(jù)的，一種方法是在Source中設(shè)置GeoJSON數(shù)據(jù)的URL，用數(shù)據(jù)解析器（Format）設(shè)置處理轉(zhuǎn)換工具；另一種方法是在內(nèi)存中加載GeoJSON數(shù)據(jù)，用數(shù)據(jù)解析器（Format）處理成矢量要素（Feature）。returnnewVectorLayer({extent:[-13884991,2870341,-7455066,6338219],properties:{name:'GeoJSON',title:'GeoJSON數(shù)據(jù)'},visible:false,source:newVectorSource({url:'/data/lines.json',format:newGeoJSON()}),style:newStyle({stroke:newStroke({color:'red',width:2}),fill:newFill({color:'rgba(100,100,100,0.25)'})})})KML數(shù)據(jù)OpenLayers是通過ol/source/Vector和ol/format/KML加載KML數(shù)據(jù)的，一種方法是在Source中設(shè)置KML數(shù)據(jù)URL，用數(shù)據(jù)解析器（Format）設(shè)置處理轉(zhuǎn)換工具；另一種方法是在內(nèi)存中加載KML數(shù)據(jù)，用數(shù)據(jù)解析器（Format）處理成矢量要素（Feature）returnnewVectorLayer({properties:{name:'kml',title:'KML數(shù)據(jù)',locate:[864510.0253082548,5862753.416073311,10]},visible:false,source:newVectorSource({ur