WebGIS原理及開發(fā)-基于開源框架的WebGIS技術(shù) 課件05-地圖發(fā)布、06-WebGIS客戶端開發(fā)

基于開源框架的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)第5章

地圖發(fā)布使用QGIS編輯地圖5.4地圖發(fā)布的常用工具5.1地圖數(shù)據(jù)的獲取5.2地圖投影與地圖校正5.3使用QGIS定制地圖樣式5.5使用GeoServer發(fā)布地圖5.6使用GeoServer實(shí)現(xiàn)地圖切片5.7地圖服務(wù)的調(diào)用5.85.地圖發(fā)布地圖發(fā)布的業(yè)務(wù)流程地圖發(fā)布的一般流程包括數(shù)據(jù)獲取、數(shù)據(jù)校正、投影變換、數(shù)據(jù)編輯、定制地圖樣式、地圖發(fā)布六個(gè)主要環(huán)節(jié)。在某些應(yīng)用場(chǎng)景下，為了提升Web服務(wù)的性能，通常會(huì)增加地圖切片的環(huán)節(jié)，來實(shí)現(xiàn)地圖數(shù)據(jù)的緩存。5.1地圖發(fā)布的常用工具常用工具序號(hào)流程環(huán)節(jié)軟件名稱主要作用1數(shù)據(jù)獲取QGIS對(duì)數(shù)據(jù)進(jìn)行操作，如存儲(chǔ)、組織與顯示2數(shù)據(jù)校正QGIS對(duì)矢量數(shù)據(jù)和柵格數(shù)據(jù)進(jìn)行校正，包括仿射校正、控制點(diǎn)校正等3投影變換QGIS提供大地坐標(biāo)和平面坐標(biāo)間的投影，提供不同橢球體下的地圖投影與變換4數(shù)據(jù)編輯QGIS對(duì)點(diǎn)、線、面要素的數(shù)據(jù)進(jìn)行編輯5定制地圖樣式QGIS對(duì)點(diǎn)、線、面要素的符號(hào)化和可視化參數(shù)進(jìn)行設(shè)置6地圖發(fā)布GeoServer將地圖發(fā)布成符合OGC標(biāo)準(zhǔn)的Web服務(wù)7地圖切片GeoServer對(duì)地圖進(jìn)行動(dòng)態(tài)切片5.1地圖發(fā)布的常用工具QGIS安裝按照QGIS的安裝向?qū)?，依次完成許可協(xié)議、安裝路徑的設(shè)置后，自動(dòng)完成QGIS的安裝。QGIS的官方網(wǎng)站：/zh-Hans/site/forusers/download.htmlQGIS下載5.1地圖發(fā)布的常用工具GeoServer安裝GeoServer官方網(wǎng)站：/download/按照GeoServer的安裝向?qū)?，依次完成安裝程序的目錄、默認(rèn)開始菜單、Java運(yùn)行環(huán)境、數(shù)據(jù)目錄、賬號(hào)和密碼、服務(wù)端口號(hào)、服務(wù)的啟動(dòng)方式的設(shè)置后，自動(dòng)完成GeoServer的安裝.GeoServer下載5.2地圖數(shù)據(jù)的獲取矢量數(shù)據(jù)的獲取矢量數(shù)據(jù)的獲取：利用各種定位儀器設(shè)備采集空間坐標(biāo)數(shù)據(jù)。例如，GPS、平板測(cè)圖儀等，利用它們可以測(cè)得地面上任意一點(diǎn)的地理坐標(biāo)（通常是經(jīng)、緯度數(shù)據(jù)），可以用來描述點(diǎn)、線、面地理實(shí)體的空間位置。通過柵格數(shù)據(jù)轉(zhuǎn)換而來，該方法在利用遙感數(shù)據(jù)動(dòng)態(tài)更新GIS數(shù)據(jù)庫時(shí)尤為有用。通過紙質(zhì)地圖數(shù)字化得到，常用的數(shù)字化方式有手扶跟蹤數(shù)字化和掃描矢量化。利用已有的數(shù)據(jù)通過模型運(yùn)算得到。例如，通過疊加分析、緩沖區(qū)分析等空間模型運(yùn)算都可以生成新的矢量數(shù)據(jù)。5.2地圖數(shù)據(jù)的獲取柵格數(shù)據(jù)的獲取柵格數(shù)據(jù)的獲取：地圖掃描：通過掃描儀，特別是大幅面掃描儀可以快速獲取大量地圖的掃描圖像。遙感圖像解譯：遙感是一種實(shí)時(shí)、動(dòng)態(tài)地獲取地表信息的手段。衛(wèi)星拍攝或航拍：將光學(xué)拍攝成像系統(tǒng)安裝在衛(wèi)星和飛機(jī)上來拍攝照片，并生成數(shù)字化的柵格數(shù)據(jù)。規(guī)則點(diǎn)采樣：將研究區(qū)域劃為均勻的網(wǎng)格，給每個(gè)網(wǎng)格賦值，即可得到柵格數(shù)據(jù)。不規(guī)則點(diǎn)采樣及內(nèi)插：采用的內(nèi)插計(jì)算有三角網(wǎng)插值、趨勢(shì)面擬合、克里格插值等。其他方法：通過矢量轉(zhuǎn)柵格運(yùn)算、柵格圖層的運(yùn)算得到派生的柵格數(shù)據(jù)。5.3地圖投影與地圖校正地圖投影地圖投影是指將地球橢球面上的空間信息表現(xiàn)到平面地圖上，或用GIS的地圖顯示出來。地圖投影必須采用某種數(shù)學(xué)法則，使空間信息在地球表面上的位置和地圖平面位置一一對(duì)應(yīng)起來。常見的投影方式有：圓柱投影、圓錐投影和方位投影地圖投影方式5.3地圖投影與地圖校正地圖校正地圖校正是為了實(shí)現(xiàn)對(duì)數(shù)字化數(shù)據(jù)的坐標(biāo)系轉(zhuǎn)換和圖紙變形誤差的糾正。常見的GIS軟件都具有仿射變換、相似變換和二次變換等地圖校正功能。地圖校正5.4使用QGIS編輯地圖地圖編輯打開QGIS軟件，加載或新建圖層數(shù)據(jù)，激活編輯工具條，即可開始地圖數(shù)據(jù)的編輯操作。地圖編輯5.5使用QGIS定制地圖樣式符號(hào)化配置右鍵單擊圖層，在彈出的右鍵菜單中選擇“屬性”，在彈出的“圖層屬性”對(duì)話框中選擇“符號(hào)化”→“分類”，在“分類”窗口中設(shè)置相應(yīng)的參數(shù)即可。符號(hào)化設(shè)置5.5使用QGIS定制地圖樣式顏色修改如果對(duì)默認(rèn)的顏色配置不滿意，則可根據(jù)自身的需求來修改顏色，例如將建筑物改為淡黃色。顏色修改5.5使用QGIS定制地圖樣式注記配置右鍵單擊圖層，在彈出的右鍵菜單中選擇“屬性”，在彈出的“圖層屬性”對(duì)話框中選擇“標(biāo)注”→“單一標(biāo)注”，在“單一標(biāo)注”窗口（見圖5.11）中“值”的下拉框中選擇“name”，即可修改注記的其他配置信息。標(biāo)注配置配置后的效果5.5使用QGIS定制地圖樣式比例尺配置右鍵單擊圖層，在彈出的右鍵菜單中選擇“屬性”，在彈出的“圖層屬性”對(duì)話框中選擇“標(biāo)注”→“基于規(guī)則的標(biāo)注”可彈出“EditRule”對(duì)話框（見圖5.13），在“EditRule”對(duì)話框中設(shè)置合適的范圍后單擊“OK”按鈕即可。規(guī)則配置比例尺配置后的效果5.5使用QGIS定制地圖樣式符號(hào)化配置右鍵單擊圖層，在彈出的右鍵菜單中選擇“樣式”→“保存樣式”，可彈出“保存圖層樣式”對(duì)話框。在“保存樣式”下拉框中選擇“保存為SLD格式樣式文件”。保存樣式為SLD文件5.6使用GeoServer發(fā)布地圖啟動(dòng)GeoServer服務(wù)選擇菜單“開始”→“GeoServer”→“StartGeoServer”即可啟動(dòng)GeoServer服務(wù)。Geoserver啟動(dòng)成功5.6使用GeoServer發(fā)布地圖上傳樣式文件在GeoServer主界面左側(cè)的工具欄單擊“Styles”可進(jìn)入“Styles”管理界面，將上節(jié)課程導(dǎo)出的QGIS樣式文件上傳至GeoServer中。上傳樣式文件5.6使用GeoServer發(fā)布地圖發(fā)布地圖按照地圖發(fā)布的操作步驟，發(fā)布地圖并選擇上一步上傳的樣式文件，并應(yīng)用到地圖的樣式中。圖層預(yù)覽效果5.7使用GeoServer實(shí)現(xiàn)地圖切片地圖柵格切片找到需要實(shí)現(xiàn)地圖柵格切片的圖層，切換到“TileCaching”選項(xiàng)卡，設(shè)置地圖柵格切片的參數(shù)，選擇切片方案，設(shè)置圖層的GridSet，選擇添加EPSG:4326的切片方案。設(shè)置柵格切片方案5.7使用GeoServer實(shí)現(xiàn)地圖切片地圖矢量切片安裝完矢量切片插件以后，找到需要實(shí)現(xiàn)地圖矢量切片的圖層，切換到“TileCaching”選項(xiàng)卡，在“TileImageFormats”下面會(huì)多出地圖矢量切片格式的選項(xiàng)，如application/json;type=geojson、application/json;type=topojson、application/json;type=utfgrid、application/vnd.mapbox-vector-tile，勾選這幾個(gè)選項(xiàng)即可完成地圖矢量切片的設(shè)置。設(shè)置矢量切片方案5.8地圖服務(wù)調(diào)用WEB地圖服務(wù)（WMS）調(diào)用以訪問JPEG格式的服務(wù)為例，WMS的接口為http://localhost:8080/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:giant_polygon&bbox=-180.0,-90.0,180.0,90.0&width=768&height=384&srs=EPSG:4326&styles=&format=image/jpeg。WMS服務(wù)調(diào)用5.8地圖服務(wù)調(diào)用WEB要素服務(wù)（WFS）調(diào)用以訪問GeoJSON格式的服務(wù)為例，訪問WFS的接口為http://localhost:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger:giant_polygon&maxFeatures=50&outputFormat=application/json。WFS服務(wù)調(diào)用5.8地圖服務(wù)調(diào)用WEB切片服務(wù)（WMTS）調(diào)用以訪問EPSG:4326/JPEG格式的服務(wù)為例，訪問WMTS的接口為http://localhost:8080/geoserver/gwc/demo/nurc:Pk50095?gridSet=EPSG:4326&format=image/jpeg。WMTS服務(wù)調(diào)用5.8地圖服務(wù)調(diào)用地圖矢量切片服務(wù)調(diào)用以訪問EPSG:4326/PBF格式的服務(wù)為例，訪問地圖矢量切片服務(wù)的接口為http://localhost:8080/geoserver/gwc/demo/cite:ydlx?gridSet=EPSG:4326&format=application/vnd.mapbox-vector-tile。地圖矢量切片服務(wù)調(diào)用歡迎提問基于開源框架的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)第6章WebGIS客戶端開發(fā)OpenLayers開發(fā)方式1.4OpenLayers簡(jiǎn)介1.1OpenLayers體系架構(gòu)1.2OpenLayers常用接口1.3OpenLayers入門1.56.1OpenLayers簡(jiǎn)介OpenLayers是最早的WebGIS開源庫之一，迭代開發(fā)的歷史較長(zhǎng)，目前是WebGIS中功能齊全、資料和教程豐富的框架，同時(shí)其學(xué)習(xí)曲線比較平緩，很容易上手。教程網(wǎng)址：/en/latest/examples/API網(wǎng)址：

/en/latest/apidoc/下載地址：https://openL/downloadOpenLayers采用了Canvas、WebGL和HTML5中最新的技術(shù)來構(gòu)建框架，可以在移動(dòng)設(shè)備上運(yùn)行。前端框架優(yōu)點(diǎn)缺點(diǎn)OpenLayers較重量級(jí)的開源庫，二維GIS功能最豐富全面，有很多演示的樣例，結(jié)構(gòu)清晰、簡(jiǎn)單易用地圖樣式簡(jiǎn)單，難以定制美觀的可視化效果Leaflet輕量級(jí)的前端地圖可視化庫，開源、體積小、結(jié)構(gòu)清晰、簡(jiǎn)單易用不支持WebGL渲染，性能有瓶頸，對(duì)復(fù)雜GIS應(yīng)用的支持力度不足ArcGISJavaScriptAPI二三維一體化，結(jié)合ArcGISServer開發(fā)WebGIS的效率很高，配合服務(wù)器的能力可以實(shí)現(xiàn)復(fù)雜GIS應(yīng)用，自帶很多示例ESRI公司的閉源庫，接口和教程全英文，上手難度大Mapbox開源庫，WebGL渲染機(jī)制、二三維一體化，提供的專題地圖更具美感需要注冊(cè)Key，一般依賴于Mapbox公司提供的地圖服務(wù)，對(duì)網(wǎng)絡(luò)連接有較高的依賴性；部分配套功能和服務(wù)需要付費(fèi)Cesium重量級(jí)開源的三維引擎，WebGL渲染機(jī)制、二三維一體化可視化表達(dá)；經(jīng)/緯度坐標(biāo)系、支持球體結(jié)構(gòu)復(fù)雜，上手難度大百度地圖JavaScriptAPIGL非開源的輕量級(jí)庫，提供了地圖、檢索、導(dǎo)航、實(shí)時(shí)交通等常用服務(wù)需要注冊(cè)Key，接口開發(fā)者有免費(fèi)的限額，對(duì)復(fù)雜GIS應(yīng)用的支持力度不足WebGIS主流框架列表6.2OpenLayers體系架構(gòu)

把整個(gè)地圖看作一個(gè)地圖容器（Map），核心部分為地圖表現(xiàn)相關(guān)的視圖（View）、地圖圖層（Layer）、對(duì)應(yīng)圖層的數(shù)據(jù)源（Source）與矢量圖層樣式（Style）。除此之外容器中還有地圖交互（Interaction）、操作控件（Control）、覆蓋層（Overlay），以及綁定在Map和Layer上的一系列待請(qǐng)求的事件（MapEvent）。底層是OpenLayers的數(shù)據(jù)源，即Image、GML、KML、JSON、OGC服務(wù)資源等。幾何圖形架構(gòu)OpenLayers的空間數(shù)據(jù)是由點(diǎn)、線、面要素構(gòu)成，以ol/geom/Geometry類為基類，擴(kuò)展出簡(jiǎn)單圖形和圖形集合，其中簡(jiǎn)單圖形又派生出點(diǎn)、線、面、圓、多線、多面等圖形。地圖數(shù)據(jù)通過圖層Layer組織渲染，且通過數(shù)據(jù)源Source設(shè)置具體的地圖數(shù)據(jù)來源，因此圖層和數(shù)據(jù)源就象形體和它的影子一樣形影不離，密切相關(guān)。地圖數(shù)據(jù)根據(jù)數(shù)據(jù)源可分為Image、Tile、Vector三大類。圖層數(shù)據(jù)源架構(gòu)6.3OpenLayers常用接口Map（ol/Map）：地圖容器，以Canvas渲染空間矢量、瓦片數(shù)據(jù)，加載地圖控件，但對(duì)矢量數(shù)據(jù)支撐有限。WebGLMap（ol/WebGLMap）：使用WebGL渲染地圖容器，渲染性能更高。View（ol/View）：地圖視圖，可定義視圖的投影坐標(biāo)系，控制地圖中心位置、分辨率、顯示級(jí)別。Layer（ol/Layer/Base）：圖層，派生出多個(gè)圖層子類，用于在地圖容器中掛載數(shù)據(jù)源。Source（ol/source/Source）：數(shù)據(jù)源，派生出多個(gè)數(shù)據(jù)源子類，加載空間數(shù)據(jù)并設(shè)。Layer的數(shù)據(jù)源進(jìn)行顯示。Feature（ol/Feature）：地圖要素對(duì)象，矢量數(shù)據(jù)要素單位，包含屬性、空間幾何對(duì)象和樣式，掛載到Source中進(jìn)行顯示。Geometry（ol/geom/Geometry）：空間幾何對(duì)象，派生出點(diǎn)線面等幾何子類。Style（ol/style/Style）：顯示樣式類，通過其子類渲染Feature要素樣式，包括填充樣式、邊線樣式、圖標(biāo)樣式、文字樣式。Format（ol/format/Feature）：數(shù)據(jù)解析器，派生出多個(gè)解析器子類，用于讀寫各類格式數(shù)據(jù)，如GeoJSON、KML、GPX、WKT等。Overlay（ol/Overlay）：覆蓋層，脫離圖層邏輯直接疊加在地圖上顯示的要素，關(guān)聯(lián)一個(gè)HTML元素為錨點(diǎn)，對(duì)一些專題圖和個(gè)性化定制非常有用。Control（ol/control/Control）：控件工具，提供了多種常用的地圖控件，如縮放控件、鼠標(biāo)位置控件、鷹眼、比例尺等。Interaction（ol/interaction/Interaction）：地圖交互類，提供鼠標(biāo)、鍵盤等操作的地圖交互接口，如選擇交互、拖拽平移交互、繪制交互、點(diǎn)擊交互等。Projection（ol/pro/Projection）：地圖投影類，定義投影信息、提供投影轉(zhuǎn)換方法。MapEvent（ol/MapEvent）：地圖事件類，操作事件對(duì)象，如點(diǎn)擊、雙擊、拖拽、鼠標(biāo)移動(dòng)等。6.4OpenLayers開發(fā)方式<scriptsrc="./ol/dist/ol.js"></script><linkrel="stylesheet"href="./ol/ol.css"><scriptsrc="https:///npm/ol@v7.3.0/dist/ol.js"></script><linkrel="stylesheet"href="https:///npm/ol@v7.3.0/ol.css">Script標(biāo)簽引入本地庫引入cdn在線庫引入npminstallol模塊加載安裝OpenLayers庫用import動(dòng)態(tài)加載模塊importMapfrom'ol/Map.js';importOSMfrom'ol/source/OSM.js';6.5OpenLayers入門——開發(fā)環(huán)境準(zhǔn)備安裝VSCode下載地址/DownloadVisualStudioCode是一款由微軟開發(fā)的、跨平臺(tái)的免費(fèi)源代碼編輯器，它界面簡(jiǎn)潔、小巧輕便，可以支持多種語言，具有高度可配置性和可擴(kuò)展性，依賴第三方擴(kuò)展來提供更深的功能。安裝NodeJS下載地址/en/download

Node.js是一個(gè)基于ChromeV8引擎的JavaScript運(yùn)行環(huán)境，發(fā)布于2009年5月。它采用事件驅(qū)動(dòng)、非阻塞式I/O模型，讓JavaScript可以像PHP、Python、Perl、Ruby等語言一樣運(yùn)行在服務(wù)端平臺(tái)。NodeJS內(nèi)部已經(jīng)集成了npm包管理器，安裝完成后可以直接使用。打開cmd命令窗口輸入node-v和npm-v能正常顯示版本，說明已經(jīng)安裝完成創(chuàng)建Vue工程npminitvue@latest自動(dòng)安裝并執(zhí)行官方最新腳手架create-vue，它使用Vite構(gòu)建工具創(chuàng)建工程，舊版腳手架使用Webpack構(gòu)建工具根據(jù)提示輸入項(xiàng)目名wegis_ol7，安裝依賴VueRouter、Pinia、ESLint、Prettier模塊；也可以直接按下回車鍵，在項(xiàng)目創(chuàng)建后，通過npminstall根據(jù)需要安裝依賴。按提示安裝模塊（1）node_modeles是執(zhí)行npminstall命令后安裝的依賴模塊；（2）public是vue工程的靜態(tài)文件；（3）src是源碼文件根目錄；（4）.eslintrc.cjs是代碼規(guī)范ESLint工具的配置文件；（5）.prettierrc.json是文件格式化Prettier工具的配置文件；（6）index.html是系統(tǒng)的根頁面；（7）package.json是npm創(chuàng)建的工程（包）的描述文件，定義了依賴的包和版本、可執(zhí)行命令；（8）vite.config.js是vite構(gòu)建工具的配置，包括代理、運(yùn)行、打包工程。項(xiàng)目目錄結(jié)構(gòu)啟動(dòng)工程npminstall會(huì)根據(jù)package.json下載依賴的模塊npmrundev會(huì)啟動(dòng)項(xiàng)目，并生成訪問地址安裝依賴npminstallolnpminstallelement-plusnpminstallaxios安裝OpenLayers模依賴庫安裝UI組件依賴庫安裝網(wǎng)絡(luò)請(qǐng)求依賴庫6.5OpenLayers入門——地圖控件開發(fā)創(chuàng)建地圖在src/main.js文件中引入OpenLayers、element-plus依賴資源在html中定義設(shè)定一個(gè)元素作為地圖容器；使用ol/Map類構(gòu)造地圖對(duì)象；創(chuàng)建視圖對(duì)象，設(shè)置視圖投影（默認(rèn)是EPSG:3857）、設(shè)置視圖中心點(diǎn)、設(shè)置視圖顯示級(jí)別constviewOpts=Object.assign({projection:'EPSG：3857',center:[12758417.315499168,3562866.9013162893],zoom:16.5,},props.viewConf)constmap=newMap({//設(shè)置地圖的dom容器target:'mapDom',//設(shè)置地圖的視圖配置，projection默認(rèn)是EPSG:3857view:newView(viewOpts),//創(chuàng)建顯示的圖層序列l(wèi)ayers