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

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

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

+

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

+

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

+

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

+

format方法，把url地址下的數據用format格式轉換器加載到source對象。地圖、百度地圖、高德地圖等網絡公共地圖服務；ESRI、超圖、中地數碼、ZGIS等GIS廠商提供的自定義格式GIS數據；其他企事業(yè)單位或研究機構提供的各種格式GIS數據等。來源豐富、格式各異如何匯聚？多源數據包含哪些？7.1公共格式數據網絡上各大廠商和機構提供的基礎地圖服務，一般均為瓦片形式地圖，可以直接調用作為應用地圖。如天地圖、百度地圖、高德地圖、OpenStreetMap、谷歌地圖等，它們圖面精美、數據范圍大、定期更新數據，為WebGIS應用開發(fā)提供了便利服務天地圖是國內常用的免費地圖服務，采用CGCS2000坐標系，可以與WGS84進行疊加。使用時需要授權的key，官方申請網址：/server/guide.html。在src/views/dataService目錄下創(chuàng)建PublicMap.vue文件，添加createLyrTian方法創(chuàng)建天地圖。引入上面寫好的Map.vue組件復用地圖創(chuàng)建，在地圖創(chuàng)建完成的created事件上綁定onMapCreate方法，調用createLyrTian創(chuàng)建圖層并添加到地圖實例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組件復用地圖創(chuàng)建，在地圖創(chuàng)建完成的created事件上綁定onMapCreate方法，調用createLyrTian創(chuàng)建圖層并添加到地圖實例map對象主要基于ol/source/XYZ接口加載天地圖數據。高德地圖采用“火星坐標系”，它與CGCS2000和WGS84疊加時有偏移，需要糾偏

。在src/views/dataService目錄下創(chuàng)建PublicMap.vue文件，添加createLyrTian方法創(chuàng)建天地圖。引入上面寫好的Map.vue組件復用地圖創(chuàng)建，在地圖創(chuàng)建完成的created事件上綁定onMapCreate方法，調用createLyrTian創(chuàng)建圖層并添加到地圖實例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)建完成的響應onMapCreate方法中，調用createLyrGd創(chuàng)建圖層并添加到地圖實例map對象。基于ol/source/XYZ接口加載高德地圖數據。百度地圖采用“百度坐標系”，與CGCS2000和WGS84疊加時有偏移，需要糾偏

。匯聚百度地圖在src/views/dataService/PublicMap.vue文件中新增createLyrBd方法在地圖創(chuàng)建完成的響應onMapCreate方法中，調用createLyrBd創(chuàng)建圖層并添加到地圖實例map對象；基于ol/source/TileImage接口加載百度地圖數據。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:....})})百度地圖服務地址構造分辨率和切片網格對象構造圖層對象和數據源tileUrlFunction:function(tileCoord,pixelRatio,proj){if(!tileCoord)return''

//構造瓦片地址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方法中調用createLyrOSM創(chuàng)建圖層，并將圖層添加到地圖實例map對象；

OpenStreetMap數據主要是通過ol/source/OSM加載。constcreateLyrOSM=()=>{returnnewTileLayer({properties:{name:'osm',title:'OpenStreetMap地圖'},source:newOSM()})}constonMapCreate=map=>{map.addLayer(createLyrOSM())}匯聚必應地圖必應地圖是微軟提供的在線地圖，使用時需要授權的Key，官方申請網址為：/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方法中調用createLyrBing創(chuàng)建圖層，并將圖層添加到地圖實例map對象。必應地圖數據主要是通過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地圖數據，OpenLayers封裝了ol/source/TileArcGISRest接口和ol/source/ImageArcGISRest接口。在arcgisonline上提供了很多的在線服務：/arcgis/rest/services在src/views/dataService/PublicMap.vue文件中新增createLyrArc方法在地圖創(chuàng)建完成事件created綁定的onMapCreate方法中調用createLyrArc創(chuàng)建圖層，并將圖層添加到地圖實例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數據加載幾乎所有的GIS廠商都支持OGC標準，GIS開發(fā)者可以很方便地使用網絡中發(fā)布的OGC服務資源，不但可以加載顯示矢量、切片、影像等數據，也可以通過WFS的接口進行要素查詢、編輯等操作，還可以通過WPC進行GIS空間分析。在對接OGC的服務時一定要查看對應的能力文檔。WMS使用本地GeoServer中的nurc:Img_Sample圖層服務；WMTS使用在線天地圖服務；WFS使用本地GeoServer中的sf:roads圖層服務；在vite.config.js文件中配置了geoserver的代理地址：WMS數據在src/views/dataService目錄下創(chuàng)建OGCMap.vue文件，引入上面寫好的Map.vue組件復用地圖創(chuàng)建新增createLyrWMS方法創(chuàng)建圖層，并將圖層添加到地圖實例map對象。WMS數據主要是通過ol/source/TileWMS加載constcreateLyrWMS=()=>{//提示跨越時使用代理使用服務代理地址consturl='/local/geoserver/nurc/wms'//consturl='http://localhost:8080/geoserver/nurc/wms'returnnewTileLayer({properties:{name:'wms',title:'WMS服務',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需要配置數據源發(fā)布時的切片方案、原點、投影等信息，在地圖服務的能力文檔中有詳細說明，服務地址：ip地址:端口號/路徑?request=GetCapabilities&service=wmts天地圖的WMTS能力文檔地址為：/vec_c/wmts?request=GetCapabilities&service=wmtsWMTS數據WMTS能力文檔中<Contents>下的<layer>和<TileMatrixSet>模塊描述了服務的圖層標識、數據的投影、切片的原點和級數、渲染樣式和輸出的格式等信息。//2-創(chuàng)建切片規(guī)則對象consttileGrid=newWMTSTileGrid({origin:[-180,90],resolutions:resolutions,matrixIds:matrixIds})//3-創(chuàng)建切片圖層和WMTS數據returnnewTileLayer({properties:{name:'wmts',title:'WMTS服務'},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數據的投影坐標系。能力文檔中定義的是EPSG:4490坐標系，但代碼中使用的是EPSG:4326坐標系，這是因為這兩個坐標系的誤差很小，就直接使用EPSG:4326了；否則需要先擴展坐標系定義，才能使用EPSG:4490。（4）tileGrid：切片網格的描述，是WMTS獲取數據的關鍵。（5）origin：切片的原點，會影響各切片網格的編號。（6）resolutions：各級切片的分辨率。（7）matrixIds：各級切片對應的矩陣標識，resolutions和matrixIds要相互匹配。WFS數據constcreateLyrWFS=()=>{

//提示跨越時使用代理使用服務代理地址consturl='/local/geoserver/sf/ows'returnnewVectorLayer({properties:{name:'wfs',title:'WFS服務',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ā)格式數據加載空間數據除了各GIS廠商提供的封閉格式數據，還有一些方便共享的開放數據格式數據，如KML、GML、GeoJSON、GPX等，它們可以在多種軟件、平臺或程序中使用，讓GIS數據的使用更靈活，應用范圍更廣泛。GeoJSON是基于JSON的地理數據交換格式，它定義了多種JSON對象和方式，組合起來表達地理要素及其屬性、空間范圍等。KML最初由Keyhole公司開發(fā)，是一種基于XML語法與格式的、用于描述和保存地理信息（如點、線、圖形、多邊形和模型等）的編碼規(guī)范，可以被谷歌地球（GoogleEarth）和谷歌地圖（GoogleMap）識別并顯示。地理標記語言（GeographicMarkupLanguage，GML）是指由OGC制定的用于建模、傳輸和存儲地理及與地理相關信息的XML，主要用于地學/地理信息的傳輸和存儲。GXL包括了地理要素和層的空間與非空間特征。GPX（GPSeXchangeFormat）指GPS交換格式，是一種基于XML格式為應用軟件設計的通用GPS數據格式。GeoJSON數據OpenLayers是通過ol/source/Vector和ol/format/GeoJSON加載GeoJSON數據的，一種方法是在Source中設置GeoJSON數據的URL，用數據解析器（Format）設置處理轉換工具；另一種方法是在內存中加載GeoJSON數據，用數據解析器（Format）處理成矢量要素（Feature）。returnnewVectorLayer({extent:[-13884991,2870341,-7455066,6338219],properties:{name:'GeoJSON',title:'GeoJSON數據'},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數據OpenLayers是通過ol/source/Vector和ol/format/KML加載KML數據的，一種方法是在Source中設置KML數據URL，用數據解析器（Format）設置處理轉換工具；另一種方法是在內存中加載KML數據，用數據解析器（Format）處理成矢量要素（Feature）returnnewVectorLayer({properties:{name:'kml',title:'KML數據',locate:[864510.0253082548,5862753.416073311,10]},visible:false,source:newVectorSource({url:'data/lines.kml',format:newKML()})})GPX數據OpenLayers是通過ol/source/Vector和ol/format/GPX加載GPX數據的，一種方法是在Source中設置GPX數據URL，用數據解析器（Format）設置處理轉換工具；另一種方法是在內存中加載GPX數據，用數據解析器（Format）處理成矢量要素（Feature）

returnnewVectorLayer({properties:{name:'gpx',title:'GPX數據',locate:[-7916212.305874971,5228516.283875127,14]},visible:false,source:newVectorSource({url:'data/fells_loop.gpx',format:newGPX()}),style:function(feature){returnstyle[feature.getGeometry().getType()]}})矢量切片數據在src/views/dataService/OpenMap.vue文件中新增createLyrVecTile方法創(chuàng)建圖層，把將圖層添加到地圖實例map對象，矢量切片數據主要是通過ol/source/VectorTileSource加載。returnnewVectorTileLayer({properties:{name:'vectortile',title:'矢量切片數據',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技術WebGIS原理及開發(fā)1.WebGIS概述2.WebGIS基礎技術3.WebGIS技術原理4.WebGIS的Web服務8.OpenLayers進階9.移動GIS10.三維WebGIS5.地圖發(fā)布6.WebGIS客戶端開發(fā)7.OpenLayers多源數據匯聚11.WebGIS應用案例12.未來展望與研究熱點第8章

OpenLayers進階地圖制圖8.4圖形繪制8.1圖形交互編輯8.2標注功能8.3地圖特效8.5圖層動態(tài)投影8.68.1圖形繪制圖形繪制有兩種方式：一種方式是使用空間坐標繪制圖形；另一種方式是使用地圖交互工具進行人工繪制。不管采用哪種方式，都離不開ol/geom/Geometry的子類和ol/Feature類。點繪制constpointCoor=[12758417.315499168,3562866.9013162893]conststyle=newStyle({image:newCircle({radius:10, //半徑fill:newFill({color:'red'}),//填充色stroke:newStroke({color:'yellow'})//邊框})})//創(chuàng)建一個點要素對象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)建一個線要素對象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)建一個面要素對象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],//起點pntEnd:[12758917.315499168,3562866.9013162893],//終點points:[[12758617.315499168,3563166.9013162893]],//控制點pntCount:10//插入平滑點的個數，點越多曲線越平滑}letlineCoor=MathBase.getBezierCurveCoors(params)conststyle=newStyle({stroke:newStroke({color:'yellow',width:10})})//創(chuàng)建一個線要素對象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'//貝塞爾曲線的數學實現(xiàn)方式staticgetBezierCurveCoors(param){param=Object.assign({pntStart:[0,0],pntEnd:[0,1],points:[[1,0]],pntCount:30},param)//1、構造所有的控制點的集合。letctrlPnts=[param.pntStart].concat(param.points).concat([param.pntEnd])letctrlPntsStr=JSON.stringify(ctrlPnts)//2、獲取每個貝塞爾曲線點的坐標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、返回整個坐標串return[param.pntStart].concat(bserPoints).concat([param.pntEnd])}staticgetBezierCurveCoor(points,t,count){if(count===1)returnpoints[0]//計算下一階的貝塞爾控制點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}//進入下一層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:'標注',font:'16pxCalibri,sans-serif',fill:newFill({color:'#000'}),stroke:newStroke({color:'#fff',width:3})})})ügeometry：地理實體。üimage：常用于設置點要素的樣式。üstroke：常用于設置線要素的樣式。üfill：常用于設置面要素的樣式。ütext：常用于設置文字標注的樣式。8.2圖形交互編輯OpenLayers提供了多種用于地圖繪制、交互的類和函數。通過ol/interaction/Draw類創(chuàng)建一個圖形繪制對象并將其添加到地圖中，就可以實現(xiàn)點、折線、多邊形、圓、矩形圖形繪制。圖形選擇//創(chuàng)建Select對象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'圖形旋轉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){//計算當前頂點相對于幾何中心點的旋轉角度constcurrentAngle=Math.atan2(dy,dx)constgeometry=modifyGeometry.geometry0.clone()//根據當前頂點到幾何中心點的距離與初始距離的比例縮放圖形geometry.scale(currentRadius/initialRadius,undefined,center)//根據當前頂點相對于幾何中心點的旋轉角度選擇圖形geometry.rotate(currentAngle-initialAngle,center)modifyGeometry.geometry=geometry}//獲取幾何中心點和最小半徑constcenter=modifyGeometry.centerconstminRadius=modifyGeometry.minRadiusletdx,d//計算當前頂點與幾何中心點之間的距離dx=modifyPoint[0]-center[0]dy=modifyPoint[1]-center[1]constinitialRadius=Math.sqrt(dx*dx+dy*dy)8.3標注功能標注是指結合空間位置，通過圖標、文字等形式把相關的信息展現(xiàn)在地圖上。標注的實現(xiàn)方式有兩種：通過矢量點要素方式實現(xiàn)標注、使用ol/Overlay覆蓋物實現(xiàn)標注。通過矢量點要素方式實現(xiàn)標注。將標注添加到新建的矢量圖層上，再將矢量圖層添加到地圖上疊加顯示。OpenLayers使用獨立的樣式類設置矢量要素信息，提供的ol/style/Icon類可以為矢量點要素設置圖片標識，ol/style/Text類則可以直接設置矢量點要素的文本信息。使用ol/Overlay覆蓋物實現(xiàn)標注。原理是關聯(lián)一個HTML元素，利用HTML的特性使用第三方UI庫實現(xiàn)相應的界面特效。添加的覆蓋物會影響地圖的拖動，因此只有在自定義復雜內容時才使用ol/Overlay覆蓋物實現(xiàn)標注，如單擊地圖彈出對話信息框、地圖上的自定義按鈕等。文本標注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標注popup=newOverlay({element:overlayDlg.value,//將HTML內容添加到覆蓋層positioning:'bottom-center',//覆蓋層位置autoPan:true,//是否自動平移autoPanMargin:20,//設置自動平移邊距offset:[0,-20]//覆蓋層偏移起點的位置})popupContent.value.innerHTML=feature.getProperties().mcpopup.setPosition(feature.getGeometry().getCoordinates())//添加Popup標注到地圖上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'聚合標注letcluster=newCluster({ //創(chuàng)建聚合標注對象distance:100, //設置聚合標注的距離source:source})constvectorLayer=newVectorLayer({source:cluster,style:(feature)=>{//利用mc屬性，給點要素增加標注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)建一個heatmap圖層，通過radius、opacity、blur、source等配置項可以定制出各種效果。radius用于調節(jié)熱力圖點擴散的范圍；opacity用于控制圖層的透明度；blur用于控制熱力圖的熱度深淺；source是ol/source/Vector對象綁定的矢量數據源，可以配合數據解析器（Format）把加載的數據構造為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)計圖統(tǒng)計圖功能用到的核心工具類是ol/Overlay，可以像Control控件一樣將HTML元素添加到地圖上，不過使用overlay對象添加的元素不是固定的，而是可以隨著地圖移動而移動的。創(chuàng)建一個overlay對象比較簡單，在創(chuàng)建overlay對象時指定一個元素，然后再設置overlay顯示的坐標點，并將overlay對象添加到地圖上。üid：設置overlay對象的ID，可以使用map的getOverlayById獲取指定的overlay對象。üelement：設置overlay對象的元素。üoffset：用于設置元素的偏移量，參數為一個數組，數組中的第1個值表示水平方向的偏移，第2個值表示垂直方向的偏移。üposition：設置overlay對象顯示的坐標點。üpositioning：設置overlay對象的位置，可以設置的位置包括bottom-left、bottom-center、bottom-right、center-left、center-center、center-right、top-left、top-center、top-right，默認為top-left。üstopEvent：阻止事件冒泡。üinsertFirst：如果設置為true，則當同一容器中添加了overlay對象和控件時，將overlay對象顯示在控件的下邊。üautoPan：平移時，如果超出窗口范圍，則將自動設置overlay對象顯示在地圖范圍內。üautoPanAnimation：設置autoPan生效時的動畫。üautoPanMargin：設置autoPan生效時距地圖邊界的距離。üclassName：設置overlay對象的CSS類名//遍歷Feature創(chuàng)建overlay對象featureList.forEach(feature=>{//實例化ECharts圖表組件，并獲取渲染后的dom元素，從而創(chuàng)建overlay對象constoverlay=newOverlay({element:createApp(ComEchart,{feature}).mount(document.createElement('div')).$el,offset:[-40,-50]})map.addOverlay(overlay)//將overlay對象設置在面要素的中心位置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配置參數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圖表組件的關鍵代<template><divref="EChartsRef"style="height:100px;width:100px;"></div></template>分級著色專題圖//創(chuàng)建Feature樣式constgetStyle=feature=>{//獲取要素中的objectid屬性值constobjectid=Number(feature.get('objectid'))//根據objectid值的不同范圍，設置不同的顏色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設置樣式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'自定義切片地圖顏色地圖應用一般要把接入的切片地圖作為底圖，但切片地圖在發(fā)布時已經配置好了著色和樣式。天地圖、高德地圖、谷歌地圖等在線地圖服務均采用清爽、清晰的著色方案。但這種著色方案在暗色主題、炫酷大屏系統(tǒng)中就顯得很突兀，這時就需要我們自定義切片地圖的顏色自定義切片地圖顏色功能用到的核心工具類就是OpenLayers提供的ol/layer/Image和ol/source/Raster。（1）使用ol/source/XYZ或者ol/source/Source正常創(chuàng)建切片source對象。（2）對創(chuàng)建好的source對象進行包裝處理，具體包裝處理邏輯如下：①編寫著色處理函數operation。②用創(chuàng)建好的source對象作為參數，創(chuàng)建ol/source/Raster自定義的切片source對象，同時傳入operation、operationType、lib等參數。其中l(wèi)ib為函數注冊對象，必須把編寫的處理函數operation及其依賴模塊的其他函數同名注冊進去。（3）使用切片source對象，創(chuàng)建ol/layer/Image圖層layer對象。（4）將layer對象添加到地圖中。實現(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]//運用圖像學公式，設置灰度值constgrey=r*0.3+g*0.59+b*0.11//將RGB的值替換為灰度值