高博洋-一個初學者談Web遙感前端開發技術的入門經歷.pdf

《高博洋-一個初學者談Web遙感前端開發技術的入門經歷.pdf》由會員分享，可在線閱讀，更多相關《高博洋-一個初學者談Web遙感前端開發技術的入門經歷.pdf（27頁珍藏版）》請在三個皮匠報告上搜索。

1、一個初學者談Web遙感前端開發技術的入門經歷高博洋易智瑞信息技術有限公司 遙感事業部Web遙感開發的發展背景與方向選擇以一名遙感應屆畢業生的視角，介紹個人情況、Web遙感前端開發的發展背景，以及選擇該方向的心路歷程個人簡介本人2022年6月畢業于黑龍江工程學院遙感科學與技術專業，現就職易智瑞信息技術有限公司遙感事業部，任Web遙感前端開發工程師一職。本科在校期間對編程非常熱愛，曾獨立編寫“葵花8遙感數據森林火點與火情實時檢測系統”，為現在掌握前端開發技術打下了堅實的基礎。入職以來，經歷多個項目的磨練和學習，從簡單了解Web遙感前端開發技術，到現在可以熟練編寫頁面設置樣式、設定邏輯交互，獨立完成

2、簡單系統的開發；從開始的學習樣例代碼，到現在可以編寫擴展程序。隨著遙感衛星逐年發射升空，國家對遙感事業的的高度重視和大力支持，衛星的傳感器種類、時空分辨率、觀測范圍、波段數量正逐步提高，使其在各個領域中不斷向深層次、規?；?、多元化、智能化發展。隨著科學技術的進步，光譜信息成像化，雷達成像多極化，光學探測多向化，地學分析智能化，環境研究動態化以及資源研究定量化，大大提高了遙感技術的實時性和運行性，使其向多尺度、多頻率、全天候、高精度和高效率的目標快速發展。進入了立體化、多層次、多角度、全方位和全天候地對地觀測的新時代。遙感技術的發展規?；嘣顚哟沃悄芑喑叨雀呔榷囝l率遙感系統的發展遙感桌面

3、系統遙感定制系統Web遙感服務平臺雖然社會對于遙感技術的需求越來越多，但遙感技術的專業性（數據的處理、算法服務的搭建、精度評價等一系列專業度非常高的操作）、復雜性讓許多人都望而卻步。方向的選擇Web遙感應用系統前端開發長期性專業性復雜性隨著Web前端開發，即與遙感技術的不斷融合，將遙感處理、遙感分析、遙感模型算法等以Web Services的方式提供，可以讓非專業人士面對簡單的頁面進行交互，極大程度上增加了頁面的可視性、也簡化了系統的使用難度，讓遙感技術被更廣泛的應用。Web Services遙感模型算法遙感分析遙感處理交互性美觀性實用性Web遙感應用系統的介紹B/S系統的架構，前端頁面、遙感

4、服務、后臺數據管理Web遙感應用系統開發通常使用B/S系統的架構（Browser/Server,瀏覽器/服務器)，將系統功能實現的核心部分集中到服務器中，同時簡化了系統的開發、維護以及使用，即可利用一個Web瀏覽器完成專業的遙感影像處理。這個簡單的在線遙感圖像處理和分析系統實現了多用戶通過Web瀏覽器，按照自己的應用需求選擇不同的數據、功能模塊，得到相應的結果，實現在線的按需請求遙感服務。B/S系統的架構瀏覽器數據庫解析操作、請求數據渲染+DOM調用業務邏輯對數據進行邏輯處理服務器Web遙感應用系統的組成影像一鍵式處理圖像融合、裁剪、拼接植被分析、火災監測、城市熱島建筑物動態監測、飛機識別應用

5、服務開發后臺數據管理前端頁面開發ENVI Services Engine等服務器瀏覽器HTTP RESTHTMLCSSJavaScriptWeb遙感應用系統開發可以將其詳細劃分為：遙感服務開發、前端頁面開發、后臺數據管理三個模塊數據管理Web遙感應用系統前端開發基礎知識、常用軟件及參考網站以一名初學者的角度，介紹Web遙感應用系統所需要的基礎知識，軟件技巧和一些常用的組件庫、圖標庫等掌握語言技術：HTML 超文本標記語言：是一種用于創建網頁的標準標記語言，可以建立自己的WEB站點，運行在瀏覽器上，由瀏覽器來解析。CSS（Cascading Style Sheets）層疊樣式表：樣式定義，靜態修

6、飾網頁、配合各種腳本語言動態地對網頁各元素進行格式化JS（JavaScript)是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言（包含：ES5、ES6、AJAX等技術）Web遙感前端開發基礎知識JavaScript框架：Vue 是一款用于構建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助我們高效地開發用戶界面。地圖框架：ArcGIS Api for JavaScript（封裝性高）Mapbox GL JS（可定制性程度高、開源軟件開發工具包）其他：PC端常用UI組件庫：Element U

7、I阿里云圖標庫簡潔化數據驅動靈活性高可逐步集成模塊友好輕量級Vue多光標和選擇 Multi-cursor and selectionWeb前端開發常用軟件VS Code按鍵組合功能 FunctionCtrl+X剪切行Ctrl+C復制行Alt+/向上/向下移動行Ctrl+Shift+K刪除行Ctrl+Shift+跳到匹配的括號Ctrl+/縮進/縮出行Ctrl+/切換行注釋Shift+Alt+A切換塊注釋Alt+單擊插入光標搜索 SearchCtrl+F查找按鍵組合功能 FunctionAlt+單擊插入光標Ctrl+Alt+/在上/下插入光標Ctrl+U撤消上一個光標操作Shift+Alt+I在選

8、定的每一行的末尾插入光標Ctrl+I選擇當前行基礎編輯 Basic editing文件管理 File managementCtrl+S保存Ctrl+W關閉Ctrl+Shift+T重新打開關閉的編輯器顯示 DisplayCtrl+B切換側欄可見性集成終端 Integrated terminalCtrl+顯示集成終端Web遙感前端開發常用參考網站 https:/cn.vuejs.org/index.htmlVue官網 https:/ https:/ UI組件庫 https:/animate.style/Animate.css動畫庫 https:/ https:/ CSS框架 https:/ Api

9、 for JavaScript http:/ UI組件庫編寫前端參數界面（圖層管理器，任務管理器）ENVI Services Engine安裝與使用編寫ENVI task服務 https:/ Services Engine安裝ENVI Service Engine 產品，試用許可包含 1 個 Worker，即1個任務并行，后續任務排隊。已激活 ENVI 5.5.x 的用戶可直接安裝 gsfXX_setup.exe 進行使用，無需重新激活。開始安裝并行任務設置pro.taskENVI Task服務 https:/ Services Engine安裝與使用編寫ENVI task服務創建Vue框架創

10、建地圖底圖（功能：工具欄的編寫：測距、測面積、放大縮小、底圖切換、拉幕等等）方案1：ArcGIS.底圖方案2：Mapbox.底圖使用Element UI組件庫編寫前端參數界面（圖層管理器，任務管理器）創建Vue CLI腳手架：npm install-g vue/cli創建Vue項目：vue create web-demo配置文件router、pages、APP、main、plugins/mixin.js.安裝依賴：npm i vue-router3.2npm i sass1.35.2npm i sass-loader10.2.1.引入Element UI組件plugins：element.js

11、配置Vue項目創建基本配置 https:/.vuejs.org/Vue官網天地圖底圖ArcGIS API for JavaScriptMapbox https:/ install arcgis/core4.23引入樣式：import arcgis/core/assets/esri/themes/light/main.cssArcGIS API for JavaScript安裝與使用 https:/ API for JavaScript測量組件ArcGIS API for JavaScript測量工具Mapbox安裝與使用安裝：npm install mapbox-gl save引入樣式：import mapbox-gl/dist/mapbox-gl.css“其余的樣式按需引入底圖切換控件、圖層管理控件、拉幕控件 http:/ UI的使用 https:/ UI