【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)

0. 前言

本人只是一个普普通通的 GIS 学生, 下面是记录我的写的一个作业 demo 的内容, 可能会存在一定的错误, 欢迎在评论区\私信交流!

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

*感兴趣可以下载完整 demo 看看 (阿里云盘)

1. 功能设计

本网站（GIS考研院校可视化专题网站）为2022年GIS考研初期准备择校的学生服务，提出以下三个主要功能的设计：

（1）基本功能：如放大、缩小地图、地图图层切换管理功能、地图测量、几何绘图，提供用户基本的地图操作工具，便于用户浏览网站地图内容;

（2）专题数据功能：提供用户提供点击地图交互，可以得到不同院校点的招生信息、招生人数热力图，帮助用户了解自己心怡的考研院校在该省份的竞争能力;

（3）POI检索, 导航规划：通过高德 API 提供用户检索地点以及进行路线规划导航功能，通过用户基本地图浏览功能。(这个功能是老师布置作业要求必须有的).

(上面这个图用ProcessOn 一个在线绘图网站画的, 可能会设计得不规范.)

2. 数据处理

通过对研招网进行Python爬虫采集 GIS 考研院校信息数据, 再结合高德地图开放地理编码 API, 以及开源的火星坐标系与 WGS84 坐标系转换 API 形成经纬度坐标数据. 然后通过 QGIS 进行地理数据生成与综合处理形成 GeoJson 文件.

(爬虫方法用的最简单的 request. 由于是一年前大三的时候写作业做的数据, 已经找不到我当时写的代码了.)

总计有以下两个数据内容：

（1）University(.geojson): 我国2022年GIS硕士招生院校点状地理数据;

（2）Details(.geojson): 各个招生院校的不同专业、方向的招生详情文本属性数据.

数据内容存在一点小问题：

① 没有将除了各大高校之外的研究院纳入爬虫范围, 以及没有保存研招网的原网址, 使得后面信息展示时不能实现跳转对应网页的功能;

② 这个数据是很久之前做另一份作业的, 把高德坐标转成了 WGS84, 但是这个网站用的高德地图 API, 所以应该要转回来, 否则加载的数据是存在很大偏移的 (偷懒就没有转了);

③ 由于不会处理 js 引入数据产生的跨域报错问题，所以 json 数据直接用 js 文件的两个变量引入.)

(写到后面发现能使用服务器打开的方式解决数据跨域问题, 如安装一个 Live Server 插件.)

3. 项目结构

(功能很简单, 所以使用原生 JS, 没有用框架来写.)

(1) index.html 项目入口 (页面结构)

主要页面结构:

① 一个放置地图的标签(div 容器)

② 侧边工具栏按钮, 信息卡片(div 容器\ radio 选择框\ input 输入框)

③ 导航信息框 (div 容器, 内容由 API 模板自动填入)

④ POI 搜索框以及搜索\关闭按钮(div 容器)

⑤ POI 搜索结果信息框 (div 容器, 内容由 API 模板自动填入)

页面结构如下图:

<!-- 地图容器 -->
<div id="container"></div>
<!-- 标题栏 -->
<h3 id="title">GIS考研院校可视化专题网站</h3>
<!-- 侧边栏按钮 -->
<div class="sidebar">
    <div class="tools-button" id="navigationTools_button" title="路线规划导航"></div>
    <div class="tools-button" id="drawTools_button" title="绘图工具"></div>
    <div class="tools-button" id="measureTools_button" title="测量工具"></div>
</div>
<!-- 功能卡片 -->
<div class="input-card">
    <!-- 测量工具相关 -->
    <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="关闭" />
    </div>
    <!-- 几何绘制工具相关 -->
    <div class="input-item drawTools">
        <div class="function-name">选择绘图方式:</div>
        <input type="radio" name="mouseTools" value="marker"><span class="input-text">点</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="结束绘制" />
    </div>
    <!-- 导航工具相关 -->
    <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">花费最少</span>
        <input type="radio" name="functionType" value="2"><span class="input-text">距离最短</span>
        <input type="radio" name="functionType" value="3"><span class="input-text">实时路况</span>

        <div class="function-name">输入地点:</div>

        <ul class="input-list">
            <li>
                <div class="nav-text">起</div>
                <input type="text" id="startName" placeholder="请输入起点" class="input-search" />
            </li>
            <li>
                <div class="nav-text">终</div>
                <input type="text" id="endName" placeholder="请输入终点" class="input-search" />