前言

最近项目中在使用这个，我也才开始接触这个，所有算是一个分享吧，网上V3的资料又少的可怜，我使用的是MAC，所有以mac为平台来记录。其他环境我会给予链接地址，方便传送，废话不多说，开始干

1.环境搭建

1.1 下载原生的demo

传送门中其实步骤很详细了，但是为了方便自己，也方便他人，我就简单不一一介绍直接步骤加命令的方式

传送门

git clone https://github.com/baidu-openmap-trace/web-demo-v3.git

1.2 安装nodejs

其他环境参考传送门

brew install nodejs

1.3安装fis3

fis3资料参考

npm install -g fis3

1.4 安装依赖包

npm install

1.5 前期配置

准备工作：
1.service_id
2.申请2个AK

我会以AK1和AK2 字段标识出来
AK 1作为JSAPI使用，只能放在页面前端，会暴露给系统用户
AK 2作为鹰眼和地址解析使用，最好能够藏在您的服务端，防止泄露。

1.5.1 首页配置

在根目录中打开manager.html文件，24行处加入你的AK1,如下

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的AK1&callback=mapControl.initMap"></script>

1.5.2 fis3编译

根目录下

fis3 release demo
fis3 server start

可以使用

fis3 release demo -wl

这样代码更新保存之后，FIS3会自动编译，并刷新浏览器查看最新效果
如果需要做配置修改,使用以下这个文件

fis-config.js

1.6成功，预览下吧

完成上面后，一般以下地址可以直接出来一张地图了

http://127.0.0.1:8080/manager.html

配置上自己的参数也能看到自己的数据了

http://127.0.0.1:8080/manager.html?service_id='service_id'&ak='AK2'

官方的建议是将参数隐藏在后端所有下面账号配置

1.7账号配置

根目录下，修改以下文件，的所在之处，

script/common/urls.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ewaDIwZ-1607496038545)(https://raw.githubusercontent.com/baidu-openmap-trace/web-demo-v3/master/readmeImages/ak.png)]

附录

1.文档结构

component ———————————- 依赖库，一般不用修改
node_modules ——————————- 依赖库，一般不用修改，需要运行npm install自动安装
script ————————————- 核心逻辑部分

common ———————————— 全局公共方法

commonfun.js —————————– 全局公共方法
mapControl.js —————————- 地图初始化和操作逻辑
urls.js ———————————- 所有鹰眼相关数据请求配置

modules ———————————– 功能模块

common ———————————– 公共模块，包括顶栏等
entitycontrol —————————- 终端管理模块
trackcontrol —————————- 轨迹监控模块

static ————————————- 样式、图片和第三方库
componet.json —————————— fis3 安装包配置文件
fis-conf.js ——————————– fis3编译配置文件
manager.html ——————————- 系统入口HTML文件
package.json ——————————- npm 配置文件
README.md ———————————- 说明文档项目中建议删除
readmeImages ——————————- 说明文档中用到的图片项目指令建议删除

1.修改样式，那么修改./static/css/common.css文件应该就可以满足需求了。
2.内部逻辑进行修改需要修改./script/modules/下对应的路径

modules路径下的三个文件夹中的结构相似。以entitycontrol为例说明，结构为

entitycontrol —————————— 终端管理模块

actions ———————————– reflux actions

entityAction.js ————————– 所有终端管理中的actions列表

stores ———————————— reflux stores

entityStores.js ————————– 终端管理中的数据请求，处理

views ————————————- reflux views

bottomcontrol.js ————————- 数据表下方控件
control.js ——————————- 数据表上方控件
entitycontrol.js ————————- 终端管理总view
entitylist.js —————————- 终端列表
page.js ———————————- 页码控件
remove.js ——————————– 删除控件
search.js ——————————– 检索控件
selectall.js —————————– 全选控件

利用Reflux将entitycontrol模块分为了三部分：views，actions，stores。

2.API接口说明

1.涉及数据查看的基本上是GET，

2.涉及到增删改敏感操作的基本上POST,

3.因为浏览器前端存在跨域的限制，不能直接用AJAX请求数据。所以DEMO对于所有的GET请求都使用了JSONP的方案进行实现。

4.终端管理中的删除终端、编辑自定义字段两个功能，使用的是POST，因此没有进行实现,开发者如果对这两个接口有需求的话，需要自己编写一个和DEMO同域的代理服务，转发DEMO的POST请求到鹰眼Web API服务

5.强烈推荐:将所有的请求（包括GET）都走自己的代理服务器，这样就能将自己的service_id和AK 2隐藏起来了。

3.官方建议需要了解的东西

序号	名称	用途
1	鹰眼Web 服务 API	数据获取
2	百度地图JSAPI	地图展示等
3	百度地图Geocoding API	逆地址解析（经纬度到地址）
4	百度地图MapV	大数据展示
5	百度地图CanvasLayer	轨迹绘制
6	FIS3	编译集成工具，发布管理
7	modJS	代码模块化

使用的一些第三方的东西
|序号|名称|用途|
|:-:|:-:|:-:|
|1|Jquery|DOM操作|
|2|Bootstrap|CSS样式|
|3|Bootstrap-datetimepicker|日期选择插件|
|4|normalize.css|CSS样式初始化|
|5|animate.css|CSS3 动画|
|6|icheck|checkbox 样式|
|7|React|DOM 组织|
|8|RefluxJS|代码组织架构|
|9|babel|ES6代码编译|
|10|npm|包管理|