地图

一个校园地图。

注：本项目当时编辑了 OpenStreetMap，BIT101 基于这些数据开发了地图模块。

如何测试此分支

本地

以下操作全部在VSC中。

准备工作（只有首次需要）：

• 安装Live Preview插件。（Live Server等也行）

• 切换／签出（checkout）到dev_locate分支。

  如何切换：搜索命令（F1）“签出”，或者单击任何显示了分支名字的地方（左下角状态栏、“源代码管理-源代码管理存储库”）。

  没有dev_locate或origin/dev_locate：抓取（fetch）。（搜索命令（F1）或“源代码管理-源代码管理存储库-‘…’-‘拉取，推送’-抓取”）

测试：

1. 打开/tools/photos_exif/index.html或/map/index.html。

   /locate_test/index.html是最开始用百度的做的，后来不再维护。

2. Live Preview: Show Preview（二选一）：

   • 单击整个窗口右上角的按钮“Live Preview: Show Preview”（悬停鼠标有提示）。
   • 搜索命令“Live Preview: Show Preview”。（“Internal Browser”和“External Browser”都行）。

   我一般先用第一种方法，然后修改地址到http://127.0.0.1:3000/，再用[Microsoft Edge Tools](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools)插件“Launch Instance”，然后手动访问http://127.0.0.1:3000/…。

另法：直接按F5。

这还需要Microsoft Edge Tools插件。

其它浏览器大概删除launch.json，再强行F5自动生成一个launch.json，然后把configurations里的url改成"http://127.0.0.1:3000/map/"之类的就行。

手机

→Android 设备远程调试入门 - Microsoft Edge Development | Microsoft Docs。

参考

• 照片
  • ExifReader
    • CDN
  • YAML
    • 文档
    • CDN
• 地图

  • 百度地图 JavaScript API 3.0（不好用，版本混乱，文档不够人性化）

    • 服务介绍、开发指南等
    • 类参考

  • Leaflet

    地图数据使用 Open Street Map，地图图片使用 Mapbox。

    • 主页
    • CDN
    • 插件
      • RotatedMarker（CDN）
      • Locate（CDN）
      • leaflet-providers（CDN）
      • leaflet-hash（CDN）
      • BeautifyMarkers（CDN）
• 搜索
  • Algolia
    • InstantSearch.js
• 压缩图片
  • tinypng

注意

• EXIF 中的 GPS 朝向有个别是错的（→tools/photos_exif/index.html），7月拍的那些照片还是用人工标注的吧。
• Live Preview不能让手机访问，Five Server可以。（通过IP地址）

direct.yml及glimpse.yml规范

朝向

这里朝向有两种标准：

• clock：以北为上置钟表于地面，0:00—6:00—12:00（顺时针）对应 0°—180°—360°。
• polar：以向东为极轴（0°），向北为 90°，范围 -180°—180°。

Leaflet 和 EXIF 都采用 clock。

可使用utilities/basic_converter.js的convert_direction()转换。

direct.yml

可按以下方法获取文件名列表。

使用资源管理器打开/data/photo/original/south，在地址栏（Alt+D）输入cmd，然后在控制台输入tree /f。

• 由人工标注。
• 文件名：direct-${文件夹名}.yml，位置：原图片相应文件夹内。例：data/photo/original/south/direct-south.yml。
• img：文件名（含扩展名）。若文件名形如 IMG_2333.jpg，则可简写为照片编号，如 2333。
• location：地点简单描述，会用作照片标题。有多个请用列表。
• direction：朝向（polar）。
• comment（可无）：提示，例如某个门平常不开。会显示出来。
• note（可无）：备忘，记录遗留问题，例如方向不确定。不会对外显示。
• latitude、longitude（可无）：经纬度。一般在照片里有，偏离太多时需要手动标注。

glimpse.yml

• 由程序从direct.yml生成。（→utilities/glimpse_yaml.js）
• 文件名类似，但位置为根目录。例：data/photo/glimpse-south.yml。
• 继承direct.yml的所有信息。
• direction：改为 clock。
• latitude、longitude：若direct.yml中没有，则从照片的 EXIF 获取。
• names：内容同location，但保证为Array（即使只有一个）。

API 密钥相关示例

api_keys.jsonc示例：

{
    "baidu": {
        "key": "Lorem Ipsum",
        "description": "百度地图 JavaScript API",
        "link": "https://lbsyun.baidu.com/apiconsole/key#/home"
    },
    "mapbox": {
        "key": "The quick brown fox jumps over the lazy dog",
        "description": "Default public access token",
        "link": "https://account.mapbox.com/"
    }
}

使用示例：

注意，在 JavaScript 模块最外层使用await可能在手机上不兼容，毕竟这是 2021 年才有的特性。（→Can I use?）

import {get_api_key} from '/utilities/api_keys.js'

let key = await get_api_key('mapbox');

若不是 module，暂时用下面这个。

let keys = await (await fetch("/utilities/api_keys.jsonc")).json();
let ak = keys.baidu.key;