# map
**Repository Path**: YDX-2147483647/map
## Basic Information
- **Project Name**: map
- **Description**: 一个校园地图。
校内：https://map.bitnp.net/ 。
旧版：https://capchdo.com/xyc/map 。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev_locate
- **Homepage**: https://map.bitnp.net/
- **GVP Project**: No
## Statistics
- **Stars**: 4
- **Forks**: 0
- **Created**: 2021-07-24
- **Last Updated**: 2023-07-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: BIT, NP
## README
# 地图
[](https://github.com/YDX-2147483647/best-of-bits)
一个校园地图。
> 注：本项目当时编辑了 [OpenStreetMap](https://www.openstreetmap.org/#map=15/39.7311/116.1669)，BIT101 [基于这些数据](https://github.com/flwfdd/BIT101-Android/blob/57e7f486745e4b1478542d92f0d33f16a470cd4e/README.md?plain=1#L110-L118)开发了[地图模块](https://bit101.cn/#/map/)。
## 如何测试此分支
### 本地
> 以下操作全部在VSC中。
准备工作（只有首次需要）：
- 安装[Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)插件。（[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)等也行）
- 切换／签出（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](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools)插件。
>
> 其它浏览器大概删除`launch.json`，再强行F5自动生成一个`launch.json`，然后把`configurations`里的`url`改成`"http://127.0.0.1:3000/map/"`之类的就行。
### 手机
→[Android 设备远程调试入门 - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/remote-debugging/)。
## 参考
- 照片
- [ExifReader](https://github.com/mattiasw/ExifReader)
- [CDN](https://cdn.jsdelivr.net/npm/exifreader/+esm)
- [YAML](https://github.com/eemeli/yaml)
- [文档](https://eemeli.org/yaml/)
- [CDN](https://cdn.jsdelivr.net/npm/yaml@2.0.0-7/browser/index.js)
- 地图
- ~~百度地图 JavaScript API 3.0~~（不好用，版本混乱，文档不够人性化）
- [服务介绍、开发指南等](https://lbsyun.baidu.com/index.php?title=jspopular3.0)
- [类参考](https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html)
- [Leaflet](https://github.com/Leaflet/Leaflet)
> 地图数据使用 Open Street Map，地图图片使用 [Mapbox](https://www.mapbox.com/)。
- [主页](https://leafletjs.com/)
- [CDN](https://www.jsdelivr.com/package/npm/leaflet)
- 插件
- [RotatedMarker](https://github.com/bbecquet/Leaflet.RotatedMarker)（[CDN](https://www.jsdelivr.com/package/npm/leaflet-rotatedmarker)）
- [Locate](https://github.com/domoritz/leaflet-locatecontrol)（[CDN](https://www.jsdelivr.com/package/npm/leaflet.locatecontrol)）
- [leaflet-providers](https://github.com/leaflet-extras/leaflet-providers)（[CDN](https://www.jsdelivr.com/package/npm/leaflet-providers)）
- [leaflet-hash](https://github.com/mlevans/leaflet-hash)（[CDN](https://www.jsdelivr.com/package/npm/leaflet-hash)）
- [BeautifyMarkers](https://github.com/masajid390/BeautifyMarker)（[CDN](https://www.jsdelivr.com/package/npm/beautifymarker)）
- 搜索
- [Algolia](https://www.algolia.com/)
- [InstantSearch.js](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/)
- 压缩图片
- [tinypng](https://tinypng.com/)
## 注意
- EXIF 中的 GPS 朝向有个别是错的（→`tools/photos_exif/index.html`），7月拍的那些照片还是用人工标注的吧。
- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)不能让手机访问，[Five Server](https://marketplace.visualstudio.com/items?itemName=yandeu.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`示例：
```json
{
"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?](https://caniuse.com/mdn-javascript_operators_await_top_level)）
```js
import {get_api_key} from '/utilities/api_keys.js'
let key = await get_api_key('mapbox');
```
若不是 module，暂时用下面这个。
```js
let keys = await (await fetch("/utilities/api_keys.jsonc")).json();
let ak = keys.baidu.key;
```