six-vehicle
/
cloud-ui
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat():电子围栏CRUD，高德地图

dev.vehicles
LQS 2024-09-21 10:01:02 +08:00
parent 563db92056
commit 56d0e1255b
14 changed files with 2239 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"url": "https://gitee.com/y_project/MuYu-Cloud.git" "url": "https://gitee.com/y_project/MuYu-Cloud.git"
}, },
"dependencies": { "dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"axios": "0.24.0", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",

1
src/api/manage/fenceAPI.js 100644
View File

@ -0,0 +1 @@

1
src/api/school/info.js 100644
View File

@ -0,0 +1 @@

0
src/api/totalEquipment/totalEquipmentRequest.js 100644
View File

85
src/api/vehicle/fence.js 100644
View File

@ -0,0 +1,85 @@
import request from '@/utils/request'
// 查询电子围栏列表
export function listFence(data) {
return request({
url: '/vehicles/sysCorpuscleFence/list',
method: 'POST',
data: data
})
}
/**
* 导出
* @param response 请求响应
* @param etlDictionaries 导出数据信息
*/
export function selectSourceExport(data){
return request({
url: "/vehicles/sysCorpuscleFence/export",
method: "POST",
data: data
})
}
/**
* 根据电子围栏表ID查询数据源信息
* @param etlSysCorpuscleFenceId 请求对象
* @return 返回结果
*/
export function getFence(id) {
return request({
url: '/vehicles/sysCorpuscleFence/' + id,
method: 'GET'
})
}
/**
* 新增（添加）电子围栏
* @param sysCorpuscleFenceAddReq 请求对象
* @return 返回结果
*/
export function addFence(data) {
return request({
url: '/vehicles/sysCorpuscleFence/addSysCorpuscleFence',
method: 'POST',
data: data
})
}
/**
* 修改电子围栏
* @param sysCorpuscleFence 请求对象
* @return 返回结果
*/
export function updateFence(data) {
return request({
url: '/vehicles/sysCorpuscleFence/updSysCorpuscleFence',
method: 'POST',
data: data
})
}
/**
* 电子围栏表信息表删除
* @param etlSysCorpuscleFenceId 请求对象
* @return 返回结果
*/
export function delFence(id) {
return request({
url: '/vehicles/sysCorpuscleFence/' + id,
method: 'DELETE'
})
}
export function getFencePath(id){
return request({
url: '/vehicles/sysCorpuscleFence/' + id,
method: 'GET'
})
}
export function saveFencePath(data){
return request({
url: '/vehicles/sysCorpuscleFence/updSysCorpuscleFence',
method: 'POST',
data: data
})
}

73
src/api/vehicle/info.js 100644
View File

@ -0,0 +1,73 @@
import request from '@/utils/request'
// 查询车辆信息列表
export function listInfo(query) {
return request({
url: '/vehicle/info/list',
method: 'get',
params: query
})
}
// 查询车辆信息详细
export function getInfo(id) {
return request({
url: '/vehicle/info/' + id,
method: 'get'
})
}
// 新增车辆信息
export function addInfo(data) {
return request({
url: '/vehicle/info',
method: 'post',
data: data
})
}
// 修改车辆信息
export function updateInfo(data) {
return request({
url: '/vehicle/info',
method: 'put',
data: data
})
}
// 删除车辆信息
export function delInfo(id) {
return request({
url: '/vehicle/info/' + id,
method: 'delete'
})
}
export function realTimeLocus(vin){
return request({
url: '/vehicle/info/realTimeLocus/' + vin,
method: 'get'
})
}
export function realTimeLocusDel(vin){
return request({
url: '/vehicle/info/realTimeLocus/' + vin,
method: 'delete'
})
}
export function getVehicleDataByVin(vin){
return request({
url: '/vehicle/info/data/' + vin,
method: 'get'
})
}
export function getVehicleIndexData(){
return request({
url: '/vehicle/info/indexData/',
method: 'get'
})
}

70
src/api/vehicle/move.js 100644
View File

@ -0,0 +1,70 @@
import request from '@/utils/request'
// 查询车辆运行记录列表
export function listMove(query) {
return request({
url: '/vehicle/move/list',
method: 'get',
params: query
})
}
// 查询车辆运行记录详细
export function getMove(id) {
return request({
url: '/vehicle/move/' + id,
method: 'get'
})
}
// 新增车辆运行记录
export function addMove(data) {
return request({
url: '/vehicle/move',
method: 'post',
data: data
})
}
// 修改车辆运行记录
export function updateMove(data) {
return request({
url: '/vehicle/move',
method: 'put',
data: data
})
}
// 删除车辆运行记录
export function delMove(id) {
return request({
url: '/vehicle/move/' + id,
method: 'delete'
})
}
// 准备开始历史数据
export function historyMoveStart(vin,startTime, endTime) {
return request({
url: '/vehicle/move/historyMove/' + vin + "/" + startTime + "/" + endTime,
method: 'get'
})
}
// 查看结束历史数据
export function historyMoveDel(vin) {
return request({
url: '/vehicle/move/historyMove/' + vin,
method: 'DELETE'
})
}
// 历史数据
export function historyMove(vin) {
return request({
url: '/vehicle/move/history/' + vin,
method: 'get'
})
}

248
src/views/fence/AMAP/Test.vue 100644
View File

@ -0,0 +1,248 @@
<!--<template>-->
<!-- <div class="app-container">-->
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="180px">-->
<!-- <el-form-item label="电子围栏" prop="electronicFence">-->
<!-- <el-input type="textarea" rows="5" v-model="form.electronicFence" placeholder="请输入电子围栏" style="width:80%"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <div class="input-card">-->
<!-- <div class="search_box">-->
<!-- <div class="label">关键字搜索</div>-->
<!-- <el-input v-model="input" placeholder="请输入内容" id="tipinput" style="width:30%;padding-right: 10px;"></el-input>-->
<!-- <el-button @click="createPolygon()">新建</el-button>-->
<!-- <el-button @click="polygonClose()">保存</el-button>-->
<!-- <el-button @click="polygonRemove()">清除</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <div id="container"></div>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer" style="text-align: center;">-->
<!-- <el-button type="primary" @click="submitForm">-->
<!-- <span v-if="schoolId==0">保 存</span>-->
<!-- <span v-if="schoolId!=0">修 改</span>-->
<!-- </el-button>-->
<!-- <el-button @click="cancel">取 消</el-button>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import { getSchool, addSchool, updateSchool } from "@/api/school/info";-->
<!--import AMapLoader from "@amap/amap-jsapi-loader";-->
<!--window._AMapSecurityConfig = {-->
<!-- securityJsCode: "defb21facca687bad1bb8e956b7d67dd",//高德申请的key的秘钥-->
<!--};-->
<!--var polyEditor = "";-->
<!--export default {-->
<!-- name: "AreaMap",-->
<!-- data() {-->
<!-- return {-->
<!-- schoolId: '',-->
<!-- // 表单参数-->
<!-- form: {},-->
<!-- // 表单校验-->
<!-- rules: {-->
<!-- electronicFence: [-->
<!-- { required: true, message: "电子围栏不能为空", trigger: "blur" }-->
<!-- ],-->
<!-- },-->
<!-- //高德地图-->
<!-- map: null,-->
<!-- coordList: "",-->
<!-- timer: "",-->
<!-- pathList: [],-->
<!-- //地图自动搜索-->
<!-- input: "",-->
<!-- auto: null,-->
<!-- placeSearch: null,-->
<!-- };-->
<!-- },-->
<!-- created() {-->
<!-- this.reset();-->
<!-- },-->
<!-- mounted() {-->
<!-- this.schoolId = this.$route.params && this.$route.params.schoolId;-->
<!-- this.echart();-->
<!-- if (this.schoolId != 0) {-->
<!-- this.handleUpdate(this.schoolId);-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- // 表单重置-->
<!-- cancel() {-->
<!-- this.reset()-->
<!-- const obj = { path: '/school/info' }-->
<!-- this.$tab.closeOpenPage(obj)-->
<!-- },-->
<!-- // 取消按钮-->
<!-- createPolygon() {-->
<!-- polyEditor.close()-->
<!-- this.map.clearMap()-->
<!-- polyEditor.setTarget()-->
<!-- polyEditor.open()-->
<!-- this.form.electronicFence = ''-->
<!-- },-->
<!-- async echart() {-->
<!-- await AMapLoader.load({-->
<!-- key: 'b49d576d2d71cd28f188e6e792f122c3',-->
<!-- version: '2.0',-->
<!-- plugins: [-->
<!-- 'AMap.ToolBar',-->
<!-- 'AMap.Driving',-->
<!-- 'AMap.PolygonEditor',-->
<!-- 'AMap.PlaceSearch',-->
<!-- 'AMap.AutoComplete'-->
<!-- ]-->
<!-- }).then((AMap) => {-->
<!-- this.map = new AMap.Map('container', {-->
<!-- viewMode: '3D',-->
<!-- zoom: 10,-->
<!-- center: [116.471354, 39.994257]//[113.666494,34.752186],-->
<!-- })-->
<!-- this.map.setFitView()-->
<!-- // 关键字查询-->
<!-- this.searchMap()-->
<!-- }).catch((e) => {-->
<!-- console.log('高德地图初始化错误：', e)-->
<!-- })-->
<!-- //添加时初始化，修改不需要-->
<!-- if (this.schoolId == 0) {-->
<!-- this.initPolygon()-->
<!-- }-->
<!-- },-->
<!-- /** 修改按钮操作 */-->
<!-- handleUpdate(schoolId) {-->
<!-- this.reset()-->
<!-- const id = schoolId-->
<!-- getSchool(id).then(response => {-->
<!-- this.form = response.data-->
<!-- this.pathList = response.data.electronicFence-->
<!-- this.initPolygon()-->
<!-- let path = JSON.parse(this.pathList)-->
<!-- if (path.length > 0) {-->
<!-- this.map.setCenter(path[0])-->
<!-- this.map.setZoom(13)-->
<!-- }-->
<!-- })-->
<!-- },-->
<!-- //加载高德地图-->
<!-- initPolygon() {-->
<!-- var path = []-->
<!-- if (this.schoolId != 0) {-->
<!-- path = JSON.parse(this.pathList)-->
<!-- var polygon = new AMap.Polygon({-->
<!-- path: path-->
<!-- })-->
<!-- this.map.add([polygon])-->
<!-- polygon.on('dblclick', () => {-->
<!-- polyEditor.setTarget(polygon)-->
<!-- polyEditor.open()-->
<!-- })-->
<!-- }-->
<!-- //创建覆盖物-->
<!-- polyEditor = new AMap.PolygonEditor(this.map)-->
<!-- polyEditor.on('add', (data) => {-->
<!-- var polygon = data.target-->
<!-- polygon.on('dblclick', () => {-->
<!-- polyEditor.setTarget(polygon)-->
<!-- polyEditor.open()-->
<!-- })-->
<!-- })-->
<!-- },-->
<!-- // 关键字查询-->
<!-- polygonClose() {-->
<!-- let that = this-->
<!-- polyEditor.on('end', function(event) {-->
<!-- let coordList = event.target.getPath()-->
<!-- let mapList = []-->
<!-- coordList.forEach((v) => {-->
<!-- mapList.push([v.lng, v.lat])-->
<!-- })-->
<!-- that.form.electronicFence = JSON.stringify(mapList)-->
<!-- })-->
<!-- polyEditor.close()-->
<!-- },-->
<!-- //选中查询出的记录-->
<!-- polygonRemove() {-->
<!-- polyEditor.close()-->
<!-- this.map.clearMap()-->
<!-- this.form.electronicFence = ''-->
<!-- },-->
<!-- //高德地图编辑器初始化-->
<!-- reset() {-->
<!-- this.form = {-->
<!-- id: null,-->
<!-- electronicFence: null-->
<!-- }-->
<!-- this.resetForm('form')-->
<!-- },-->
<!-- //高德地图新建多边形-->
<!-- searchMap() {-->
<!-- // 搜索框自动完成类-->
<!-- this.auto = new AMap.AutoComplete({-->
<!-- input: 'tipinput' // 使用联想输入的input的id-->
<!-- })-->
<!-- //构造地点查询类-->
<!-- this.placeSearch = new AMap.PlaceSearch({-->
<!-- map: this.map-->
<!-- })-->
<!-- // 当选中某条搜索记录时触发-->
<!-- this.auto.on('select', this.selectSite)-->
<!-- },-->
<!-- //高德地图多边形结束,获取经纬度集合-->
<!-- selectSite(e) {-->
<!-- if (e.poi.location) {-->
<!-- this.placeSearch.setCity(e.poi.adcode)-->
<!-- this.placeSearch.search(e.poi.name) //关键字查询-->
<!-- } else {-->
<!-- this.$message.error('查询地址失败，请重新输入地址')-->
<!-- }-->
<!-- },-->
<!-- //高德地图清除所有标记-->
<!-- /** 提交按钮 */-->
<!-- submitForm: function() {-->
<!-- this.$refs['form'].validate(valid => {-->
<!-- if (valid) {-->
<!-- if (this.form.id != null) {-->
<!-- updateSchool(this.form).then(response => {-->
<!-- this.$modal.msgSuccess('修改成功')-->
<!-- })-->
<!-- } else {-->
<!-- addSchool(this.form).then(response => {-->
<!-- this.$modal.msgSuccess('新增成功')-->
<!-- })-->
<!-- }-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- },-->
<!--};-->
<!--</script>-->
<!--<style lang="scss" scoped>-->
<!--#container {-->
<!-- width: 80%;-->
<!-- height: 400px;-->
<!--}-->
<!--.input-card {-->
<!-- bottom: 15px;-->
<!-- right: 15px;-->
<!--}-->
<!--.search_box {-->
<!-- display: flex;-->
<!-- justify-content: flex-start;-->
<!-- align-items: center;-->
<!-- height: 50px;-->
<!-- .label {-->
<!-- color: #000;-->
<!-- width: 100px;-->
<!-- }-->
<!--}-->
<!--</style>-->

168
src/views/fence/AMAP/index.vue 100644
View File

@ -0,0 +1,168 @@
<template>
<div>
<el-button @click="initFaultDraw">初始化</el-button>
<el-button @click="clearPolygon">重新画</el-button>
<el-button @click="openPolyEditor">打开画笔</el-button>
<!-- <router-link :to="{path:'fences'}">ghghghgh </router-link>-->
<el-button @click="closePolyEditor">保存围栏</el-button>
<div id="container"></div>
</div>
</template>
<script>
import log from '@/views/monitor/job/log.vue'
var mapGaoDe = null , polygon , polyEditor , id;
import { getFencePath, listFence, saveFencePath } from '@/api/vehicle/fence'
import fences from '@/views/fence/fences/index.vue'
export default {
computed: {
fences() {
return fences
}
},
props:{
id:String
},
data:function() {
return {
map: true
};
},
created:function() {
// 加载高德地图库
var webapi = document.createElement("script");
webapi.src = `https://webapi.amap.com/maps?v=2.0&key=defb21facca687bad1bb8e956b7d67dd&plugin=AMap.PolygonEditor&callback=onLoad`;
// 将api文件引入到页面中，加载完毕以后就会回调函数 onLoad
document.head.appendChild(webapi);
var jsapi_demos = document.createElement("script");
jsapi_demos.src = `https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js`;
document.head.appendChild(jsapi_demos);
},
mounted() {
// 页面挂载完毕，开始异步引入高德地图
// 创建了一个回调函数，高德地图加载完毕后会调用
window.onLoad = function() {
// 所有关于地图的逻辑全部都在这个回调里面，
// 保证高德地图加载完毕
mapGaoDe = new AMap.Map("container", {
center: [116.400274, 39.905812],
zoom: 14,
viewMode: '3D',
});
// mapGaoDe = new AMap.Map("container", {
// mapStyle: "amap://styles/normal", //设置地图的显示样式
// });
// 缩放地图到合适的视野级别
mapGaoDe.setFitView()
}
id = this.id;
},
methods: {
initFaultDraw(){
var path = [];
// [
// [116.403322, 39.920255],
// [116.410703, 39.897555],
// [116.402292, 39.892353],
// [116.389846, 39.891365]
// ];
// getFencePath(this.id).then(response => {
// console.log("初始化："+response.data)
// if (response.data != undefined && response.data != null && response.data != ''){
// // path = JSON.parse(response.data);
// if (path.length > 0){
// mapGaoDe.setCenter([path[0][0],path[0][1]])
// this.initPolyGon(path);
// }else {
// log.info("请先绘制坐标点");
// }
// }
// })
getFencePath(this.id).then(response => {
console.log("初始化："+response.data);
if (response.data && response.data.length > 0) {
mapGaoDe.setCenter([response.data[0][0], response.data[0][1]]);
this.initPolyGon(response.data);
} else {
alert("请先绘制坐标点");
}
}).catch(error => {
console.error("获取围栏路径失败:", error);
alert("获取围栏路径失败");
});
},
openPolyEditor: function() {
if ( polyEditor == null){
polyEditor = new AMap.PolygonEditor(mapGaoDe, polygon)
}
polyEditor.open()
polyEditor.on('addnode', function(event) {
console.log('触发事件：addnode')
})
polyEditor.on('adjust', function(event) {
alert('触发事件：adjust')
})
polyEditor.on('removenode', function(event) {
alert('触发事件：removenode')
})
polyEditor.on('end', this.polyEditorEnd)
},
closePolyEditor(){
polyEditor.close();
},
initPolyGon(path){
polygon = new AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
bubble: true,
})
mapGaoDe.add([polygon])
},
clearPolygon(){
var polyArr = mapGaoDe.getAllOverlays('polygon')
mapGaoDe.remove(polyArr);
var polyeditorArr = mapGaoDe.getAllOverlays('polyeditor')
mapGaoDe.remove(polyeditorArr);
},
polyEditorEnd(event){
var polyEditorPath = [];
var path = event.target.getPath();
for (var i in path){
polyEditorPath.push([parseFloat(path[i]['lng']) , parseFloat(path[i]['lat'])])
}
console.log("坐标："+JSON.stringify(polyEditorPath))
saveFencePath({"id":id,"fencePosition":JSON.stringify(polyEditorPath)})
this.$modal.msgSuccess("绘制成功");
mapGaoDe = null , polygon = null , polyEditor = null , id = null;
this.$emit("handleClose");
// this.$router.go(0)
this.getList()
}
}
}
</script>
<style scoped lang="scss">
@import "https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css";
#container {
width: 100%;
height: 91vh;
}
</style>

389
src/views/fence/fences/index.vue 100644
View File

@ -0,0 +1,389 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="围栏名称" prop="fenceName">
<el-input
v-model="queryParams.fenceName"
placeholder="请输入围栏名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="围栏类型" prop="fenceType">
<el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
<el-option
v-for="dict in fenceAlarmTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="围栏状态" prop="state">
<el-select v-model="queryParams.state" placeholder="请选择围栏状态" clearable size="small">
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['vehicles:sysCorpuscleFence:addSysCorpuscleFence']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['vehicles:sysCorpuscleFence:updSysCorpuscleFence']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['vehicles:sysCorpuscleFence:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- :formatter="statusFormat"-->
<!-- :formatter="fenceAlarmTypeFormat"-->
<el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="围栏名称" align="center" prop="fenceName" />
<el-table-column label="围栏类型" align="center" prop="fenceType" >
<template slot-scope="scope">
<dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
</template>
</el-table-column>
<el-table-column label="围栏状态" align="state" prop="state">
<template slot-scope="scope">
<dict-tag :options="dict.type.yes_no" :value="scope.row.state"/>
</template>
</el-table-column>
<el-table-column label="围栏位置" align="center" prop="fencePosition" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
type="warning"
class="el-icon-view"
@click="lookFence(scope.row)"></el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="showFaultDraw(scope.row)"
>绘制围栏</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['vehicle:fence:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['vehicle:fence:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改电子围栏对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-input v-show="false" v-model="form.id" />
<el-form-item label="围栏名称" prop="fenceName">
<el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
</el-form-item>
<el-form-item label="围栏类型" prop="fenceType">
<el-select v-model="form.fenceType" placeholder="请选择围栏类型">
<el-option
v-for="dict in fenceAlarmTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="围栏状态">-->
<!-- <el-radio-group v-model="form.state">-->
<!-- <el-radio-->
<!-- v-for="dict in statusOptions"-->
<!-- :key="dict.dictValue"-->
<!-- :label="parseInt(dict.dictValue)"-->
<!-- >{{dict.dictLabel}}</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item label="围栏状态：" prop="state">
<el-radio-group v-model="form.state">
<el-radio
v-for="dict in dict.type.yes_no"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-drawer
v-if="faultDrawStatus"
:title="drawerTitle"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
size="100%">
<fault-draw ref="faultDraw" v-if="faultDrawStatus" v-bind:id="fenceId" @handleClose="handleClose"></fault-draw>
</el-drawer>
</div>
</template>
<script>
import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehicle/fence";
import FaultDraw from "@/views/fence/AMAP/index.vue";
export default {
name: "fence",
dicts: ['sys_normal_disable','yes_no','vehicle_fence_type'],
components: { FaultDraw },
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 电子围栏表格数据
fenceList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 围栏类型字典
fenceAlarmTypeOptions: [],
// 围栏状态字典
statusOptions: [],
// 查询参数
queryParams: {
// pageNum: 1,
// pageSize: 10,
fenceName: null,
fenceType: null,
state: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
,
drawer: false,
direction: 'rtl',
drawerTitle:"",
fenceId: "",
faultDrawStatus:false,
};
},
created() {
this.getList();
this.getDicts("vehicle_fence_type").then(response => {
this.fenceAlarmTypeOptions = response.data;
});
this.getDicts("yes_no").then(response => {
this.statusOptions = response.data;
});
},
methods: {
/** 查询电子围栏列表 */
getList() {
this.loading = true;
listFence(this.queryParams).then(response => {
this.fenceList = response.data;
// this.total = response.data.total;
this.loading = false;
console.log("列表"+response.data)
});
},
// 围栏类型字典翻译
fenceAlarmTypeFormat(row, column) {
return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceAlarmType);
},
// 围栏状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.state);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
fenceName: null,
fenceAlarmType: null,
status: 0,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加电子围栏";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getFence(id).then(response => {
this.form = response.data;
console.log(response)
this.open = true;
this.title = "修改电子围栏";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
alert(this.form.id)
if (this.form.id != null) {
updateFence(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addFence(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delFence(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('vehicles/sysCorpuscleFence/export', {
...this.queryParams
}, `vehicle_fence.xlsx`)
},
lookFence(row){
if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
this.$modal.msgError("请先设置电子围栏");
return;
}
this.$router.push({
path:'map',
query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
})
},
showFaultDraw(row){
this.drawer = true;
this.drawerTitle = "绘制围栏：" + row.fenceName ;
this.fenceId = row.id;
this.faultDrawStatus = true;
},
handleClose(){
this.drawer = false;
this.faultDrawStatus = false;
}
}
};
</script>

248
src/views/fence/test/1/index.vue 100644
View File

@ -0,0 +1,248 @@
<template>
<!-- 控制按钮组 -->
<div class="main">
<section class="section">
<!-- 地图 -->
<div id="map_container" style="width: 100%; height: 100vh;"></div>
<!-- 控制按钮组 -->
<div class="ebox">
<el-button-group>
<el-button type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
<el-button type="primary" icon="el-icon-edit" @click="editRectangle">编辑围栏</el-button>
<el-button type="warning" icon="el-icon-delete" @click="cancelRectangle">取消编辑</el-button>
<el-button type="success" icon="el-icon-success" @click="saveRectangle">保存围栏</el-button>
<el-button type="danger" icon="el-icon-delete" @click="deleRectangle">删除围栏</el-button>
</el-button-group>
</div>
</section>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { geofenceList } from '@/api/manage/fenceAPI.js' //获取围栏数据
window._AMapSecurityConfig = {
securityJsCode: "defb21facca687bad1bb8e956b7d67dd",
};
export default {
name: "MapContainer",
data() {
return {
formData: {
carId: '',
pageNum: 1,//当前页
pageSize: 10,//页长
pageTotal: 0,//总数
},
map: null,
centerArr: [113.760234, 23.048884],//地图中心位置，不能为空数组【为空数组会报错】
path: [],//以前绘制的数据
paths: [], // 当前绘制的多边形经纬度数组
polygonItem: [], // 地图上绘制的所有多边形对象
polyEditors: [],// 新增数据=>所有编辑对象数组
polyEditorsBefore: [],// 以前历史数据=>进入编辑对象数组
};
},
mounted() {
this.initAMap();
this.init();
},
methods: {
initAMap() {
AMapLoader.load({
key: "d617205580ad1f43884deefb6ea53eb2",
version: "2.0",
plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
'AMap.MapType', 'AMap.MouseTool', 'AMap.Polygon', 'AMap.PolyEditor', 'AMap.CircleEditor'],
}).then((AMap) => {
this.map = new AMap.Map("map_container", {
resizeEnable: true,
viewMode: '3D', // 注意这里的引号
zoom: 17,
// 移除 pitch 属性，如果不需要特殊倾斜角度
// pitch: 55,
showBuildingBlock: true, // 注意这个属性可能在某些版本中不起作用
});
// 添加工具栏
this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
const toolbar = new AMap.ToolBar()// 工具条
const scale = new AMap.Scale()// 比例尺
this.map.addControl(toolbar)
this.map.addControl(scale)
})
}).catch((e) => {
console.error('地图加载失败:', e);
});
},
// 绘制多边形
drawRectangle() {
const This = this;
let mouseTool = new AMap.MouseTool(this.map);
const polygon = mouseTool.polygon({
//polygon：绘制多边形【线段：polyline;矩形：rectangle;圆：circle】
strokeColor: 'red',
strokeOpacity: 0.4,
strokeWeight: 6,
fillColor: '#1791fc',
fillOpacity: 0.2,
// strokeStyle还支持 solid
strokeStyle: 'solid',
// strokeDasharray: [30,10],
});
mouseTool.on('draw', function (event) {
// event.obj 为绘制出来的覆盖物对象
let polygonItem = event.obj;
let paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
// console.log('覆盖物对象绘制完成各个点的坐标', paths, event);
let path = []; // 编辑的路径
paths.forEach(v => {
path.push([v.lng, v.lat])
});
This.paths = path //将新增数据放入paths数组里
// This.editRectangle();//绘制完成,默认进入编辑状态
This.polygonItem.push(event.obj);
This.map.remove(event.obj); // 删除多边形
console.log(polygon, '------polygon-----');
});
},
// 编辑围栏
editRectangle() {
const pathq = this.paths;
//新增的进入编辑状态
let polygon = new AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.2,
fillColor: '#1791fc',
zIndex: 50,
});
this.map.add(polygon);
this.polygonItem.push(polygon);
// 缩放地图到合适的视野级别
this.map.setFitView([polygon]);
this.polyEditor = new AMap.PolyEditor(this.map, polygon);
this.polyEditor.open();
this.polyEditors.push(this.polyEditor);
//历史围栏的进入编辑状态
let polygonBefore = new AMap.Polygon({
path: this.path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.2,
fillColor: '#1791fc',
zIndex: 50,
});
this.map.add(polygonBefore);
this.polygonItem.push(polygonBefore);
// 缩放地图到合适的视野级别
this.map.setFitView([polygonBefore]);
this.polyEditorBefore = new AMap.PolyEditor(this.map, polygonBefore);
this.polyEditorBefore.open();
this.polyEditorsBefore.push(this.polyEditorBefore);
// this.polyEditor.on('addnode', function (event) {
// console.info('触发事件：addnode', event)
// console.info('修改后的经纬度：', polygon.getPath())
// });
// this.polyEditor.on('adjust', function (event) {
// console.info('触发事件：adjust', event)
// console.info('修改后的经纬度：', polygon.getPath())
// });
// this.polyEditor.on('removenode', function (event) {
// console.info('触发事件：removenode', event)
// console.info('修改后的经纬度：', polygon.getPath())
// });
// this.polyEditor.on('end', function (event) {
// console.info('触发事件： end', event)
// console.info('end修改后的经纬度：', polygon.getPath())
// // event.target 即为编辑后的多边形对象
// });
},
// 取消编辑状态
cancelRectangle() {
this.polyEditors.forEach(item => { item.close(); });//新增
this.polyEditorsBefore.forEach(item => { item.close(); });//历史
},
//保存围栏
saveRectangle() {
// 取消编辑状态
this.polyEditors.forEach(item => { item.close(); });
this.polyEditorsBefore.forEach(item => { item.close(); });
// 保存 console.log(this.paths,this.path)=>成功（重新刷新页面）
// ...
},
// 删除围栏
deleRectangle() {
this.polyEditors.forEach(item => { item.close(); });// 取消编辑状态
this.polyEditorsBefore.forEach(item => { item.close(); });// 取消编辑状态
this.map.clearMap(); // 删除地图所有覆盖物
//删除=>成功（重新刷新页面）
// ...
},
//获取后台数据
init() {
const that = this
let param = {
carId: this.formData.carId,//string true carID
pageNum: this.formData.pageNum,//string false 当前页数
pageSize: this.formData.pageSize,//string false 每页条数
}
geofenceList({ param }).then(res => {
if (res.data.code == 0) {
if (res.data.data.list.length==0) {
this.$message.error('没有围栏数据')
return
}
that.path=[]
that.map.clearMap(); // 删除地图所有覆盖物
res.data.data.list.forEach((item, index) => { //同时展示多个围栏
that.path.push(item.points)//编辑时，可以一起编辑
// this.centerArr = that.path[0]
// this.initMap()
that.map.add(new AMap.Polygon({
path: item.points,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: "#1791fc",
zIndex: 50,
}));
that.map.setFitView();
})
} else {
this.$message.error(res.data.msg)
}
})
},
}
};
</script>
<style scoped>
#map_container {
width: 100%;
height: 100vh;
}
.ebox {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000; /* 确保按钮在地图之上 */
}
</style>

849
src/views/fence/test/3/index.vue 100644
View File

@ -0,0 +1,849 @@
<!--<template>-->
<!-- <div class="allMapOperation" ref="allMapOperation">-->
<!-- <div ref='drawContainer' class="draw-container"></div>-->
<!-- <div class='info' v-if="!onlyShow">-->
<!-- <p>操作说明:</p>-->
<!-- <p>1.点击鼠标左键拖拽绘制圆、其他覆盖物连续点击，右键结束绘制</p>-->
<!-- <p>2.鼠标右键点击覆盖物进行编辑、删除</p>-->
<!-- <p v-if="!single" style="color:red;">3.需要点击保存才能获取已经绘制的图形数据</p>-->
<!-- </div>-->
<!-- <div class="fullScreen">-->
<!-- <Icon size="24" type="md-expand" @click="fullSrceen" />-->
<!-- </div>-->
<!-- <div class="drawmap-operation-menu" style='padding: 12px 0;' v-if="!onlyShow">-->
<!-- <div v-if="isShowMarker">-->
<!-- <Tooltip placement="left" content="点标记" class="drawmap-tooltip">-->
<!-- <Icon size="24" type="md-pin" @click="draw('marker')" />-->
<!-- </Tooltip>-->
<!-- <Divider style="margin: 12px 0;" />-->
<!-- </div>-->
<!-- <div v-if="isShowPolyline">-->
<!-- <Tooltip placement="left" content="画线" class="drawmap-tooltip">-->
<!-- <Icon size="24" type="md-trending-up" @click="draw('polyline')" />-->
<!-- </Tooltip>-->
<!-- <Divider style="margin: 12px 0;" />-->
<!-- </div>-->
<!-- <div v-if="isShowPolygon">-->
<!-- <Tooltip placement="left" content="画多边形" class="drawmap-tooltip">-->
<!-- <Icon size="24" type="ios-map-outline" @click="draw('polygon')" />-->
<!-- </Tooltip>-->
<!-- <Divider style="margin: 12px 0;" />-->
<!-- </div>-->
<!-- <div v-if="isShowCircle">-->
<!-- <Tooltip placement="left" content="画圆" class="drawmap-tooltip">-->
<!-- <Icon size="24" type="md-radio-button-off" @click="draw('circle')" />-->
<!-- </Tooltip>-->
<!-- <Divider style="margin: 12px 0;" />-->
<!-- </div>-->
<!-- <Tooltip placement="left" content="清空" class="drawmap-tooltip">-->
<!-- <Icon size="24" type="md-trash" @click="clearAllGraph" />-->
<!-- </Tooltip>-->
<!-- <div v-if="!single">-->
<!-- <Divider style="margin: 12px 0;" />-->
<!-- <Tooltip placement="left" content="保存" class="drawmap-tooltip">-->
<!-- <span type="text" @click="saveMap" style="cursor: pointer;">保存</span>-->
<!-- </Tooltip>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!--import AMap from "AMap" //在页面中引入高德地图-->
<!--import { VueDebounce } from "@/vehicle/fence.js"-->
<!--/** 引用的防抖函数代码-->
<!-- * export const VueDebounce = (func, wait = 200, immediate = false) => {-->
<!-- let timeout = null; // 定时器-->
<!-- return function () {-->
<!-- let that = this, // this对象-->
<!-- args = arguments; // 参数-->
<!-- if (timeout) clearTimeout(timeout);-->
<!-- if (immediate === true) { // 立即执行-->
<!-- var callNow = !timeout;-->
<!-- timeout = setTimeout(() => {-->
<!-- timeout = null;-->
<!-- }, wait)-->
<!-- if (callNow) {-->
<!-- // func.apply(that, args); // 普通用法-->
<!-- that[func](...args); // vue用法-->
<!-- }-->
<!-- }-->
<!-- else { // 非立即执行-->
<!-- timeout = setTimeout(() => {-->
<!-- // func.apply(this, args); // 普通用法-->
<!-- that[func](...args); // vue用法-->
<!-- }, wait);-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- */-->
<!--const overlayStyle = {-->
<!-- borderWeight: 3,-->
<!-- strokeColor: "#FF33FF",-->
<!-- strokeOpacity: 1,-->
<!-- strokeWeight: 2,-->
<!-- strokeOpacity: 0.2,-->
<!-- fillOpacity: 0.4,-->
<!-- strokeStyle: "dashed",-->
<!-- strokeDasharray: [10, 10],-->
<!-- fillColor: "#1791fc",-->
<!-- zIndex: 50-->
<!--}-->
<!--export default {-->
<!-- props: {-->
<!-- drawType: {-->
<!-- type: Array, //['polyline','polygon','circle','marker'] ,['all] 绘制图形的类型-->
<!-- required: false,-->
<!-- default: () => {-->
<!-- return []-->
<!-- }-->
<!-- },-->
<!-- single: {-->
<!-- type: Boolean, //是否绘制一个图形 用于单独添加航点 航线 空域-->
<!-- default: true-->
<!-- },-->
<!-- onlyShow: {-->
<!-- type: Boolean, //是否用于显示,将会隐藏提示 与 操作按钮-->
<!-- default: false-->
<!-- }-->
<!-- },-->
<!-- data() {-->
<!-- return {-->
<!-- map: null, //地图对象-->
<!-- mouseTool: null, //鼠标绘制对象-->
<!-- geocoder: null, //地址解析对象-->
<!-- satelliteLayer: null, //图层-->
<!-- overlays: [], //所以覆盖物集合-->
<!-- Editor: null, //编辑器对象-->
<!-- nowCaozuo: null, //当前编辑的对象-->
<!-- contextMenu: null, //右键菜单对象-->
<!-- polylineData: [], //传出去的折线数据-->
<!-- polygonData: [], //传出去的多边形数据-->
<!-- rectangleData: [], //传出去的矩形数据-->
<!-- circleData: [], //传出去的圆形数据-->
<!-- markerData: [] //传出去的点标记数据-->
<!-- }-->
<!-- },-->
<!-- computed: {-->
<!-- isShowMarker() {-->
<!-- return this.drawType.includes("marker") || this.drawType.includes("all")-->
<!-- },-->
<!-- isShowPolyline() {-->
<!-- return this.drawType.includes("polyline") || this.drawType.includes("all")-->
<!-- },-->
<!-- isShowPolygon() {-->
<!-- return this.drawType.includes("polygon") || this.drawType.includes("all")-->
<!-- },-->
<!-- isShowCircle() {-->
<!-- return this.drawType.includes("circle") || this.drawType.includes("all")-->
<!-- }-->
<!-- },-->
<!-- created() {-->
<!-- // console.log("创建")-->
<!-- },-->
<!-- mounted() {-->
<!-- // this.initMap()-->
<!-- },-->
<!-- methods: {-->
<!-- initMap() {-->
<!-- if (this.map) return-->
<!-- console.log("创建地图对象")-->
<!-- this.map = new AMap.Map(this.$refs.drawContainer, { zoom: 12 })-->
<!-- this.geocoder = new AMap.Geocoder({})-->
<!-- this.mouseTool = new AMap.MouseTool(this.map)-->
<!-- this.map.plugin(["AMap.Scale", "AMap.ToolBar"], () => {-->
<!-- this.map.addControl(new AMap.Scale())-->
<!-- // this.map.addControl(new AMap.ToolBar())-->
<!-- })-->
<!-- //监听draw事件可获取画好的覆盖物-->
<!-- this.mouseTool.on("draw", e => {-->
<!-- let obj = e.obj-->
<!-- let overlays = this.overlays-->
<!-- let overlaysLen = overlays.length-->
<!-- let overlaysType = obj.className-->
<!-- if (this.single && overlaysLen > 0) {-->
<!-- for (let i = 0; i < overlaysLen; i++) {-->
<!-- this.map.remove(overlays[i])-->
<!-- }-->
<!-- overlays = []-->
<!-- }-->
<!-- overlays.push(obj)-->
<!-- this.overlays = overlays-->
<!-- this.closeEdit()-->
<!-- switch (overlaysType) {-->
<!-- case "marker": {-->
<!-- this.mouseTool.marker({ animation: "AMAP_ANIMATION_DROP" })-->
<!-- break-->
<!-- }-->
<!-- case "Overlay.Circle": {-->
<!-- this.editCircle(obj)-->
<!-- break-->
<!-- }-->
<!-- case "Overlay.Polygon": {-->
<!-- this.editPolygon(obj)-->
<!-- break-->
<!-- }-->
<!-- case "Overlay.Polyline": {-->
<!-- obj.setOptions({-->
<!-- showDir: true,-->
<!-- lineJoin: "round",-->
<!-- lineCap: "round"-->
<!-- })-->
<!-- this.editPolyline(obj)-->
<!-- break-->
<!-- }-->
<!-- }-->
<!-- if (this.single) {-->
<!-- this.save()-->
<!-- }-->
<!-- this.mouseTool.close()-->
<!-- this.creatRightHandle(obj)-->
<!-- this.map.setDefaultCursor("pointer")-->
<!-- this.$Message.success("绘制完成")-->
<!-- })-->
<!-- },-->
<!-- createMenu(obj, type) {-->
<!-- if (this.contextMenu) {-->
<!-- this.contextMenu.close()-->
<!-- this.contextMenu = null-->
<!-- }-->
<!-- //创建右键菜单-->
<!-- this.contextMenu = new AMap.ContextMenu({})-->
<!-- this.contextMenu.addItem(-->
<!-- type == "marker" ? "拖动" : "开启编辑",-->
<!-- () => {-->
<!-- if (type == "marker") {-->
<!-- this.nowCaozuo.setDraggable(true)-->
<!-- this.dragendEndHandle(this.nowCaozuo)-->
<!-- } else {-->
<!-- this[type](this.nowCaozuo)-->
<!-- }-->
<!-- this.contextMenu.close()-->
<!-- },-->
<!-- 0-->
<!-- )-->
<!-- //右键取消编辑-->
<!-- this.contextMenu.addItem(-->
<!-- type == "marker" ? "取消拖动" : "取消编辑",-->
<!-- () => {-->
<!-- if (type == "marker") {-->
<!-- this.nowCaozuo.setDraggable(false)-->
<!-- } else {-->
<!-- this.closeEdit()-->
<!-- }-->
<!-- this.contextMenu.close()-->
<!-- },-->
<!-- 1-->
<!-- )-->
<!-- //右键删除-->
<!-- this.contextMenu.addItem(-->
<!-- "移除",-->
<!-- () => {-->
<!-- this.closeEdit()-->
<!-- this.map.remove(this.nowCaozuo)-->
<!-- this.contextMenu.close()-->
<!-- },-->
<!-- 2-->
<!-- )-->
<!-- },-->
<!-- editCircle(obj) {-->
<!-- this.closeEdit()-->
<!-- this.Editor = new AMap.CircleEditor(this.map, obj)-->
<!-- if (this.single) {-->
<!-- this.Editor.on("adjust", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("move", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("end", e => {-->
<!-- // this.save()-->
<!-- })-->
<!-- }-->
<!-- this.Editor.open()-->
<!-- },-->
<!-- editPolygon(obj) {-->
<!-- this.closeEdit()-->
<!-- this.Editor = new AMap.PolygonEditor(this.map, obj)-->
<!-- if (this.single) {-->
<!-- this.Editor.on("addnode", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("adjust", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("removenode", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("end", e => {-->
<!-- // this.save()-->
<!-- })-->
<!-- }-->
<!-- this.Editor.open()-->
<!-- },-->
<!-- editPolyline(obj) {-->
<!-- this.closeEdit()-->
<!-- this.Editor = new AMap.PolylineEditor(this.map, obj)-->
<!-- if (this.single) {-->
<!-- this.Editor.on("addnode", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("adjust", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("removenode", e => {-->
<!-- this.save()-->
<!-- })-->
<!-- this.Editor.on("end", e => {-->
<!-- // this.save()-->
<!-- })-->
<!-- }-->
<!-- this.Editor.open()-->
<!-- },-->
<!-- draw(type) {-->
<!-- switch (type) {-->
<!-- case "marker": {-->
<!-- this.mouseTool.marker({ animation: "AMAP_ANIMATION_DROP" })-->
<!-- break-->
<!-- }-->
<!-- case "polyline": {-->
<!-- this.mouseTool.polyline({-->
<!-- strokeColor: "#3366FF",-->
<!-- strokeWeight: 6-->
<!-- })-->
<!-- break-->
<!-- }-->
<!-- case "polygon": {-->
<!-- this.mouseTool.polygon({ ...overlayStyle })-->
<!-- break-->
<!-- }-->
<!-- case "circle": {-->
<!-- this.mouseTool.circle({ ...overlayStyle })-->
<!-- break-->
<!-- }-->
<!-- }-->
<!-- this.map.setDefaultCursor("crosshair")-->
<!-- },-->
<!-- // 获取绘制的圆形覆盖物数据-->
<!-- mapCircleData(mapCircle) {-->
<!-- let len = mapCircle.length-->
<!-- let arrar = mapCircle.map(item => {-->
<!-- return item.getCenter()-->
<!-- })-->
<!-- return new Promise((resolve, reject) => {-->
<!-- let circleData = []-->
<!-- this.geocoder.getAddress(arrar, (status, result) => {-->
<!-- if (status === "complete" && result.regeocodes.length) {-->
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
<!-- // console.log(result.regeocodes[j].formattedAddress)-->
<!-- circleData.push({-->
<!-- lnglat: {-->
<!-- lng: mapCircle[j].getCenter().lng,-->
<!-- lat: mapCircle[j].getCenter().lat-->
<!-- },-->
<!-- radius: parseInt(mapCircle[j].getRadius()),-->
<!-- address: result.regeocodes[j].formattedAddress-->
<!-- })-->
<!-- this.circleData = circleData-->
<!-- if (circleData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- }-->
<!-- } else {-->
<!-- for (let i = 0; i < len; i += 1) {-->
<!-- circleData.push({-->
<!-- lnglat: {-->
<!-- lng: mapCircle[i].getCenter().lng,-->
<!-- lat: mapCircle[i].getCenter().lat-->
<!-- },-->
<!-- radius: parseInt(mapCircle[i].getRadius()),-->
<!-- address: ""-->
<!-- })-->
<!-- }-->
<!-- this.circleData = circleData-->
<!-- if (circleData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- this.$Message.success("坐标地址获取失败")-->
<!-- }-->
<!-- })-->
<!-- })-->
<!-- },-->
<!-- // 获取折线覆盖物数据-->
<!-- mapPolylineData(mapPolyline) {-->
<!-- let len = mapPolyline.length-->
<!-- return new Promise((resolve, reject) => {-->
<!-- for (let i = 0; i < len; i++) {-->
<!-- let geoLngLat = mapPolyline[i].getPath()-->
<!-- let linePath = geoLngLat.map(item => {-->
<!-- return [item.lng, item.lat]-->
<!-- })-->
<!-- let polylineData = this.polylineData-->
<!-- this.geocoder.getAddress(geoLngLat, (status, result) => {-->
<!-- let address = []-->
<!-- if (status === "complete" && result.regeocodes.length) {-->
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
<!-- address.push({-->
<!-- pointName: result.regeocodes[j].formattedAddress,-->
<!-- longitude: geoLngLat[j].lng,-->
<!-- latitude: geoLngLat[j].lat,-->
<!-- orders: j-->
<!-- })-->
<!-- }-->
<!-- polylineData.push({-->
<!-- points: address,-->
<!-- line: linePath-->
<!-- })-->
<!-- this.polylineData = polylineData-->
<!-- if (polylineData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- } else {-->
<!-- this.$Message.success("坐标地址获取失败")-->
<!-- for (let adi = 0; adi < len; adi += 1) {-->
<!-- address.push({-->
<!-- pointName: "",-->
<!-- longitude: geoLngLat[adi].lng,-->
<!-- latitude: geoLngLat[adi].lat,-->
<!-- orders: adi-->
<!-- })-->
<!-- }-->
<!-- polylineData.push({-->
<!-- points: address,-->
<!-- line: linePath-->
<!-- })-->
<!-- this.polylineData = polylineData-->
<!-- if (polylineData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- })-->
<!-- },-->
<!-- // 获取多边形覆盖物数据-->
<!-- mapPolygonData(mapPolygon) {-->
<!-- let len = mapPolygon.length-->
<!-- return new Promise((resolve, reject) => {-->
<!-- for (let i = 0; i < len; i++) {-->
<!-- let geoLngLat = mapPolygon[i].getPath()-->
<!-- let linePath = geoLngLat.map(item => {-->
<!-- return [item.lng, item.lat]-->
<!-- })-->
<!-- let polygonData = this.polygonData-->
<!-- this.geocoder.getAddress(geoLngLat, (status, result) => {-->
<!-- let address = []-->
<!-- if (status === "complete" && result.regeocodes.length) {-->
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
<!-- address.push({-->
<!-- id: "",-->
<!-- airspaceId: "",-->
<!-- pointName: result.regeocodes[j].formattedAddress,-->
<!-- longitude: geoLngLat[j].lng,-->
<!-- latitude: geoLngLat[j].lat,-->
<!-- orders: j-->
<!-- })-->
<!-- }-->
<!-- polygonData.push({-->
<!-- points: address,-->
<!-- line: linePath-->
<!-- })-->
<!-- // console.log("polygonData.length", polygonData.length)-->
<!-- this.polygonData = polygonData-->
<!-- if (polygonData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- } else {-->
<!-- this.$Message.success("坐标地址获取失败")-->
<!-- for (let ii = 0; ii < len; ii += 1) {-->
<!-- address.push({-->
<!-- id: "",-->
<!-- airspaceId: "",-->
<!-- pointName: "",-->
<!-- longitude: geoLngLat[ii].lng,-->
<!-- latitude: geoLngLat[ii].lat,-->
<!-- orders: ii-->
<!-- })-->
<!-- }-->
<!-- polygonData.push({-->
<!-- points: address,-->
<!-- line: linePath-->
<!-- })-->
<!-- this.polygonData = polygonData-->
<!-- if (polygonData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- })-->
<!-- },-->
<!-- // 获取点标记覆盖物数据-->
<!-- mapMarkerData(mapMarker) {-->
<!-- let len = mapMarker.length-->
<!-- let arrar = mapMarker.map(item => {-->
<!-- return item.getPosition()-->
<!-- })-->
<!-- return new Promise((resolve, reject) => {-->
<!-- let markerData = []-->
<!-- this.geocoder.getAddress(arrar, (status, result) => {-->
<!-- if (status === "complete" && result.regeocodes.length) {-->
<!-- for (let j = 0; j < result.regeocodes.length; j += 1) {-->
<!-- markerData.push({-->
<!-- longitude: mapMarker[j].getPosition().lng,-->
<!-- latitude: mapMarker[j].getPosition().lat,-->
<!-- orders: j,-->
<!-- address: result.regeocodes[j].formattedAddress-->
<!-- })-->
<!-- this.markerData = markerData-->
<!-- if (markerData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- }-->
<!-- } else {-->
<!-- this.$Message.success("坐标地址获取失败")-->
<!-- for (let mid = 0; mid < len; mid += 1) {-->
<!-- markerData.push({-->
<!-- longitude: mapMarker[mid].getPosition().lng,-->
<!-- latitude: mapMarker[mid].getPosition().lat,-->
<!-- orders: mid,-->
<!-- address: ""-->
<!-- })-->
<!-- this.markerData = markerData-->
<!-- if (markerData.length == len) {-->
<!-- resolve()-->
<!-- }-->
<!-- }-->
<!-- }-->
<!-- })-->
<!-- })-->
<!-- },-->
<!-- showCircle(data, needEdit = false) {-->
<!-- for (let i = 0; i < data.length; i++) {-->
<!-- let circle = new AMap.Circle({-->
<!-- center: [data[i].lnglat.lng, data[i].lnglat.lat],-->
<!-- radius: data[i].radius,-->
<!-- ...overlayStyle-->
<!-- })-->
<!-- circle.setMap(this.map)-->
<!-- this.addOverlay(circle)-->
<!-- this.creatRightHandle(circle)-->
<!-- if (needEdit) {-->
<!-- this.editCircle(circle)-->
<!-- }-->
<!-- }-->
<!-- this.setVueDebounce()-->
<!-- },-->
<!-- setCircle(center, radius) {-->
<!-- this.closeEdit()-->
<!-- this.clearMap()-->
<!-- let circle = new AMap.Circle({-->
<!-- center,-->
<!-- radius,-->
<!-- ...overlayStyle-->
<!-- })-->
<!-- this.addOverlay(circle)-->
<!-- circle.setMap(this.map)-->
<!-- this.creatRightHandle(circle)-->
<!-- this.setVueDebounce()-->
<!-- this.map.setCenter(center)-->
<!-- },-->
<!-- showMark(data) {-->
<!-- for (let i = 0; i < data.length; i++) {-->
<!-- let marker = new AMap.Marker({-->
<!-- position: new AMap.LngLat(data[i].lng, data[i].lat)-->
<!-- })-->
<!-- this.map.add(marker)-->
<!-- if (data[i].title) {-->
<!-- marker.setLabel({-->
<!-- direction: "bottom",-->
<!-- content: data[i].title //设置文本标注内容-->
<!-- })-->
<!-- }-->
<!-- this.addOverlay(marker)-->
<!-- this.creatRightHandle(marker)-->
<!-- this.dragendEndHandle(marker)-->
<!-- }-->
<!-- this.setVueDebounce()-->
<!-- this.map.setZoom(10)-->
<!-- },-->
<!-- // 单个显示-->
<!-- setMaker(lng, lat) {-->
<!-- // this.initMap()-->
<!-- this.closeEdit()-->
<!-- this.clearMap()-->
<!-- let marker = new AMap.Marker({-->
<!-- position: new AMap.LngLat(lng, lat)-->
<!-- })-->
<!-- this.map.add(marker)-->
<!-- this.addOverlay(marker)-->
<!-- this.creatRightHandle(marker)-->
<!-- this.dragendEndHandle(marker)-->
<!-- this.map.setCenter([lng, lat])-->
<!-- this.map.setZoom(10)-->
<!-- },-->
<!-- showPolygon(data, needEdit = false) {-->
<!-- for (let i = 0; i < data.length; i++) {-->
<!-- let polygon = new AMap.Polygon({-->
<!-- path: data[i],-->
<!-- ...overlayStyle-->
<!-- })-->
<!-- this.addOverlay(polygon)-->
<!-- polygon.setMap(this.map)-->
<!-- this.creatRightHandle(polygon)-->
<!-- if (needEdit) {-->
<!-- this.editPolygon(polygon)-->
<!-- }-->
<!-- }-->
<!-- this.setVueDebounce()-->
<!-- },-->
<!-- setPolygon(path) {-->
<!-- this.closeEdit()-->
<!-- this.clearMap()-->
<!-- let polygon = new AMap.Polygon({-->
<!-- path,-->
<!-- ...overlayStyle-->
<!-- })-->
<!-- this.addOverlay(polygon)-->
<!-- polygon.setMap(this.map)-->
<!-- this.creatRightHandle(polygon)-->
<!-- this.setVueDebounce()-->
<!-- },-->
<!-- showLine(data, needEdit = false) {-->
<!-- for (let i = 0; i < data.length; i++) {-->
<!-- let line = new AMap.Polyline({-->
<!-- path: data[i],-->
<!-- strokeColor: "#3366FF",-->
<!-- strokeWeight: 6,-->
<!-- showDir: true,-->
<!-- lineJoin: "round",-->
<!-- lineCap: "round"-->
<!-- })-->
<!-- this.addOverlay(line)-->
<!-- line.setMap(this.map)-->
<!-- this.creatRightHandle(line)-->
<!-- if (needEdit) {-->
<!-- this.editPolyline(line)-->
<!-- }-->
<!-- }-->
<!-- this.setVueDebounce()-->
<!-- },-->
<!-- setLine(path) {-->
<!-- this.closeEdit()-->
<!-- this.clearMap()-->
<!-- let line = new AMap.Polyline({-->
<!-- path,-->
<!-- strokeColor: "#3366FF",-->
<!-- strokeWeight: 6,-->
<!-- showDir: true,-->
<!-- lineJoin: "round",-->
<!-- lineCap: "round"-->
<!-- })-->
<!-- this.addOverlay(line)-->
<!-- line.setMap(this.map)-->
<!-- if (!this.onlyShow) {-->
<!-- this.creatRightHandle(line)-->
<!-- }-->
<!-- this.setVueDebounce()-->
<!-- },-->
<!-- setVueDebounce:VueDebounce('setFitView'),-->
<!-- setFitView(){-->
<!-- this.map && this.map.setFitView(null, false)-->
<!-- },-->
<!-- addOverlay(o) {-->
<!-- let overlays = this.overlays-->
<!-- overlays.push(o)-->
<!-- this.overlays = overlays-->
<!-- },-->
<!-- dragendEndHandle(key) {-->
<!-- key.on("dragend", obj => {-->
<!-- if (this.single) {-->
<!-- this.save()-->
<!-- }-->
<!-- })-->
<!-- },-->
<!-- creatRightHandle(key) {-->
<!-- if (this.onlyShow) return-->
<!-- key.on("rightclick", cliObj => {-->
<!-- this.nowCaozuo = cliObj.target-->
<!-- // 判断鼠标右键点击的是什么图形-->
<!-- if (cliObj.target.className == "Overlay.Circle") {-->
<!-- this.createMenu(cliObj, "editCircle")-->
<!-- } else if (cliObj.target.className == "AMap.Marker") {-->
<!-- this.createMenu(cliObj, "marker")-->
<!-- } else if (cliObj.target.className == "Overlay.Polyline") {-->
<!-- this.createMenu(cliObj, "editPolyline")-->
<!-- } else if (cliObj.target.className == "Overlay.Polygon") {-->
<!-- this.createMenu(cliObj, "editPolygon")-->
<!-- } else {-->
<!-- }-->
<!-- this.contextMenu.open(this.map, cliObj.lnglat)-->
<!-- })-->
<!-- },-->
<!-- closeEdit() {-->
<!-- if (this.Editor) {-->
<!-- this.Editor.close()-->
<!-- this.Editor = null-->
<!-- }-->
<!-- if (this.map) {-->
<!-- this.map.setDefaultCursor("pointer")-->
<!-- }-->
<!-- },-->
<!-- clearMap() {-->
<!-- if (this.map) {-->
<!-- this.map.clearMap()-->
<!-- }-->
<!-- },-->
<!-- clearAllGraph() {-->
<!-- this.overlays = []-->
<!-- this.clearMap()-->
<!-- this.closeEdit()-->
<!-- },-->
<!-- saveMap() {-->
<!-- this.save()-->
<!-- },-->
<!-- async save() {-->
<!-- this.polylineData = []-->
<!-- this.polygonData = []-->
<!-- this.circleData = []-->
<!-- this.markerData = []-->
<!-- let mapMarker = this.map.getAllOverlays("marker")-->
<!-- let mapCircle = this.map.getAllOverlays("circle")-->
<!-- let mapPolygon = this.map.getAllOverlays("polygon")-->
<!-- let mapPolyline = this.map.getAllOverlays("polyline")-->
<!-- if (mapMarker.length > 0) {-->
<!-- await this.mapMarkerData(mapMarker) //点标记-->
<!-- }-->
<!-- if (mapCircle.length > 0) {-->
<!-- await this.mapCircleData(mapCircle) //圆形-->
<!-- }-->
<!-- if (mapPolygon.length > 0) {-->
<!-- await this.mapPolygonData(mapPolygon) //多边形-->
<!-- }-->
<!-- if (mapPolyline.length > 0) {-->
<!-- await this.mapPolylineData(mapPolyline) //折线-->
<!-- }-->
<!-- let allMapData = {-->
<!-- markerData: this.markerData,-->
<!-- circleData: this.circleData,-->
<!-- polygonData: this.polygonData,-->
<!-- polylineData: this.polylineData-->
<!-- }-->
<!-- this.$emit("getMapData", allMapData)-->
<!-- },-->
<!-- fullSrceen() {-->
<!-- // let main = document.body-->
<!-- // if (this.fullId) {-->
<!-- let main = this.$refs.allMapOperation-->
<!-- // }-->
<!-- let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen-->
<!-- isFullscreen = !!isFullscreen-->
<!-- if (isFullscreen) {-->
<!-- if (document.exitFullscreen) {-->
<!-- document.exitFullscreen()-->
<!-- } else if (document.mozCancelFullScreen) {-->
<!-- document.mozCancelFullScreen()-->
<!-- } else if (document.webkitCancelFullScreen) {-->
<!-- document.webkitCancelFullScreen()-->
<!-- } else if (document.msExitFullscreen) {-->
<!-- document.msExitFullscreen()-->
<!-- }-->
<!-- this.isFull = false-->
<!-- } else {-->
<!-- if (main.requestFullscreen) {-->
<!-- main.requestFullscreen()-->
<!-- } else if (main.mozRequestFullScreen) {-->
<!-- main.mozRequestFullScreen()-->
<!-- } else if (main.webkitRequestFullScreen) {-->
<!-- main.webkitRequestFullScreen()-->
<!-- } else if (main.msRequestFullscreen) {-->
<!-- main.msRequestFullscreen()-->
<!-- }-->
<!-- this.isFull = true-->
<!-- }-->
<!-- }-->
<!-- },-->
<!-- beforeDestroy() {-->
<!-- console.log("销毁")-->
<!-- this.mouseTool = null-->
<!-- this.geocoder = null-->
<!-- this.Editor = null-->
<!-- this.nowCaozuo = null-->
<!-- this.contextMenu = null-->
<!-- this.overlays = []-->
<!-- if (this.map) {-->
<!-- this.map.destroy()-->
<!-- this.map = null-->
<!-- }-->
<!-- }-->
<!--}-->
<!--</script>-->
<!--<style lang="less">-->
<!--.allMapOperation {-->
<!-- position: relative;-->
<!-- .draw-container {-->
<!-- height: 100%;-->
<!-- width: 100%;-->
<!-- }-->
<!-- .drawmap-operation-menu {-->
<!-- display: flex;-->
<!-- flex-direction: column;-->
<!-- min-width: 0;-->
<!-- word-wrap: break-word;-->
<!-- background-color: #fff;-->
<!-- background-clip: border-box;-->
<!-- border-radius: 0.25rem;-->
<!-- width: 48px;-->
<!-- border-width: 0;-->
<!-- border-radius: 0.4rem;-->
<!-- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);-->
<!-- position: absolute;-->
<!-- top: 8rem;-->
<!-- right: 1rem;-->
<!-- -ms-flex: 1 1 auto;-->
<!-- flex: 1 1 auto;-->
<!-- }-->
<!-- .drawmap-tooltip {-->
<!-- display: flex;-->
<!-- align-items: center;-->
<!-- justify-content: center;-->
<!-- }-->
<!-- .info {-->
<!-- padding: 0.25rem 0.75rem;-->
<!-- margin-bottom: 1rem;-->
<!-- border-radius: 0.25rem;-->
<!-- position: absolute;-->
<!-- top: 5px;-->
<!-- background-color: white;-->
<!-- width: auto;-->
<!-- border-width: 0;-->
<!-- right: 5px;-->
<!-- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);-->
<!-- line-height: 22px;-->
<!-- }-->
<!-- .fullScreen {-->
<!-- position: absolute;-->
<!-- right: 5px;-->
<!-- bottom: 5px;-->
<!-- display: flex;-->
<!-- flex-direction: column;-->
<!-- justify-content: center;-->
<!-- align-items: center;-->
<!-- border-radius: 0.25rem;-->
<!-- width: 30px;-->
<!-- height: 30px;-->
<!-- box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);-->
<!-- }-->
<!--}-->
<!--</style>-->

105
src/views/fence/test/che.vue 100644
View File

@ -0,0 +1,105 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>轨迹回放</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.input-card .btn{
margin-right: 1.2rem;
width: 9rem;
}
.input-card .btn:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card">
<h4>轨迹回放控制</h4>
<div class="input-item">
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
</div>
<div class="input-item">
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
<input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
</div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script>
// JSAPI2.0 使用覆盖物动画必须先加载动画插件
AMap.plugin('AMap.MoveAnimation', function(){
var marker, lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 17
});
marker = new AMap.Marker({
map: map,
position: [116.478935,39.997761],
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
offset: new AMap.Pixel(-13, -26),
});
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
map.setCenter(e.target.getPosition(),true)
});
map.setFitView();
window.startAnimation = function startAnimation () {
marker.moveAlong(lineArr, {
// 每一段的时长
duration: 500,//可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: true,
});
};
window.pauseAnimation = function () {
marker.pauseMove();
};
window.resumeAnimation = function () {
marker.resumeMove();
};
window.stopAnimation = function () {
marker.stopMove();
};
});
</script>
</body>
</html>

2
src/views/login.vue
View File

@ -89,7 +89,7 @@ export default {
}, },
loading: false, loading: false,
// 验证码开关 // 验证码开关
captchaEnabled: true, captchaEnabled: false,
// 注册开关 // 注册开关
register: false, register: false,
redirect: undefined redirect: undefined