This commit is contained in:
Sliverber 2024-07-24 10:10:26 +08:00
parent 0edaeb9761
commit d753972aeb
2 changed files with 216 additions and 0 deletions

View File

@ -204,6 +204,20 @@ export const dynamicRoutes = [
}
]
},
{
path: '/system/guide',
component: Layout,
hidden: true,
permissions: ['system:parking:list'],
children: [
{
path: 'index/:areaId(\\d+)',
component: () => import('@/views/system/area/guide'),
name: 'Data',
meta: { title: '导览地图', activeMenu: '/system/area' }
}
]
},
{
path: '/system/area-noriding',
component: Layout,

View File

@ -0,0 +1,202 @@
<template>
<div class="container">
<div class="input-card-right">
<div class="img">
<image-upload v-model="picture" />
</div>
<el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
点击右上角坐标
</el-button>
<el-button :style="bottomLeftCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('bottomLeft')">
点击左下角坐标
</el-button>
<el-button @click="generateMap" :disabled="!canGenerateMap">
生成导览地图
</el-button>
</div>
<!-- <el-table-column label="导览地图" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<router-link :to="'/system/guide/index/' + scope.row.areaId" class="link-type">
<span>去设置</span>
</router-link>
</template>
</el-table-column> -->
<div id="amap-container" class="map-container"></div>
<div class="coordinates">
<div v-if="topRightCoord">右上角: {{ topRightCoord }}</div>
<div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig';
import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
export default {
name: "NewPage",
data() {
return {
map: null,
clickType: null,
topRightCoord: null,
bottomLeftCoord: null,
markers: [],
picture: '',
buttonStyleActive: 'background-color: #409EFF; color: white;',
buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
};
},
computed: {
canGenerateMap() {
return this.picture && this.topRightCoord && this.bottomLeftCoord;
}
},
created() {
const areaId = this.$route.params && this.$route.params.areaId;
this.getArea(areaId);
// this.getAreaList();
},
mounted() {
this.initMap();
},
methods: {
/** 查询运营区域详细 */
getArea(areaId) {
getArea(areaId).then(response => {
this.queryParams.areaId = response.data.areaId;
this.areaLon = response.data.longitude;
this.areaLat = response.data.latitude;
this.defaultAreaId = response.data.areaId;
this.getList();
});
},
initMap() {
AMapLoader.load({
key: globalConfig.aMap.key,
version: "2.0",
plugins: [
"AMap.ToolBar",
"AMap.Driving",
"AMap.PolygonEditor",
"AMap.PlaceSearch",
],
}).then((AMap) => {
this.map = new AMap.Map("amap-container", {
viewMode: "3D",
zoom: 13,
});
this.map.setFitView();
this.map.on('click', this.handleMapClick);
}).catch((e) => {
console.error(e);
});
},
setClickType(type) {
this.clickType = type;
},
handleMapClick(event) {
const lnglat = event.lnglat;
if (this.clickType === 'topRight') {
this.topRightCoord = lnglat;
} else if (this.clickType === 'bottomLeft') {
this.bottomLeftCoord = lnglat;
}
//
const marker = new AMap.Marker({
position: lnglat,
});
this.map.add(marker);
this.markers.push(marker);
//
this.clickType = null;
},
clearMarkers() {
this.markers.forEach(marker => {
this.map.remove(marker);
});
this.markers = [];
this.topRightCoord = null;
this.bottomLeftCoord = null;
},
generateMap() {
if (!this.canGenerateMap) {
this.$message.error('请上传图片并选择两个坐标点');
return;
}
//
const lnglatToFixed = (lnglat) => ({
lng: lnglat.lng.toFixed(6),
lat: lnglat.lat.toFixed(6)
});
const topRight = lnglatToFixed(this.topRightCoord);
const bottomLeft = lnglatToFixed(this.bottomLeftCoord);
//
const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);
//
const imageLayer = new AMap.ImageLayer({
url: this.picture,
bounds: bounds,
zooms: [15, 20]
});
//
this.map.getLayers().forEach(layer => {
if (layer instanceof AMap.ImageLayer) {
this.map.remove(layer);
}
});
//
this.map.add(imageLayer);
}
},
};
</script>
<style scoped lang="scss">
.map-container {
width: 100%;
height: 90vh;
}
.container {
position: relative;
border: 1px solid rgb(204, 204, 204);
}
.input-card-right {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
// justify-content: center;
margin-bottom: 10px;
}
.img {
width: 150px;
height: 150px;
}
.coordinates {
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
}
</style>