0. 前言

本人只是一個普普通通的 GIS 學(xué)生, 下面是記錄我的寫的一個作業(yè) demo 的內(nèi)容, 可能會存在一定的錯誤, 歡迎在評論區(qū)\私信交流!

*完整功能展示看這里 (B站)

*感興趣可以下載完整 demo 看看 (阿里云盤)

1. 功能設(shè)計

本網(wǎng)站（GIS考研院?？梢暬瘜ｎ}網(wǎng)站）為2022年GIS考研初期準(zhǔn)備擇校的學(xué)生服務(wù)，提出以下三個主要功能的設(shè)計：

（1）基本功能：如放大、縮小地圖、地圖圖層切換管理功能、地圖測量、幾何繪圖，提供用戶基本的地圖操作工具，便于用戶瀏覽網(wǎng)站地圖內(nèi)容;

（2）專題數(shù)據(jù)功能：提供用戶提供點(diǎn)擊地圖交互，可以得到不同院校點(diǎn)的招生信息、招生人數(shù)熱力圖，幫助用戶了解自己心怡的考研院校在該省份的競爭能力;

（3）POI檢索, 導(dǎo)航規(guī)劃：通過高德 API 提供用戶檢索地點(diǎn)以及進(jìn)行路線規(guī)劃導(dǎo)航功能，通過用戶基本地圖瀏覽功能。(這個功能是老師布置作業(yè)要求必須有的).

(上面這個圖用ProcessOn 一個在線繪圖網(wǎng)站畫的, 可能會設(shè)計得不規(guī)范.)

2. 數(shù)據(jù)處理

通過對研招網(wǎng)進(jìn)行Python爬蟲采集 GIS 考研院校信息數(shù)據(jù), 再結(jié)合高德地圖開放地理編碼 API, 以及開源的火星坐標(biāo)系與 WGS84 坐標(biāo)系轉(zhuǎn)換 API 形成經(jīng)緯度坐標(biāo)數(shù)據(jù). 然后通過 QGIS 進(jìn)行地理數(shù)據(jù)生成與綜合處理形成 GeoJson 文件.

(爬蟲方法用的最簡單的 request. 由于是一年前大三的時候?qū)懽鳂I(yè)做的數(shù)據(jù), 已經(jīng)找不到我當(dāng)時寫的代碼了.)

總計有以下兩個數(shù)據(jù)內(nèi)容：

（1）University(.geojson): 我國2022年GIS碩士招生院校點(diǎn)狀地理數(shù)據(jù);

（2）Details(.geojson): 各個招生院校的不同專業(yè)、方向的招生詳情文本屬性數(shù)據(jù).

數(shù)據(jù)內(nèi)容存在一點(diǎn)小問題：

① 沒有將除了各大高校之外的研究院納入爬蟲范圍, 以及沒有保存研招網(wǎng)的原網(wǎng)址, 使得后面信息展示時不能實(shí)現(xiàn)跳轉(zhuǎn)對應(yīng)網(wǎng)頁的功能;

② 這個數(shù)據(jù)是很久之前做另一份作業(yè)的, 把高德坐標(biāo)轉(zhuǎn)成了 WGS84, 但是這個網(wǎng)站用的高德地圖 API, 所以應(yīng)該要轉(zhuǎn)回來, 否則加載的數(shù)據(jù)是存在很大偏移的 (偷懶就沒有轉(zhuǎn)了);

③ 由于不會處理 js 引入數(shù)據(jù)產(chǎn)生的跨域報錯問題，所以 json 數(shù)據(jù)直接用 js 文件的兩個變量引入.)

(寫到后面發(fā)現(xiàn)能使用服務(wù)器打開的方式解決數(shù)據(jù)跨域問題, 如安裝一個 Live Server 插件.)

3. 項(xiàng)目結(jié)構(gòu)

(功能很簡單, 所以使用原生 JS, 沒有用框架來寫.)

(1) index.html 項(xiàng)目入口 (頁面結(jié)構(gòu))

主要頁面結(jié)構(gòu):

① 一個放置地圖的標(biāo)簽(div 容器)

② 側(cè)邊工具欄按鈕, 信息卡片(div 容器\ radio 選擇框\ input 輸入框)

③ 導(dǎo)航信息框 (div 容器, 內(nèi)容由 API 模板自動填入)

④ POI 搜索框以及搜索\關(guān)閉按鈕(div 容器)

⑤ POI 搜索結(jié)果信息框 (div 容器, 內(nèi)容由 API 模板自動填入)

頁面結(jié)構(gòu)如下圖:
文章來源地址http://www.zghlxwxcb.cn/news/detail-538069.html

<!-- 地圖容器 -->
<div id="container"></div>
<!-- 標(biāo)題欄 -->
<h3 id="title">GIS考研院?？梢暬瘜ｎ}網(wǎng)站</h3>
<!-- 側(cè)邊欄按鈕 -->
<div class="sidebar">
    <div class="tools-button" id="navigationTools_button" title="路線規(guī)劃導(dǎo)航"></div>
    <div class="tools-button" id="drawTools_button" title="繪圖工具"></div>
    <div class="tools-button" id="measureTools_button" title="測量工具"></div>
</div>
<!-- 功能卡片 -->
<div class="input-card">
    <!-- 測量工具相關(guān) -->
    <div class="input-item measureTools">
        <div class="function-name">選擇測量方式:</div>
        <input type="radio" name="mouseTools" value="rule"><span class="input-text">距離測量</span>
        <input type="radio" name="mouseTools" value="measureArea"><span class="input-text">面積測量</span>
    </div>
    <div class="input-item measureTools">
        <input id="close-measure" type="button" class="btn" value="關(guān)閉" />
    </div>
    <!-- 幾何繪制工具相關(guān) -->
    <div class="input-item drawTools">
        <div class="function-name">選擇繪圖方式:</div>
        <input type="radio" name="mouseTools" value="marker"><span class="input-text">點(diǎn)</span>
        <input type="radio" name="mouseTools" value="polyline"><span class="input-text">折線</span>
        <input type="radio" name="mouseTools" value="polygon"><span class="input-text">多邊形</span>
    </div>
    <div class="input-item drawTools">
        <input type="radio" name="mouseTools" value="rectangle"><span class="input-text">矩形</span>
        <input type="radio" name="mouseTools" value="circle"><span class="input-text">圓</span>
    </div>
    <div class="input-item drawTools">
        <input id="clear-draw" type="button" class="btn" value="清除上一個" />
        <input id="clear-all-draw" type="button" class="btn" value="清空" />
        <input id="close-draw" type="button" class="btn" value="結(jié)束繪制" />
    </div>
    <!-- 導(dǎo)航工具相關(guān) -->
    <div class="input-item navigationTools">
        <div class="function-name">選擇出行方式:</div>
        <input type="radio" name="navigationType" checked="" value="driving"><span class="input-text">駕車</span>
        <input type="radio" name="navigationType" value="transfer"><span class="input-text">公交</span>
        <input type="radio" name="navigationType" value="walking"><span class="input-text">步行</span>

        <div class="function-name">路線最先考慮:</div>
        <input type="radio" name="functionType" checked="" value="0"><span class="input-text">時間最短</span>
        <input type="radio" name="functionType" value="1"><span class="input-text">花費(fèi)最少</span>
        <input type="radio" name="functionType" value="2"><span class="input-text">距離最短</span>
        <input type="radio" name="functionType" value="3"><span class="input-text">實(shí)時路況</span>

        <div class="function-name">輸入地點(diǎn):</div>

        <ul class="input-list">
            <li>
                <div class="nav-text">起</div>
                <input type="text" id="startName" placeholder="請輸入起點(diǎn)" class="input-search" />
            </li>
            <li>
                <div class="nav-text">終</div>
                <input type="text

到了這里，關(guān)于【學(xué)習(xí)記錄】使用高德地圖API開發(fā)一個簡單基礎(chǔ)的WebGIS系統(tǒng)(GIS考研院校專題地圖網(wǎng)站)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！