开发交通罚款平台时所获之技术要诀

初观之，欲构平台以御车察途，似易事也：

鏡頭光點
鉴定信息
位置数据
遥知信息
用户速达

然及于技之端，则数据之量与信息之变，较吾所思者尤繁。

尤以定位之术，性能之调适，与移动物理之动静相合，则渺渺之构，忽入别境矣。

今之文，将吾所遇于交通之制，摄像之点，及实时数据之要务，悉以陈之。

*1. 位之数，较吾所期，更为变通。

初时，吾思数据若简列。

[
 {
   "city":"İstanbul",
   "location":"E-5",
   "camera":"Aktif"
 }
]

然时移世易，数据日增：

新检点之要旨
迁徙之地
暂定之检。
诸般相机之别
基于 YOLO 的更新

靜態數據模型頗為短暫，已難應付。

後乃分數據為結構之域：

{
"id":124,
"city":"İstanbul",
"lat":41.0082,
"lng":28.9784,
"type":"mobese",
"status":"active"
}

此構之利，在濾析與效能，實有顯著之助益。

*2. 地圖對頁面效能之影響，逾乎所期。
*
初版尝欲一同步载诸摄像节点。

其理甚简：

locations.forEach(location=>{

new Marker(location);

});

初时运转无碍。

然数据渐增：

内存耗用剧增
首载时日绵长
携行器频滞
地圖延遲現象

始顯。

繼之，唯載顯現域之數據：

const visibleLocations =
allLocations.filter(item=>{

return mapBounds.contains(item);

});

不處理使用者未見數據，得嚴重性能之增益。

*3. 手機使用者之壓力超乎預期
*
交游之內，多為行動者所訪。

故而，案牀之上所思所創，於移動之間，未盡所期。

茲以為例：

重圖
高維之像
大之JavaScript包
不必要之動畫

皆增首載之時。

优化基础：

<img
loading="lazy"
src="kamera.jpg"
alt="trafik kamera noktası">

虽形微，然减负甚巨。

*四、多DOM元素潜藏之患
*
一城之中，或立数百镜头，或设若干节点。

初法：

<div class="camera">
Kamera Noktası
</div>

<div class="camera">
Kamera Noktası
</div>

<div class="camera">
Kamera Noktası
</div>

验证后DOM始生

继而唯造所需之件

const visibleItems=
items.slice(start,end);

此法尤于移机更得流畅之境

*五、于SEO之道，位置之数据，需别法而治之
*
地缘之项目，用户之意趣多变。

例：

交通摄像头

唯

"邻街交通监理"

异乎其索求之态也。

故曰：

意蕴深长之URL结构
城邦为基之内容架构
結構化數據之應用
迅捷之载入时

安然无恙。

例：

<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Place",
"name":"Trafik Denetim Noktası"
}
</script>

结构之数据虽微，然能向搜索引擎传递更明之讯息。

*六、简则优效
*
吾尝思，添益更多之特性，可增进用户体验。

生息之表
動畫也
繁复之滤网
詳盡之面板

然多用户惟求速知。

其后素构之效更佳：

JavaScript益减
DOM益减
网负益轻
启速益迅

尤显于行器之域.

其果

虽初观似为数据罗列，然规摹既广，异患自生：

表演
地圖管理
位置數據
移動優化
SEO

看似微小的系統，有時所需的優化遠超所想

*所使用的資源：
*
• OpenStreetMap 文檔：https://wiki.openstreetmap.org/wiki/Main_Page
• Leaflet 文档：https://leafletjs.com/reference.html
• 示例工作：交通罚单
• Schema.org — 地点：https://schema.org/Place

推薦訂閱源

DEV Community