运营区地图修改
This commit is contained in:
parent
b03b0ff2e5
commit
2a47668512
|
|
@ -1,17 +1,948 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="container">
|
||||||
11111111
|
<div id="container"></div>
|
||||||
|
<div class="input-card-left">
|
||||||
|
<div style="color: red">tips：双击区域可重新编辑</div>
|
||||||
|
<div style="color: red">
|
||||||
|
点击新建--左键开始建立停车区--右键完成建立--点击结束编辑才会最终生效
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-card">
|
||||||
|
<el-button @click="setFitView()">全局查看</el-button>
|
||||||
|
<el-button @click="changeMapStyle()">切换地图</el-button>
|
||||||
|
<el-button @click="showMarkers">显示/隐藏文字</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="input-card-right">
|
||||||
|
<el-button @click="createPolygon()">新建</el-button>
|
||||||
|
<!-- <el-button @click="polyEditor.open()">开始编辑</el-button> -->
|
||||||
|
<el-button @click="editClose">结束编辑</el-button>
|
||||||
|
<el-button @click="changeMapStyle()">切换地图</el-button>
|
||||||
|
<el-button @click="clearPolygon()">清除多边形</el-button>
|
||||||
|
</div>
|
||||||
|
<el-form
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryForm"
|
||||||
|
size="small"
|
||||||
|
:inline="true"
|
||||||
|
v-show="showSearch"
|
||||||
|
label-width="68px"
|
||||||
|
style="margin-top: 20px"
|
||||||
|
>
|
||||||
|
<el-form-item label="停车区" label-width="100" prop="parkingName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.parkingName"
|
||||||
|
placeholder="请输入停车区"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型" prop="type">
|
||||||
|
<el-select v-model="queryParams.type" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.et_parking_type"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
/>
|
||||||
|
</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="['system:parking:add']"
|
||||||
|
>新增</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="['system:parking:edit']"
|
||||||
|
>修改</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="['system:parking: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="['system:parking:export']"
|
||||||
|
>导出</el-button
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
@queryTable="getList"
|
||||||
|
></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
v-if="showtable"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="parkingList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
|
||||||
|
:cell-style="columnbackgroundStyle"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="id" align="center" prop="parkingId" />
|
||||||
|
<el-table-column label="名称" align="center" prop="parkingName" />
|
||||||
|
<el-table-column
|
||||||
|
label="误差距离"
|
||||||
|
align="center"
|
||||||
|
prop="error"
|
||||||
|
:formatter="formatDistance"
|
||||||
|
/>
|
||||||
|
<el-table-column label="类型" align="center" prop="type">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<dict-tag
|
||||||
|
:options="dict.type.et_parking_type"
|
||||||
|
:value="scope.row.type"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="照片" align="center" prop="picture" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<image-preview :src="scope.row.picture" :width="50" :height="50" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="状态" align="center" key="status">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-switch
|
||||||
|
v-model="scope.row.status"
|
||||||
|
active-value="0"
|
||||||
|
inactive-value="1"
|
||||||
|
@change="handleStatusChange(scope.row)"
|
||||||
|
></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- <el-table-column label="区域" align="center" prop="areaId" />-->
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
width="180"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="id" align="center" prop="parkingId">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div :ref="'row_' + scope.row.parkingId">{{ scope.row.parkingId }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
align="center"
|
||||||
|
class-name="small-padding fixed-width"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['system:parking:edit']"
|
||||||
|
>修改</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['system:parking: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"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
import globalConfig from "@/utils/config/globalConfig";
|
||||||
|
var polyEditor = "";
|
||||||
|
function calculateCenter(mapList) {
|
||||||
|
var total = mapList.length;
|
||||||
|
var X = 0,
|
||||||
|
Y = 0,
|
||||||
|
Z = 0;
|
||||||
|
mapList.map((item) => {
|
||||||
|
var lng = (item[0] * Math.PI) / 180;
|
||||||
|
var lat = (item[1] * Math.PI) / 180;
|
||||||
|
var x, y, z;
|
||||||
|
x = Math.cos(lat) * Math.cos(lng);
|
||||||
|
y = Math.cos(lat) * Math.sin(lng);
|
||||||
|
z = Math.sin(lat);
|
||||||
|
X += x;
|
||||||
|
Y += y;
|
||||||
|
Z += z;
|
||||||
|
});
|
||||||
|
X = X / total;
|
||||||
|
Y = Y / total;
|
||||||
|
Z = Z / total;
|
||||||
|
var Lng = Math.atan2(Y, X);
|
||||||
|
var Hyp = Math.sqrt(X * X + Y * Y);
|
||||||
|
var Lat = Math.atan2(Z, Hyp);
|
||||||
|
let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
|
||||||
|
return center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
import {
|
||||||
|
listParking,
|
||||||
|
getParking,
|
||||||
|
delParking,
|
||||||
|
addParking,
|
||||||
|
updateParking,
|
||||||
|
changeParkingStatus,
|
||||||
|
} from "@/api/system/parking";
|
||||||
|
import {
|
||||||
|
getArea,
|
||||||
|
optionselect as getAreaOptionselect,
|
||||||
|
} from "@/api/system/area";
|
||||||
|
export default {
|
||||||
|
name: "AreaMap",
|
||||||
|
dicts: ["et_parking_type"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
// polyEditor: null,
|
||||||
|
coordList: "",
|
||||||
|
timer: "",
|
||||||
|
status: true,
|
||||||
|
lon2: null,
|
||||||
|
lat2: null,
|
||||||
|
lon: "",
|
||||||
|
lat: "",
|
||||||
|
pathList: null,
|
||||||
|
areaId: null,
|
||||||
|
parkingList: [],
|
||||||
|
noParkingList: [],
|
||||||
|
noridingList: [],
|
||||||
|
show: false,
|
||||||
|
labels: [],
|
||||||
|
markers: [],
|
||||||
|
areaList: [],
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 停车区表格数据
|
||||||
|
parkingList: [],
|
||||||
|
// 默认区域id
|
||||||
|
defaultAreaId: "",
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 通过key重新渲染area-map组件
|
||||||
|
key: 0,
|
||||||
|
areaLon: null,
|
||||||
|
areaLat: null,
|
||||||
|
// 分区列表
|
||||||
|
areaOptions: [],
|
||||||
|
// 类型列表
|
||||||
|
typeOptions: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
parkingName: null,
|
||||||
|
areaId: null,
|
||||||
|
type: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
highlightedId: null, // 默认不高亮
|
||||||
|
showtable: true,
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
parkingName: [
|
||||||
|
{ required: true, message: "禁停区不能为空", trigger: "blur" },
|
||||||
|
],
|
||||||
|
type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
|
||||||
|
boundaryStr: [
|
||||||
|
{ required: true, message: "边界不能为空", trigger: "blur" },
|
||||||
|
],
|
||||||
|
error: [
|
||||||
|
{
|
||||||
|
pattern: /^[0-9]*$/,
|
||||||
|
message: "还车误差必须为正整数",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// props: ["pathList", "areaId","lon","lat","zoom"],
|
||||||
|
mounted() {
|
||||||
|
// if (this.areaId) {
|
||||||
|
// this.start();
|
||||||
|
// console.log("修改");
|
||||||
|
// } else {
|
||||||
|
// this.echart();
|
||||||
|
// console.log("添加");
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const areaId = this.$route.params && this.$route.params.areaId;
|
||||||
|
this.getArea(areaId);
|
||||||
|
this.getAreaList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getArea(areaId) {
|
||||||
|
getArea(areaId).then((response) => {
|
||||||
|
|
||||||
|
this.queryParams.areaId = response.data.areaId;
|
||||||
|
this.areaId = response.data.areaId;
|
||||||
|
this.lon = response.data.longitude;
|
||||||
|
this.lat = response.data.latitude;
|
||||||
|
this.areaList = response.data.boundaryStr;
|
||||||
|
this.defaultAreaId = response.data.areaId;
|
||||||
|
this.getList();
|
||||||
|
listParking({ areaId: this.areaId }).then((response) => {
|
||||||
|
let list = response.rows;
|
||||||
|
list.forEach((item) => {
|
||||||
|
if (item.type === "1") {
|
||||||
|
this.parkingList.push(item);
|
||||||
|
} else if (item.type === "2") {
|
||||||
|
this.noParkingList.push(item);
|
||||||
|
} else if (item.type === "3") {
|
||||||
|
this.noridingList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.initAMap();
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.showmap = true;
|
||||||
|
// this.initAMap();
|
||||||
|
// }, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
// this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
parkingId: null,
|
||||||
|
parkingName: null,
|
||||||
|
areaId: null,
|
||||||
|
boundaryStr: null,
|
||||||
|
longitude: null,
|
||||||
|
latitude: null,
|
||||||
|
createBy: null,
|
||||||
|
createTime: null,
|
||||||
|
type: "1",
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map((item) => item.parkingId);
|
||||||
|
this.single = selection.length !== 1;
|
||||||
|
this.multiple = !selection.length;
|
||||||
|
},
|
||||||
|
/** 查询字典类型列表 */
|
||||||
|
getAreaList() {
|
||||||
|
getAreaOptionselect().then((response) => {
|
||||||
|
this.areaOptions = response.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
formatDistance(row) {
|
||||||
|
if (typeof row.error === "number") {
|
||||||
|
return `${row.error} 米`;
|
||||||
|
} else {
|
||||||
|
return "-";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询停车区列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
listParking(this.queryParams).then((response) => {
|
||||||
|
this.parkingList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.defaultAreaId = this.queryParams.areaId;
|
||||||
|
getArea(this.defaultAreaId).then((response) => {
|
||||||
|
this.queryParams.areaId = response.data.areaId;
|
||||||
|
this.areaLon = response.data.longitude;
|
||||||
|
this.areaLat = response.data.latitude;
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setFitView() {
|
||||||
|
this.map.setFitView(null, false, [150, 60, 100, 60]);
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加停车区";
|
||||||
|
this.key++;
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const parkingId = row.parkingId || this.ids;
|
||||||
|
getParking(parkingId).then((response) => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.areaLon = response.data.longitude;
|
||||||
|
this.areaLat = response.data.latitude;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改停车区";
|
||||||
|
this.key++;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const parkingIds = row.parkingId || this.ids;
|
||||||
|
this.$modal
|
||||||
|
.confirm('是否确认删除停车区编号为"' + parkingIds + '"的数据项？')
|
||||||
|
.then(function () {
|
||||||
|
return delParking(parkingIds);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download(
|
||||||
|
"system/parking/export",
|
||||||
|
{
|
||||||
|
...this.queryParams,
|
||||||
|
},
|
||||||
|
`parking_${new Date().getTime()}.xlsx`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map((item) => item.parkingId);
|
||||||
|
this.single = selection.length !== 1;
|
||||||
|
this.multiple = !selection.length;
|
||||||
|
},
|
||||||
|
showMarkers() {
|
||||||
|
if (this.show) {
|
||||||
|
this.labels.forEach((label) => {
|
||||||
|
label.show();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.labels.forEach((label) => {
|
||||||
|
label.hide();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.show = !this.show;
|
||||||
|
const elements = document.querySelectorAll(".apiary-marker-name");
|
||||||
|
elements.forEach((element) => {
|
||||||
|
element.style.visibility = this.show ? "hidden" : "visible";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clearPolygon() {
|
||||||
|
this.status = false;
|
||||||
|
if (polyEditor) {
|
||||||
|
polyEditor.close(); // 关闭多边形编辑器
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除地图上的所有多边形对象
|
||||||
|
this.map.getAllOverlays("polygon").forEach((polygon) => {
|
||||||
|
this.map.remove(polygon);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 如果需要，也可以清空与多边形相关的其他状态或数据
|
||||||
|
this.coordList = "";
|
||||||
|
this.$emit("mapList", "");
|
||||||
|
|
||||||
|
this.$emit("center", "");
|
||||||
|
},
|
||||||
|
changeMapStyle() {
|
||||||
|
// 创建一个默认的图层组件
|
||||||
|
let defaultLayer = new AMap.TileLayer();
|
||||||
|
// 创建一个卫星图图层组件
|
||||||
|
let satelliteLayer = new AMap.TileLayer.Satellite();
|
||||||
|
let roadNetLayer = new AMap.TileLayer.RoadNet();
|
||||||
|
// 将默认图层添加到地图中
|
||||||
|
this.map.add(defaultLayer);
|
||||||
|
// 获取当前地图显示的图层
|
||||||
|
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
|
||||||
|
// 切换图层
|
||||||
|
if (this.type == "default") {
|
||||||
|
// console.log(1111111)
|
||||||
|
//获取地图图层数据
|
||||||
|
this.map.setLayers([defaultLayer]); // 切换回默认图层
|
||||||
|
this.type = "Satellite";
|
||||||
|
} else {
|
||||||
|
console.log(222222);
|
||||||
|
this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
|
||||||
|
this.type = "default";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
start() {
|
||||||
|
this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
|
||||||
|
},
|
||||||
|
async echart() {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
console.log("接收参数", this.pathList);
|
||||||
|
console.log("接收参数", this.lon);
|
||||||
|
console.log("接收参数", this.lat);
|
||||||
|
this.lon2 = this.lon === null ? 120.35218 : this.lon;
|
||||||
|
this.lat2 = this.lat === null ? 26.944335 : this.lat;
|
||||||
|
// console.log(typeof JSON.parse(this.pathList));
|
||||||
|
await AMapLoader.load({
|
||||||
|
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: [
|
||||||
|
"AMap.ToolBar",
|
||||||
|
"AMap.Driving",
|
||||||
|
"AMap.PolygonEditor",
|
||||||
|
"AMap.PlaceSearch",
|
||||||
|
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("container", {
|
||||||
|
//设置地图容器id
|
||||||
|
viewMode: "3D", //是否为3D地图模式
|
||||||
|
zoom: this.zoom ? this.zoom : 13, //初始化地图级别
|
||||||
|
center: [this.lon2, this.lat2], // 初始化地图中心点位置
|
||||||
|
});
|
||||||
|
|
||||||
|
this.parkingList.forEach((parking) => {
|
||||||
|
this.addParking(
|
||||||
|
JSON.parse(parking.boundaryStr) || [],
|
||||||
|
parking.parkingName,
|
||||||
|
parking.longitude,
|
||||||
|
parking.latitude
|
||||||
|
);
|
||||||
|
this.addMarker2(
|
||||||
|
parking,
|
||||||
|
"https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh",
|
||||||
|
parking.parkingName,
|
||||||
|
"#1890ff"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.noParkingList.forEach((noparking) => {
|
||||||
|
this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
|
||||||
|
this.addMarker2(
|
||||||
|
noparking,
|
||||||
|
"https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab",
|
||||||
|
noparking.parkingName,
|
||||||
|
"#ff4444"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.noridingList.forEach((noriding) => {
|
||||||
|
this.addNoriding(
|
||||||
|
JSON.parse(noriding.boundaryStr) || [],
|
||||||
|
noriding.parkingName,
|
||||||
|
noriding.longitude,
|
||||||
|
noriding.latitude
|
||||||
|
);
|
||||||
|
this.addMarker2(
|
||||||
|
noriding,
|
||||||
|
"https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2",
|
||||||
|
noriding.parkingName,
|
||||||
|
"#ffcc00"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
this.initEditor();
|
||||||
|
},
|
||||||
|
initAMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: globalConfig.aMap.key,
|
||||||
|
version: "2.0",
|
||||||
|
plugins: [
|
||||||
|
"AMap.ToolBar",
|
||||||
|
"AMap.Driving",
|
||||||
|
"AMap.PolygonEditor",
|
||||||
|
"AMap.PlaceSearch",
|
||||||
|
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("container", {
|
||||||
|
viewMode: "3D",
|
||||||
|
zoom: 13,
|
||||||
|
center: [this.lon, this.lat],
|
||||||
|
});
|
||||||
|
|
||||||
|
this.infoWindow = new AMap.InfoWindow({
|
||||||
|
offset: new AMap.Pixel(0, -30),
|
||||||
|
});
|
||||||
|
|
||||||
|
// this.deviceMarker(this.areaId);
|
||||||
|
|
||||||
|
// this.areaList.forEach(area => {
|
||||||
|
|
||||||
|
// });
|
||||||
|
this.addArea(JSON.parse(this.areaList) || []);
|
||||||
|
this.parkingList.forEach((parking) => {
|
||||||
|
this.addParking(
|
||||||
|
JSON.parse(parking.boundaryStr) || [],
|
||||||
|
parking.parkingName,
|
||||||
|
parking.longitude,
|
||||||
|
parking.latitude,
|
||||||
|
parking.parkingId
|
||||||
|
);
|
||||||
|
this.addMarker2(
|
||||||
|
parking,
|
||||||
|
"https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh",
|
||||||
|
parking.parkingName,
|
||||||
|
"#1890ff"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.noParkingList.forEach((noparking) => {
|
||||||
|
this.addNoParking(JSON.parse(noparking.boundaryStr) || [], noparking.parkingId);
|
||||||
|
this.addMarker2(
|
||||||
|
noparking,
|
||||||
|
"https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab",
|
||||||
|
noparking.parkingName,
|
||||||
|
"#ff4444"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.noridingList.forEach((noriding) => {
|
||||||
|
this.addNoriding(
|
||||||
|
JSON.parse(noriding.boundaryStr) || [],
|
||||||
|
noriding.parkingName,
|
||||||
|
noriding.longitude,
|
||||||
|
noriding.latitude,
|
||||||
|
noriding.parkingId
|
||||||
|
);
|
||||||
|
this.addMarker2(
|
||||||
|
noriding,
|
||||||
|
"https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2",
|
||||||
|
noriding.parkingName,
|
||||||
|
"#ffcc00"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addArea(data) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: "#ccebc5",
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: "#2b8cbe",
|
||||||
|
strokeWeight: 1,
|
||||||
|
strokeStyle: "dashed",
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
addParking(data, title, lon, lat, parkingId) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: "#ccebc5",
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: "#3b7ed9",
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeStyle: "solid",
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
polygon.on("mouseover", () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
fillColor: "#71b7cc",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on("mouseout", () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
fillColor: "#a7c1d0",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on("click", () => {
|
||||||
|
// 高亮显示对应的列表项
|
||||||
|
this.highlightRow(parkingId);
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
highlightRow(parkingId) {
|
||||||
|
this.$set(this, "highlightedId", parkingId);
|
||||||
|
this.showtable = false;
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.showtable = true;
|
||||||
|
|
||||||
|
// 确保高亮行的 DOM 已经渲染完成
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const rowElement = this.$refs['row_' + parkingId];
|
||||||
|
if (rowElement && rowElement[0]) {
|
||||||
|
rowElement[0].scrollIntoView({ behavior: "smooth", block: "center" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
columnbackgroundStyle({ row }) {
|
||||||
|
if (row.parkingId == this.highlightedId) {
|
||||||
|
//让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）
|
||||||
|
return "background:#f0f9eb;";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
addNoParking(data,parkingId) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: "#ccebc5",
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: "#ff0000",
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeStyle: "solid",
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
polygon.on("mouseover", () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
fillColor: "#ff0000",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on("mouseout", () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
fillColor: "#cc7b7b",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on("click", () => {
|
||||||
|
// 高亮显示对应的列表项
|
||||||
|
this.highlightRow(parkingId);
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
addMarker2(parking, icon, title, color) {
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
map: this.map,
|
||||||
|
icon: new AMap.Icon({
|
||||||
|
image: icon,
|
||||||
|
size: new AMap.Size(25, 36),
|
||||||
|
imageSize: new AMap.Size(25, 36),
|
||||||
|
}),
|
||||||
|
position: [parking.longitude, parking.latitude],
|
||||||
|
offset: new AMap.Pixel(-12.5, -36),
|
||||||
|
});
|
||||||
|
|
||||||
|
this.markers.push(marker);
|
||||||
|
|
||||||
|
let text = new AMap.Text({
|
||||||
|
text: title,
|
||||||
|
anchor: "center",
|
||||||
|
position: [parking.longitude, parking.latitude],
|
||||||
|
offset: new AMap.Pixel(0, -50),
|
||||||
|
style: {
|
||||||
|
"background-color": color,
|
||||||
|
border: "none",
|
||||||
|
"border-radius": "5px",
|
||||||
|
color: "white",
|
||||||
|
"font-size": "12px",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.add(text);
|
||||||
|
this.labels.push(text);
|
||||||
|
},
|
||||||
|
addNoriding(data, title, lon, lat,parkingId) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: "#ccebc5",
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: "#ffcc00",
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeStyle: "solid",
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
polygon.on("mouseover", () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
fillColor: "#FFEBA4FF",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on("mouseout", () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
fillColor: "#ffeba4",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on("click", () => {
|
||||||
|
// 高亮显示对应的列表项
|
||||||
|
this.highlightRow(parkingId);
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
initEditor() {
|
||||||
|
var path1 = [];
|
||||||
|
if (this.areaId) {
|
||||||
|
path1 = JSON.parse(this.pathList) || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
var polygon1 = new AMap.Polygon({
|
||||||
|
path: path1,
|
||||||
|
});
|
||||||
|
this.map.add([polygon1]);
|
||||||
|
polyEditor = new AMap.PolygonEditor(this.map);
|
||||||
|
// console.log(polyEditor);
|
||||||
|
// console.dir(polyEditor);
|
||||||
|
polyEditor.on("add", (data) => {
|
||||||
|
// console.log(data);
|
||||||
|
this.coordList = data.lnglat;
|
||||||
|
var polygon = data.target;
|
||||||
|
polygon.on("dblclick", () => {
|
||||||
|
polyEditor.setTarget(polygon);
|
||||||
|
polyEditor.open();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon1.on("dblclick", () => {
|
||||||
|
polyEditor.setTarget(polygon1);
|
||||||
|
polyEditor.open();
|
||||||
|
});
|
||||||
|
|
||||||
|
return polyEditor;
|
||||||
|
},
|
||||||
|
createPolygon() {
|
||||||
|
this.status = true;
|
||||||
|
polyEditor.close();
|
||||||
|
polyEditor.setTarget();
|
||||||
|
polyEditor.open();
|
||||||
|
},
|
||||||
|
editClose: function () {
|
||||||
|
// console.log("this", this);
|
||||||
|
|
||||||
|
let that = this;
|
||||||
|
polyEditor.on("end", function (event) {
|
||||||
|
// event.target 即为编辑后的多边形对象
|
||||||
|
//多边形的坐标
|
||||||
|
this.coordList = event.target.getPath();
|
||||||
|
// console.log("coordList", this.coordList);
|
||||||
|
let mapList = [];
|
||||||
|
this.coordList.forEach((v) => {
|
||||||
|
// console.log("v", v.lng, "--", v.lat);
|
||||||
|
mapList.push([v.lng, v.lat]);
|
||||||
|
});
|
||||||
|
let center = calculateCenter(mapList);
|
||||||
|
console.log(mapList, "mapListmapList");
|
||||||
|
that.$emit("mapList", mapList);
|
||||||
|
|
||||||
|
that.$emit("center", center);
|
||||||
|
});
|
||||||
|
polyEditor.close();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss'>
|
<style lang="scss" scoped>
|
||||||
.page{
|
#container {
|
||||||
margin-top: 200rpx;
|
width: 100%;
|
||||||
|
height: 30rem;
|
||||||
}
|
}
|
||||||
</style>
|
.input-card {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
.highlight-row {
|
||||||
|
background-color: #f0f9eb; /* 浅绿色背景 */
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid rgb(204, 204, 204);
|
||||||
|
padding-bottom: 50px;
|
||||||
|
.input-card-right {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
.input-card-left {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user