【学习记录】使用高德地图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" />