234 lines
6.6 KiB
Vue
234 lines
6.6 KiB
Vue
<template>
|
||
<div class="mapBox" id="mapBox" ref="AMapRef"></div>
|
||
<div class="infowindows" ref="infoWindowPage" v-show="infoShow">
|
||
<div class="title flx-justify-between">
|
||
<span>{{ infoName }}</span>
|
||
<p @click="onClose">x</p>
|
||
</div>
|
||
<div class="info-top">
|
||
<div>项目负责人：{{ infoWindowData?.projectManage }}</div>
|
||
<div class="ellipsisName">项目地址：{{ infoWindowData.projectAddress }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="tsx" name="pieChart">
|
||
import { ref, onMounted, shallowRef, watch } from "vue";
|
||
import initAMap from "@/components/AMap/AMap";
|
||
import zhongkai from "../point.js";
|
||
import { BAR_MAP } from "element-plus";
|
||
import { mapstyle } from "../mapStyle.js";
|
||
const infoWindowPage = ref();
|
||
// 点击弹窗的时候将项目名字存下来
|
||
const infoName = ref("");
|
||
const infoShow = ref(false);
|
||
const AMapRef = ref();
|
||
const areas = zhongkai();
|
||
const map = ref<any>({});
|
||
const markerList = ref([]);
|
||
const infoWindowData = ref({
|
||
projectAddress: "",
|
||
projectManage: ""
|
||
});
|
||
const props = defineProps<{
|
||
projectData: Array<any>;
|
||
}>();
|
||
const setProjectData = async () => {
|
||
console.log("setProjectData");
|
||
if (AMapRef.value) {
|
||
addMarker();
|
||
}
|
||
};
|
||
watch(() => props.projectData, setProjectData, { deep: true });
|
||
//关闭信息窗体
|
||
const onClose = () => {
|
||
// BDMaps.value?.clearInfoWindow();
|
||
// showInfo 控制 弹窗的显示与关
|
||
markerList.value = props.projectData.map(item => ({ ...item, showInfo: false }));
|
||
infoShow.value = false;
|
||
};
|
||
// 调用地图
|
||
const mapData = async () => {
|
||
map.value = new BMapGL.Map("mapBox"); // 初始化地图
|
||
let point = new BMapGL.Point(114.272994, 23.032578); // 点位设置
|
||
map.value.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
|
||
map.value.enableScrollWheelZoom(true); // 设置可以鼠标滑动进行缩放
|
||
map.value.setMapStyleV2({
|
||
styleJson: mapstyle()
|
||
});
|
||
map.value.setMapType(BMAP_SATELLITE_MAP);
|
||
};
|
||
// 设置镂空面
|
||
// const setHoleArea = () => {
|
||
// var bd = new BMapGL.Boundary();
|
||
// bd.get("仲恺区", function (rs) {
|
||
// // console.log('外轮廓：', rs.boundaries[0])
|
||
// // console.log('内镂空：', rs.boundaries[1])
|
||
// var hole = new BMapGL.Polygon(rs.boundaries, {
|
||
// fillColor: "blue",
|
||
// fillOpacity: 0.2
|
||
// });
|
||
// map.value.addOverlay(hole);
|
||
// });
|
||
// };
|
||
//添加掩膜区域
|
||
const createArea = () => {
|
||
// 设置掩膜区域坐标点数组
|
||
let path = [];
|
||
areas.map(item => {
|
||
path.push(new BMapGL.Point(item[0], item[1]));
|
||
});
|
||
// 创建区域掩膜实例
|
||
var mapmask = new BMapGL.MapMask(path, {
|
||
showRegion: "inside", // 显示区域范围以内部分
|
||
isBuildingMask: true, // 楼块是否参与掩膜
|
||
isPoiMask: true, // poi标注是否参与掩膜
|
||
isMapMask: true // 底图是否参与掩膜
|
||
});
|
||
// 将区域掩膜添加到地图上，实现掩膜效果
|
||
map.value.addOverlay(mapmask);
|
||
};
|
||
//绘制掩膜多边形区域
|
||
const drawArea = () => {
|
||
// 设置区域坐标点数组
|
||
let path = [];
|
||
areas.map(item => {
|
||
path.push(new BMapGL.Point(item[0], item[1]));
|
||
});
|
||
// 创建区域掩膜实例
|
||
var polygon = new BMapGL.Polygon(path, {
|
||
fillColor: "white",
|
||
fillOpacity: 0,
|
||
strokeColor: "#fff",
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0
|
||
});
|
||
map.value.addOverlay(polygon);
|
||
};
|
||
// 地图增加坐标点
|
||
const addMarker = () => {
|
||
if (!props.projectData.length > 0) {
|
||
return;
|
||
}
|
||
const createMarkerImage = (state: string) => new URL(`../../../../../../assets/images/hzImg/xm/${state}`, import.meta.url).href; // 图片引入
|
||
let myIcon = new BMapGL.Icon(createMarkerImage("marker.png"), new BMapGL.Size(80, 80), {
|
||
imageSize: new BMapGL.Size(40, 40),
|
||
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
|
||
});
|
||
let point = new BMapGL.Point(114.316196, 23.011847); // 点位设置
|
||
let marker = new BMapGL.Marker(point, { icon: myIcon }); // 标记点
|
||
map.value.addOverlay(marker); // 添加标记点
|
||
//鼠标点击marker弹出自定义的信息窗体
|
||
marker.addEventListener("click", async function () {
|
||
// markerList.value = markerList.value.map(val =>
|
||
// val === item ? { ...item, showGif: true } : { ...val, showGif: false, showInfo: false }
|
||
// );
|
||
|
||
// const curr = markerList.value.find(item => item.showGif);
|
||
// console.log(curr);
|
||
// curr.showInfo = !curr.showInfo;
|
||
|
||
infoName.value = props.projectData[0].projectName;
|
||
// const res = await getproDetail({ projectId: item.projectId });
|
||
// @ts-expect-error
|
||
infoWindowData.value = props.projectData[0];
|
||
infoShow.value = true;
|
||
// const infowindow = new AMapRef.value.InfoWindow({
|
||
// isCustom: true, //使用自定义窗体
|
||
// content: infoWindowPage.value,
|
||
// offset: new AMap.Pixel(16, -45)
|
||
// });
|
||
|
||
// infowindow.open(map.value, marker.getPosition());
|
||
function createDOM() {
|
||
const img = infoWindowPage.value;
|
||
return img;
|
||
}
|
||
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
|
||
point: new BMapGL.Point(Number(114.272994) || 113, Number(23.032578) || 21),
|
||
opacity: 0.5,
|
||
map: map.value,
|
||
offsetY: -45,
|
||
offsetX: 16,
|
||
properties: {
|
||
title: "this is a title",
|
||
size: "100"
|
||
}
|
||
});
|
||
map.value.addOverlay(customOverlay);
|
||
// if (curr.showInfo) {
|
||
|
||
// // customOverlay.open(BDMaps.value, marker.getPosition());
|
||
// } else {
|
||
// // infoShow.value = false;
|
||
// onClose();
|
||
// }
|
||
});
|
||
};
|
||
// 坐标转换回调
|
||
const translateCallback = (data: any) => {
|
||
console.log(data, "77777777");
|
||
if (data.status === 0) {
|
||
let point = new BMapGL.Point(data.points[0].lng, data.points[0].lat); // 点位设置
|
||
let marker = new BMapGL.Marker(point);
|
||
map.value.centerAndZoom(point, 19); // 创建中心点并设置初始所放值
|
||
map.value.addOverlay(marker);
|
||
}
|
||
};
|
||
onMounted(async () => {
|
||
console.log("onMounted");
|
||
await mapData();
|
||
addMarker();
|
||
drawArea();
|
||
// setHoleArea();
|
||
createArea();
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.mapBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.infowindows {
|
||
width: 450px;
|
||
padding: 0 20px;
|
||
color: white;
|
||
font-size: 20px;
|
||
// background: rgba(255 255 255 / 80%);
|
||
background: #03070e;
|
||
// opacity: 1;
|
||
border-radius: 20px;
|
||
box-shadow: 0 4px 4px 0 rgb(0 55 143 / 20%);
|
||
padding-bottom: 15px;
|
||
border: 1px solid white;
|
||
.title {
|
||
height: 70px;
|
||
font-family: "siyuan_Bold";
|
||
span {
|
||
font-size: 28px;
|
||
color: white;
|
||
}
|
||
p {
|
||
color: #a8abb2;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.info-top {
|
||
font-family: "siyuan_Medium";
|
||
.card {
|
||
width: 120px;
|
||
height: 62px;
|
||
margin: 6px 0;
|
||
margin-right: 20px;
|
||
border: 1px solid #ebebeb;
|
||
background: rgba(255 255 255 / 60%);
|
||
// box-shadow: 0px 4px 4px 0px rgba(0, 55, 143, 0.2);
|
||
overflow: hidden;
|
||
:nth-child(2) {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|