本项目基于 vue-admin-template 和 AILabel 设计,可以标注车道线,区域等各种交通区域设施,用于配置智慧交通检测事件,设置车道的方向和区域的检测事件,应用于智慧交通融合感知系统。
# 克隆项目
# github
git clone https://github.com/fuyi501/ailabel-me.git
# gitee
git clone https://gitee.com/fuwenwei501/ailabel-me.git
# 进入项目目录
cd ailabel-me
# 安装依赖
npm install
# 启动项目
npm run serve
# 编译项目
npm run build
- 矩形标注
- 多边形标注
- 车道线设置
- 区域设置
- 交通异常事件配置
- 道路设置
- 监控设置
GitHub Pages 部署请看:https://cli.vuejs.org/zh/guide/deployment.html#github-pages
部署的时候需要注意 publicPath
的配置:
publicPath: process.env.NODE_ENV === 'production' ? '/ailabel-me/' : '/',
// publicPath: '/',
运行 sh deploy.sh
进行部署
1、安装 Docker
2、编译项目文件
npm run build
3、使用 nginx 镜像构建 vue 应用镜像
docker pull nginx
4、创建 nginx 配置文件
在项目根目录下创建 nginx
文件夹,该文件夹下新建文件 default.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
该配置文件定义了首页的指向为 /usr/share/nginx/html/index.html
, 所以我们可以一会把构建出来的 index.html 文件和相关的静态资源放到 /usr/share/nginx/html
目录下。
5、创建 Dockerfile 文件
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
6、基于该 Dockerfile 构建应用镜像
# 注意不要少了最后的 “.”
# -t 是给镜像命名 . 是基于当前目录的 Dockerfile 来构建镜像
docker build -t ailabel-me .
7、运行应用镜像
docker run -d -p 8088:80 --name=ailabel-me ailabel-me
本项目基于 AILabel 设计,AILabel
类库是一款集打点、线段、多段线、矩形、多边形、圆圈、涂抹等多标注形式于一体,附加文本(Text)、标记(Marker)、缩略图(EagleMap)、Scale(比例尺)等控件以及 Util 等辅助工具的在线 Web 端标注工具库。
Modern browsers and Internet Explorer 10+.
IE / Edge |
Firefox |
Chrome |
Safari |
---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |