一 、地图界面

1.1事件展示

显示地图区域中一周之内的公共安全事件，如下图所示，展示了5个事件标注

1.1.1事件详情

点击标注即可查看事件的详细信息，如图所示

1.1.2事件提交

在地图上点击鼠标右键唤出右键菜单，即可在当前位置提交事件,如图所示

事件提交页面如图所示

选择事件类型

选择事件发生时间

填写事件详情和联系方式后，点击提交即可提交事件到审核

1.2定位功能

点击右上方城市列表选择器，选择城市即可转到目标城市

或者点击右下方定位按钮，即可根据IP定位到当前城市

成功定位

1.3搜索功能

（支持地点搜索、行政区域搜索、交通线路搜索）
在左上方的输入框输入关键字后，
点击搜索按钮即可展示目标地点的相关信息
例如

1.3.1.地点搜索

输入忠仑公园，点击右侧蓝色搜索按钮后，出现待选项

选中一项后，会跳转到目标地点，并打上标记

清除输入框后，标记即可自动消失

1.3.2.行政区域搜索

步骤同上，标注如图

1.3.3.交通线路搜索

步骤同上，标注如图

二、抽屉界面

2.1抽屉展示

2.1.1点击地图左侧中部蓝色按钮拉出抽屉

如图所示

界面如下

说明如下

• 面板
  • 地图展示
  • 图表分析：展示当前地图区域中，一周之内的事件图表分析
  • 提交事件：可以提交任意地点的事件到审核
  • 使用指南
  • FAQ
  • 新闻
  • 联系

2.1.2图表分析

展示当前地图区域中，一周之内的事件图表分析
使用堆叠图和南丁格尔图展示，如图所示

2.1.3事件提交

操作同前，地点自选（使用BD09ll坐标系），如图所示

三、API接口说明

3.1接口

3.1.1批量提交事件接口

域名(或ip:8080)/batchImportEvents/{uid}

1).需要申请uid，否则无法批量提交事件,发送邮件到beifeng666@gmail.com申请。
2).提交参数events格式如下：

[
    {
        lng:118,
        lat:24,
        time:2020-05-09 21:13:00,
        eventTypeId:1,
        contact:test@qq.com,
        flag:0,
        details:test
    },
    ...,
    {
        lng:118,
        lat:24,
        time:2020-05-09 21:13:00,
        eventTypeId:1,
        contact:test@qq.com,
        flag:0,
        details:test
    }
]

events对象数组说明：

3.1.2事件获取接口

域名(或ip:8080)/getAllMarker

1).以当前时间为基准，返回之前一周内的事件
2).可选提交参数如下：

tlLng,tlLat,brLng,brLat

参数说明（不提交参数则返回所有事件，提交则返回范围内事件）

3.1.3事件类型获取接口

域名(或ip:8080)/getAllEvent

1).返回所有事件的id和名称

3.1.4图表信息获取接口

域名(或ip:8080)/getChartsInfo

1).以当前时间为基准，返回之前一周内的事件分析信息
2).可选提交参数如下：

tlLng,tlLat,brLng,brLat

参数说明（不提交参数则返回所有，提交则返回范围内）

3.1.5事件提交审核接口

域名(或ip:8080)/submitEvent

1).提交事件到后台审核
2).提交参数如下：

lng,lat,eventType,time,contact,details

参数说明（不提交参数则返回所有，提交则返回范围内）

四、其他

• 基于百度地图API开发: 百度地图API JavaScript API v2.0
• 基于Echarts的图表分析:堆叠图 南丁格尔图
• 基于LayUI开发: LayUI
• 搜索功能参考:朵朵视野-轨迹经纬度拾取系统
• 抽屉栏参考:使用 HTML & CSS 制作左侧滑动导航条
• 接口后台参考:尚硅谷SpringBoot顶尖教程
• 参考百度地图Vue组件化开发:Vue Baidu Map
• 参考Vue.js到前端工程化: webpack打包，以及Vue-cli3和Element-UI的使用

公共事件查询与分析平台使用指南

原文：https://www.cnblogs.com/beifeng5620/p/12860487.html