前言
最近项目中在使用这个,我也才开始接触这个,所有算是一个分享吧,网上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
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|包管理|