11
This commit is contained in:
parent
b6035b96d0
commit
13853473a0
235
src/components/AreaMap/index.vue
Normal file
235
src/components/AreaMap/index.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<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-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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "AreaMap",
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
// polyEditor: null,
|
||||
coordList: "",
|
||||
timer: "",
|
||||
status:true,
|
||||
lon2: null,
|
||||
lat2: null
|
||||
};
|
||||
},
|
||||
props: ["pathList", "dataId","lon","lat","zoom"],
|
||||
mounted() {
|
||||
if (this.dataId) {
|
||||
this.start();
|
||||
console.log("修改");
|
||||
} else {
|
||||
this.echart();
|
||||
console.log("添加");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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.map.setFitView();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
this.initEditor();
|
||||
|
||||
},
|
||||
initEditor() {
|
||||
var path1 = []
|
||||
if (this.dataId) {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
|
||||
.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>
|
||||
|
|
@ -129,6 +129,16 @@
|
|||
<!-- <el-form-item label="边界值" prop="boundaryStr">-->
|
||||
<!-- <el-input v-model="form.boundaryStr" type="textarea" placeholder="请输入内容" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<area-map
|
||||
:key="key"
|
||||
v-model="form.boundaryStr"
|
||||
:dataId="form.areaId"
|
||||
:pathList="form.boundaryStr"
|
||||
:lon="form.longitude"
|
||||
:lat="form.latitude"
|
||||
@center="center"
|
||||
@mapList="mapList"
|
||||
/>
|
||||
<el-form-item label="经度" prop="longitude">
|
||||
<el-input v-model="form.longitude" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
|
|
@ -160,10 +170,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import AreaMap from "@/components/AreaMap";
|
||||
import { listArea, getArea, delArea, addArea, updateArea } from "@/api/rl/area";
|
||||
|
||||
export default {
|
||||
name: "Area",
|
||||
components: { AreaMap },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
|
|
@ -200,6 +212,7 @@ export default {
|
|||
areaTimeStart: null,
|
||||
areaTimeEnd: null
|
||||
},
|
||||
key: 0,
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
|
|
@ -297,6 +310,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const areaIds = row.areaId || this.ids;
|
||||
|
|
@ -312,7 +326,16 @@ export default {
|
|||
this.download('system/area/export', {
|
||||
...this.queryParams
|
||||
}, `area_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
},
|
||||
center(data) {
|
||||
this.form.longitude = data.lng;
|
||||
this.form.latitude = data.lat;
|
||||
},
|
||||
mapList(data) {
|
||||
let mapListJson = JSON.stringify(data);
|
||||
console.log("mapListJson:" + mapListJson);
|
||||
this.form.boundaryStr = mapListJson;
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user