热力图文档说明

百度地图api 可视化

1. 项目需求：

• 根据城市、时间粒度等指标显示某一个区域在某一段时间的热力图
• 用户点击右上方的绘图键进行围栏划定。其中
  
  • 左键点击后弹窗(可拖动)显示指标值及echarts图。
  • 右键有菜单项，根据围栏的状态（保存/未保存）显示不同的菜单项[保存：删除/编辑，未保存：保存/删除]

2. 原型

关系人：@曹巧艳

axure原型请找巧艳姐要，两个版本：

• 一个是控件在地图外的（现在做的版本）
• 一个是内置的。

示意图如下

版本一

版本二

3. 数据接口定义

关系人：@王中强

传送门：

注意事项：

• jsonp的问题：
  因为服务器那边的域名不在bigdata下面，而项目中仍然保留对bigdata的一些接口的调用，会遇到跨域的问题。暂时用的jsonp处理，不过只是权宜之计...因为在围栏的增删改查中 增删改是需要用到post请求的，jsonp的默认get.要解决这个问题是需要后端多封一层转调接口进行处理的...这部分搁置，因此所有的接口都用的get请求= =。

• 天气接口
  在echarts的图上每个legend旁边其实还有天气数据，但是暂时接口还没有定好，所以保留。具体的渲染方面是 天气和echarts数据分开渲染还是一起成功后再渲染（promise/维持一个allReceived变量）自行添加~

• 城市接口
  原先用的get_auth_city在获取全国数据时没有返回大区数据（parent_name）。使得cityList初始化有点问题。

4. 前端部分

框架：

项目结构
    |application
        |views
            |hotmap
                |chaoxi.php 
    |static
        |hotmap

其中：

js文件夹中components是一些封装的模块：

• chartRelated.js <=> detailChart 是点击后的弹出层
• formRelated.js <=> heatForm 表单相关
• polygonServerRelated.js <=> serverPolygon 围栏的增删改查的ajax相关

注意事项：

1. require部分。

本代码是在之前的fe的hotmap基础上更改添加的，ta用了百度的fis的mod.js（同时也是旧的版本），需要说明的是，与我们通常对require的认知有如下几个不同:

• require需要自行添加script标签，它只是在全局维护一个变量，存放各个pathname以及src链接，来新的则更新，保证全局唯一。因此请不要惊讶require的同时为什么还有很多script标签=.=

• require.async会添加模块，但don't know为什么会报错

• 因此折中操作是往里面加入了require.ensure函数，异步加载模块

resourceMap类比于require.js里面的require.config

1. 弹出层
   本来是想作为overlay添加到百度地图上的，但是vue数据绑定貌似不识别，就回滚了，变成了普通的div插入。

3.bug
二次点击查询下面的围栏无法点击和右键
以及今天是8月9日..测试系统已挂，更改了部分代码，如果有问题，请回滚到8月8日的最近一次代码。