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

基于開源框架的WebGIS技術(shù)WebGIS原理及開發(fā)1.WebGIS概述2.WebGIS基礎(chǔ)技術(shù)3.WebGIS技術(shù)原理4.WebGIS的Web服務(wù)8.OpenLayers進(jìn)階9.移動(dòng)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針對(duì)多元數(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ù)源選用對(duì)應(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對(duì)象。一種是把取到的數(shù)據(jù)創(chuàng)建成feature要素，再用addFeature和addFeatures進(jìn)行添加；另一種是url

+

format方法，把url地址下的數(shù)據(jù)用format格式轉(zhuǎn)換器加載到source對(duì)象。地圖、百度地圖、高德地圖等網(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，官方申請(qǐng)網(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對(duì)象。匯聚天地圖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對(duì)象主要基于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對(duì)象。匯聚高德地圖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對(duì)象。基于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對(duì)象；基于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ī)則對(duì)象consttileGrid=newTileGrid({origin:[0,0],resolutions})returnnewTileLayer({properties:{name:'baidu',title:'百度地圖'},source:newTileImage({projection:'EPSG:3857',tileGrid:tileGrid,

tileUrlFunction:....})})百度地圖服務(wù)地址構(gòu)造分辨率和切片網(wǎng)格對(duì)象構(gòu)造圖層對(duì)象和數(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對(duì)象；

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，官方申請(qǐng)網(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對(duì)象。必應(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地圖針對(duì)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對(duì)象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空間分析。在對(duì)接OGC的服務(wù)時(shí)一定要查看對(duì)應(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對(duì)象。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地址:端口號(hào)/路徑?request=GetCapabilities&service=wmts天地圖的WMTS能力文檔地址為：/vec_c/wmts?request=GetCapabilities&service=wmtsWMTS數(shù)據(jù)WMTS能力文檔中<Contents>下的<layer>和<TileMatrixSet>模塊描述了服務(wù)的圖層標(biāo)識(shí)、數(shù)據(jù)的投影、切片的原點(diǎn)和級(jí)數(shù)、渲染樣式和輸出的格式等信息。//2-創(chuàng)建切片規(guī)則對(duì)象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)檫@兩個(gè)坐標(biāo)系的誤差很小，就直接使用EPSG:4326了；否則需要先擴(kuò)展坐標(biāo)系定義，才能使用EPSG:4490。（4）tileGrid：切片網(wǎng)格的描述，是WMTS獲取數(shù)據(jù)的關(guān)鍵。（5）origin：切片的原點(diǎn)，會(huì)影響各切片網(wǎng)格的編號(hào)。（6）resolutions：各級(jí)切片的分辨率。（7）matrixIds：各級(jí)切片對(duì)應(yīng)的矩陣標(biāo)識(shí)，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等，它們可以在多種軟件、平臺(tái)或程序中使用，讓GIS數(shù)據(jù)的使用更靈活，應(yīng)用范圍更廣泛。GeoJSON是基于JSON的地理數(shù)據(jù)交換格式，它定義了多種JSON對(duì)象和方式，組合起來表達(dá)地理要素及其屬性、空間范圍等。KML最初由Keyhole公司開發(fā)，是一種基于XML語法與格式的、用于描述和保存地理信息（如點(diǎn)、線、圖形、多邊形和模型等）的編碼規(guī)范，可以被谷歌地球（GoogleEarth）和谷歌地圖（GoogleMap）識(shí)別并顯示。地理標(biāo)記語言（GeographicMarkupLanguage，GML）是指由OGC制定的用于建模、傳輸和存儲(chǔ)地理及與地理相關(guān)信息的XML，主要用于地學(xué)/地理信息的傳輸和存儲(chǔ)。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({url:'data/lines.kml',format:newKML()})})GPX數(shù)據(jù)OpenLayers是通過ol/source/Vector和ol/format/GPX加載GPX數(shù)據(jù)的，一種方法是在Source中設(shè)置GPX數(shù)據(jù)URL，用數(shù)據(jù)解析器（Format）設(shè)置處理轉(zhuǎn)換工具；另一種方法是在內(nèi)存中加載GPX數(shù)據(jù)，用數(shù)據(jù)解析器（Format）處理成矢量要素（Feature）

returnnewVectorLayer({properties:{name:'gpx',title:'GPX數(shù)據(jù)',locate:[-7916212.305874971,5228516.283875127,14]},visible:false,source:newVectorSource({url:'data/fells_loop.gpx',format:newGPX()}),style:function(feature){returnstyle[feature.getGeometry().getType()]}})矢量切片數(shù)據(jù)在src/views/dataService/OpenMap.vue文件中新增createLyrVecTile方法創(chuàng)建圖層，把將圖層添加到地圖實(shí)例map對(duì)象，矢量切片數(shù)據(jù)主要是通過ol/source/VectorTileSource加載。returnnewVectorTileLayer({properties:{name:'vectortile',title:'矢量切片數(shù)據(jù)',locate:[864510.0253082548,5862753.416073311,10]},visible:false,source:newVectorTileSource({format:newMVT(),url:'/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf'})})歡迎提問基于開源框架的WebGIS技術(shù)WebGIS原理及開發(fā)1.WebGIS概述2.WebGIS基礎(chǔ)技術(shù)3.WebGIS技術(shù)原理4.WebGIS的Web服務(wù)8.OpenLayers進(jìn)階9.移動(dòng)GIS10.三維WebGIS5.地圖發(fā)布6.WebGIS客戶端開發(fā)7.OpenLayers多源數(shù)據(jù)匯聚11.WebGIS應(yīng)用案例12.未來展望與研究熱點(diǎn)第8章

OpenLayers進(jìn)階地圖制圖8.4圖形繪制8.1圖形交互編輯8.2標(biāo)注功能8.3地圖特效8.5圖層動(dòng)態(tài)投影8.68.1圖形繪制圖形繪制有兩種方式：一種方式是使用空間坐標(biāo)繪制圖形；另一種方式是使用地圖交互工具進(jìn)行人工繪制。不管采用哪種方式，都離不開ol/geom/Geometry的子類和ol/Feature類。點(diǎn)繪制constpointCoor=[12758417.315499168,3562866.9013162893]conststyle=newStyle({image:newCircle({radius:10, //半徑fill:newFill({color:'red'}),//填充色stroke:newStroke({color:'yellow'})//邊框})})//創(chuàng)建一個(gè)點(diǎn)要素對(duì)象constpointFeature=newFeature(newPoint(pointCoor))constvectorLayer=newVectorLayer({source:newVectorSource({features:[pointFeature]}),style})constonDrawPointCreate=map=>{//將圖層添加到地圖上map.addLayer(vectorLayer)}importMapfrom'../Map.vue'importVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'importFeaturefrom'ol/Feature'importPointfrom'ol/geom/Point'import{Fill,Stroke,Circle,Style}from'ol/style'constlineCoor=[[12758417.315499168,3562866.9013162893],[12758917.315499168,3562866.9013162893]]conststyle=newStyle({stroke:newStroke({color:'yellow',width:10})})//創(chuàng)建一個(gè)線要素對(duì)象constlineFeature=newFeature(newLineString(lineCoor))constvectorLayer=newVectorLayer({source:newVectorSource({features:[lineFeature]}),style})線繪制importMapfrom'../Map.vue'importVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'importFeaturefrom'ol/Feature'importLineStringfrom'ol/geom/LineString'import{Stroke,Style}from'ol/style'constpolygonCoor=[[[12758417.315499168,3562866.9013162893],[12758917.315499168,3562866.9013162893],[12758617.315499168,3563166.9013162893],[12758417.315499168,3562866.9013162893]]]conststyle=newStyle({fill:newFill({color:'blue'})})//創(chuàng)建一個(gè)面要素對(duì)象constpolygonFeature=newFeature(new

Polygon(polygonCoor))constvectorLayer=newVectorLayer({source:newVectorSource({features:[polygonFeature]}),style})面繪制importMapfrom'../Map.vue'importVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'importFeaturefrom'ol/Feature'importPolygonfrom'ol/geom/Polygon'import{Fill,Style}from'ol/style'letparams={pntStart:[12758417.315499168,3562866.9013162893],//起點(diǎn)pntEnd:[12758917.315499168,3562866.9013162893],//終點(diǎn)points:[[12758617.315499168,3563166.9013162893]],//控制點(diǎn)pntCount:10//插入平滑點(diǎn)的個(gè)數(shù)，點(diǎn)越多曲線越平滑}letlineCoor=MathBase.getBezierCurveCoors(params)conststyle=newStyle({stroke:newStroke({color:'yellow',width:10})})//創(chuàng)建一個(gè)線要素對(duì)象constlineFeature=newFeature(newLineString(lineCoor))constvectorLayer=newVectorLayer({source:newVectorSource({features:[lineFeature]}),style})貝塞爾曲線繪制importMapfrom'../Map.vue'importVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'importFeaturefrom'ol/Feature'importLineStringfrom'ol/geom/LineString'import{Stroke,Style}from'ol/style'//貝塞爾曲線的數(shù)學(xué)實(shí)現(xiàn)方式staticgetBezierCurveCoors(param){param=Object.assign({pntStart:[0,0],pntEnd:[0,1],points:[[1,0]],pntCount:30},param)//1、構(gòu)造所有的控制點(diǎn)的集合。letctrlPnts=[param.pntStart].concat(param.points).concat([param.pntEnd])letctrlPntsStr=JSON.stringify(ctrlPnts)//2、獲取每個(gè)貝塞爾曲線點(diǎn)的坐標(biāo)letbserPoints=[]lett,coorfor(leti=0;i<param.pntCount;i++){t=Math.round((i/(param.pntCount-1))*1000)/1000coor=this.getBezierCurveCoor(JSON.parse(ctrlPntsStr),t,ctrlPnts.length)bserPoints.push(coor)}//3、返回整個(gè)坐標(biāo)串return[param.pntStart].concat(bserPoints).concat([param.pntEnd])}staticgetBezierCurveCoor(points,t,count){if(count===1)returnpoints[0]//計(jì)算下一階的貝塞爾控制點(diǎn)for(leti=0;i<count-1;i++){let[pA,pB]=[points[i],points[i+1]]pA[0]=pA[0]*(1-t)+pB[0]*tpA[1]=pA[1]*(1-t)+pB[1]*t}//進(jìn)入下一層returnthis.getBezierCurveCoor(points,t,count-1)}圖形樣式定制import{Fill,Stroke,Circle,Text,Style}from'ol/style'conststyle=newStyle({fill:newFill({color:'rgba(255,255,255,0.4)'}),stroke:newStroke({color:'#319FD3',width:3}),image:newCircle({radius:20,fill:newFill({color:'red'}),stroke:newStroke({color:'yellow'})}),text:newText({text:'標(biāo)注',font:'16pxCalibri,sans-serif',fill:newFill({color:'#000'}),stroke:newStroke({color:'#fff',width:3})})})ügeometry：地理實(shí)體。üimage：常用于設(shè)置點(diǎn)要素的樣式。üstroke：常用于設(shè)置線要素的樣式。üfill：常用于設(shè)置面要素的樣式。ütext：常用于設(shè)置文字標(biāo)注的樣式。8.2圖形交互編輯OpenLayers提供了多種用于地圖繪制、交互的類和函數(shù)。通過ol/interaction/Draw類創(chuàng)建一個(gè)圖形繪制對(duì)象并將其添加到地圖中，就可以實(shí)現(xiàn)點(diǎn)、折線、多邊形、圓、矩形圖形繪制。圖形選擇//創(chuàng)建Select對(duì)象constselectClick=newSelect({condition:click,style:selectStyle,})constchangeInteraction=()=>{if(select!==null)selMap.removeInteraction(select)select=selectClickif(select!==null){selMap.addInteraction(select)select.on('select',(e)=>{alert(e.target.getFeatures().getArray()[0].getProperties().type||e.target.getFeatures().getArray()[0].getProperties().mc)})}}importMapfrom'../Map.vue'importGeoJSONfrom'ol/format/GeoJSON.js'importSelectfrom'ol/interaction/Select.js'importVectorLayerfrom'ol/layer/Vector.js'importVectorSourcefrom'ol/source/Vector.js'import{Fill,Stroke,Circle,Text,Style}from'ol/style.js'import{click}from'ol/events/condition.js'圖形平移constmodify=newModify({source:vectorLayer.getSource(),condition:(event)=>{returnprimaryAction(event)&&!platformModifierKeyOnly(event)},deleteCondition:never,insertVertexCondition:never})constchangeInteraction=()=>{if(modify!==null){selMap.removeInteraction(modify)selMap.addInteraction(modify)}}importMapfrom'../Map.vue'importGeoJSONfrom'ol/format/GeoJSON.js'importVectorLayerfrom'ol/layer/Vector.js'importVectorSourcefrom'ol/source/Vector.js'import{Fill,Stroke,Circle,Text,Style}from'ol/style.js'import{Modify}from'ol/interaction.js'import{never,platformModifierKeyOnly,primaryAction}from'ol/events/condition.js'圖形旋轉(zhuǎn)constinitialAngle=Math.atan2(dy,dx)dx=point[0]-center[0]dy=point[1]-center[1]constcurrentRadius=Math.sqrt(dx*dx+dy*dy)if(currentRadius>0){//計(jì)算當(dāng)前頂點(diǎn)相對(duì)于幾何中心點(diǎn)的旋轉(zhuǎn)角度constcurrentAngle=Math.atan2(dy,dx)constgeometry=modifyGeometry.geometry0.clone()//根據(jù)當(dāng)前頂點(diǎn)到幾何中心點(diǎn)的距離與初始距離的比例縮放圖形geometry.scale(currentRadius/initialRadius,undefined,center)//根據(jù)當(dāng)前頂點(diǎn)相對(duì)于幾何中心點(diǎn)的旋轉(zhuǎn)角度選擇圖形geometry.rotate(currentAngle-initialAngle,center)modifyGeometry.geometry=geometry}//獲取幾何中心點(diǎn)和最小半徑constcenter=modifyGeometry.centerconstminRadius=modifyGeometry.minRadiusletdx,d//計(jì)算當(dāng)前頂點(diǎn)與幾何中心點(diǎn)之間的距離dx=modifyPoint[0]-center[0]dy=modifyPoint[1]-center[1]constinitialRadius=Math.sqrt(dx*dx+dy*dy)8.3標(biāo)注功能標(biāo)注是指結(jié)合空間位置，通過圖標(biāo)、文字等形式把相關(guān)的信息展現(xiàn)在地圖上。標(biāo)注的實(shí)現(xiàn)方式有兩種：通過矢量點(diǎn)要素方式實(shí)現(xiàn)標(biāo)注、使用ol/Overlay覆蓋物實(shí)現(xiàn)標(biāo)注。通過矢量點(diǎn)要素方式實(shí)現(xiàn)標(biāo)注。將標(biāo)注添加到新建的矢量圖層上，再將矢量圖層添加到地圖上疊加顯示。OpenLayers使用獨(dú)立的樣式類設(shè)置矢量要素信息，提供的ol/style/Icon類可以為矢量點(diǎn)要素設(shè)置圖片標(biāo)識(shí)，ol/style/Text類則可以直接設(shè)置矢量點(diǎn)要素的文本信息。使用ol/Overlay覆蓋物實(shí)現(xiàn)標(biāo)注。原理是關(guān)聯(lián)一個(gè)HTML元素，利用HTML的特性使用第三方UI庫實(shí)現(xiàn)相應(yīng)的界面特效。添加的覆蓋物會(huì)影響地圖的拖動(dòng)，因此只有在自定義復(fù)雜內(nèi)容時(shí)才使用ol/Overlay覆蓋物實(shí)現(xiàn)標(biāo)注，如單擊地圖彈出對(duì)話信息框、地圖上的自定義按鈕等。文本標(biāo)注conststyle=newStyle({fill:newFill({color:'rgba(168,172,38,0.6)'}),stroke:newStroke({color:'#319FD3',width:1}),image:newCircle({radius:5,fill:newFill({color:'red'}),stroke:newStroke({color:'yellow'})}),text:newText({font:'12pxCalibri,sans-serif',offsetY:-15,fill:newFill({color:'#000'}),stroke:newStroke({color:'#fff',width:3})})})importMapfrom'../Map.vue'importGeoJSONfrom'ol/format/GeoJSON.js'importVectorLayerfrom'ol/layer/Vector.js'importVectorSourcefrom'ol/source/Vector.js'import{Fill,Stroke,Circle,Text,Style}from'ol/style.js'Popup標(biāo)注popup=newOverlay({element:overlayDlg.value,//將HTML內(nèi)容添加到覆蓋層positioning:'bottom-center',//覆蓋層位置autoPan:true,//是否自動(dòng)平移autoPanMargin:20,//設(shè)置自動(dòng)平移邊距offset:[0,-20]//覆蓋層偏移起點(diǎn)的位置})popupContent.value.innerHTML=feature.getProperties().mcpopup.setPosition(feature.getGeometry().getCoordinates())//添加Popup標(biāo)注到地圖上map.addOverlay(popup)importMapfrom'../Map.vue'importGeoJSONfrom'ol/format/GeoJSON.js'importVectorLayerfrom'ol/layer/Vector.js'importVectorSourcefrom'ol/source/Vector.js'import{Fill,Stroke,Circle,Text,Style}from'ol/style.js'importOverlayfrom'ol/Overlay.js'聚合標(biāo)注letcluster=newCluster({ //創(chuàng)建聚合標(biāo)注對(duì)象distance:100, //設(shè)置聚合標(biāo)注的距離source:source})constvectorLayer=newVectorLayer({source:cluster,style:(feature)=>{//利用mc屬性，給點(diǎn)要素增加標(biāo)注if(feature.getGeometry().getType()==='Point'){style.getText().setText(feature.getProperties().mc)style.getText().setFill(newFill({color:'green'}))}returnstyle}})importMapfrom'../Map.vue'importGeoJSONfrom'ol/format/GeoJSON.js'importVectorLayerfrom'ol/layer/Vector.js'importVectorSourcefrom'ol/source/Vector.js'import{Fill,Stroke,Circle,Text,Style}from'ol/style.js'importOverlayfrom'ol/Overlay.js'8.4地圖制圖熱力圖使用ol/layer/Heatmap類創(chuàng)建一個(gè)heatmap圖層，通過radius、opacity、blur、source等配置項(xiàng)可以定制出各種效果。radius用于調(diào)節(jié)熱力圖點(diǎn)擴(kuò)散的范圍；opacity用于控制圖層的透明度；blur用于控制熱力圖的熱度深淺；source是ol/source/Vector對(duì)象綁定的矢量數(shù)據(jù)源，可以配合數(shù)據(jù)解析器（Format）把加載的數(shù)據(jù)構(gòu)造為Featureconstvector=newHeatmapLayer({source:newVectorSource({url:'data/kml/2012_Earthquakes_Mag5.kml',format:newKML({extractStyles:false})}),blur:parseInt(blur.value,10),radius:parseInt(radius.value,10)});統(tǒng)計(jì)圖統(tǒng)計(jì)圖功能用到的核心工具類是ol/Overlay，可以像Control控件一樣將HTML元素添加到地圖上，不過使用overlay對(duì)象添加的元素不是固定的，而是可以隨著地圖移動(dòng)而移動(dòng)的。創(chuàng)建一個(gè)overlay對(duì)象比較簡(jiǎn)單，在創(chuàng)建overlay對(duì)象時(shí)指定一個(gè)元素，然后再設(shè)置overlay顯示的坐標(biāo)點(diǎn)，并將overlay對(duì)象添加到地圖上。üid：設(shè)置overlay對(duì)象的ID，可以使用map的getOverlayById獲取指定的overlay對(duì)象。üelement：設(shè)置overlay對(duì)象的元素。üoffset：用于設(shè)置元素的偏移量，參數(shù)為一個(gè)數(shù)組，數(shù)組中的第1個(gè)值表示水平方向的偏移，第2個(gè)值表示垂直方向的偏移。üposition：設(shè)置overlay對(duì)象顯示的坐標(biāo)點(diǎn)。üpositioning：設(shè)置overlay對(duì)象的位置，可以設(shè)置的位置包括bottom-left、bottom-center、bottom-right、center-left、center-center、center-right、top-left、top-center、top-right，默認(rèn)為top-left。üstopEvent：阻止事件冒泡。üinsertFirst：如果設(shè)置為true，則當(dāng)同一容器中添加了overlay對(duì)象和控件時(shí)，將overlay對(duì)象顯示在控件的下邊。üautoPan：平移時(shí)，如果超出窗口范圍，則將自動(dòng)設(shè)置overlay對(duì)象顯示在地圖范圍內(nèi)。üautoPanAnimation：設(shè)置autoPan生效時(shí)的動(dòng)畫。üautoPanMargin：設(shè)置autoPan生效時(shí)距地圖邊界的距離。üclassName：設(shè)置overlay對(duì)象的CSS類名//遍歷Feature創(chuàng)建overlay對(duì)象featureList.forEach(feature=>{//實(shí)例化ECharts圖表組件，并獲取渲染后的dom元素，從而創(chuàng)建overlay對(duì)象constoverlay=newOverlay({element:createApp(ComEchart,{feature}).mount(document.createElement('div')).$el,offset:[-40,-50]})map.addOverlay(overlay)//將overlay對(duì)象設(shè)置在面要素的中心位置overlay.setPosition(getFeaCenter(feature))})map.getView().fit(layer.getSource().getExtent())import{Fill,Style}from'ol/style'importVectorSourcefrom'ol/source/Vector'importVectorLayerfrom'ol/layer/Vector'importGeoJSONFormatfrom'ol/format/GeoJSON'importOverlayfrom'ol/Overlay'importstatDatafrom'../data/statData'importMapfrom'../Map.vue'importComEchartfrom'./ComEchart.vue'constECharts=EChartss.init(EChartsRef.value)//可以通過傳入的Feature屬性自定義ECharts配置參數(shù)constoption={xAxis:{type:'category',data:['0-10歲','10-20歲','20-30歲','30-40歲','40-50歲','50-60歲','60歲以上']},yAxis:{show:false,type:'value'},series:[{data:Array.from({length:7}).map(()=>Number(Math.max(Math.random()*1000,100).toFixed(0))),type:'bar'}]}ECharts.setOption(option)ECharts.resize()自定義ECharts圖表組件的關(guān)鍵代<template><divref="EChartsRef"style="height:100px;width:100px;"></div></template>分級(jí)著色專題圖//創(chuàng)建Feature樣式constgetStyle=feature=>{//獲取要素中的objectid屬性值constobjectid=Number(feature.get('objectid'))//根據(jù)objectid值的不同范圍，設(shè)置不同的顏色constcolor=objectid<50?'rgba(135,237,145,0.6)': (objectid<100?'rgba(102,204,255,0.6)':(objectid<200?'rgba(255,228,143,0.6)': 'rgba(255,153,153,0.6)'))returnnewStyle({fill:newFill({color}),stroke:newStroke({color:'#ffffff'}),text:newText({text:String(objectid)})})}//給所有的Feature設(shè)置樣式featureList.forEach(feature=> feature.setStyle(getStyle(feature)))//將Feature添加到Layer上layer.getSource().addFeatures(featureList)import{Fill,Text,Stroke,Style}from'ol/style'importVectorSourcefrom'ol/source/Vector'importVectorLayerfrom'ol/layer/Vector'importMapfrom'../Map.vue'importGeoJSONFormatfrom'ol/format/GeoJSON'importpolygonDatafrom'../data/polygonData'自定義切片地圖顏色地圖應(yīng)用一般要把接入的切片地圖作為底圖，但切片地圖在發(fā)布時(shí)已經(jīng)配置好了著色和樣式。天地圖、高德地圖、谷歌地圖等在線地圖服務(wù)均采用清爽、清晰的著色方案。但這種著色方案在暗色主題、炫酷大屏系統(tǒng)中就顯得很突兀，這時(shí)就需要我們自定義切片地圖的顏色自定義切片地圖顏色功能用到的核心工具類就是OpenLayers提供的ol/layer/Image和ol/source/Raster。（1）使用ol/source/XYZ或者ol/source/Source正常創(chuàng)建切片source對(duì)象。（2）對(duì)創(chuàng)建好的source對(duì)象進(jìn)行包裝處理，具體包裝處理邏輯如下：①編寫著色處理函數(shù)operation。②用創(chuàng)建好的source對(duì)象作為參數(shù)，創(chuàng)建ol/source/Raster自定義的切片source對(duì)象，同時(shí)傳入operation、operationType、lib等參數(shù)。其中l(wèi)ib為函數(shù)注冊(cè)對(duì)象，必須把編寫的處理函數(shù)operation及其依賴模塊的其他函數(shù)同名注冊(cè)進(jìn)去。（3）使用切片source對(duì)象，創(chuàng)建ol/layer/Image圖層layer對(duì)象。（4）將layer對(duì)象添加到地圖中。實(shí)現(xiàn)步驟：constlayer=newImage({source:makeSource(source,'blue')})//使用Raster包裝切片圖層sourceconstmakeSource=(source,type)=>{letreverseFunc=nullconstmakePixels=(pixelsTemp,callback)=>{for(leti=0;i<pixelsTemp.length;i+=4){constr=pixelsTemp[i]constg=pixelsTemp[i+1]constb=pixelsTemp[i+2]//運(yùn)用圖像學(xué)公式，設(shè)置灰度值constgrey=r*0.3+g*0.59+b*0.11//將RGB的值替換為灰度值