百度地图之鹰眼轨迹V3之初探

前言

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

我会以AK1AK2 字段标识出来
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

这里写图片描述

附录

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.涉及数据查看的基本上是GET2.涉及到增删改敏感操作的基本上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 包管理
发布了51 篇原创文章 · 获赞 9 · 访问量 16万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览