|
|
@@ -7,17 +7,28 @@ import { ref, onMounted, onUnmounted } from "vue";
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
import { convertPointToArray } from "@/utils/index";
|
|
|
+import { deepClone } from "@/common/commonFun";
|
|
|
|
|
|
const map = ref(null);
|
|
|
const mouseTool = ref(null);
|
|
|
const selectedArea = ref(null);
|
|
|
const selectedPoints = ref([]);
|
|
|
const allPoints = ref([]);
|
|
|
-const defalutIcon = ref(null)
|
|
|
-const activeIcon = ref(null)
|
|
|
-
|
|
|
-const defalutOffset = ref(null)
|
|
|
-const activeOffset = ref(null)
|
|
|
+const defalutAllPoints = ref([])
|
|
|
+
|
|
|
+// 自定义圆点样式
|
|
|
+const createMarkerContent = (color = 'rgba(0, 0, 0, 0.4)') => {
|
|
|
+ return `
|
|
|
+ <div style="
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background-color: ${color};
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ ">
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+}
|
|
|
|
|
|
// 初始化地图
|
|
|
const initMap = async () => {
|
|
|
@@ -30,7 +41,7 @@ const initMap = async () => {
|
|
|
// 创建地图实例
|
|
|
map.value = new AMap.Map("map-container", {
|
|
|
zoom: 18, // 初始缩放级别
|
|
|
- center: [113.6149629 ,23.58594117],
|
|
|
+ center: allPoints.value[0].lngLat,
|
|
|
layers: [
|
|
|
// 卫星
|
|
|
new AMap.TileLayer.Satellite(),
|
|
|
@@ -40,32 +51,35 @@ const initMap = async () => {
|
|
|
// 初始化 MouseTool
|
|
|
mouseTool.value = new AMap.MouseTool(map.value);
|
|
|
|
|
|
- defalutIcon.value = new AMap.Icon({
|
|
|
- // 图标的取图地址
|
|
|
- image: require('@/assets/images/map/status/defalut-icon.png'),
|
|
|
- // 图标所用图片大小
|
|
|
- imageSize: new AMap.Size(26, 26),
|
|
|
- });
|
|
|
- activeIcon.value = new AMap.Icon({
|
|
|
- // 图标的取图地址
|
|
|
- image: require('@/assets/images/map/status/active-icon.png'),
|
|
|
- // 图标所用图片大小
|
|
|
- imageSize: new AMap.Size(40, 40),
|
|
|
- });
|
|
|
-
|
|
|
- defalutOffset.value = new AMap.Pixel(-5, -5)
|
|
|
- activeOffset.value = new AMap.Pixel(-12, -14)
|
|
|
-
|
|
|
- // 添加示例点位
|
|
|
+ // // 添加点位
|
|
|
allPoints.value.forEach((point) => {
|
|
|
point.icon = new AMap.Marker({
|
|
|
position: point.lngLat,
|
|
|
map: map.value,
|
|
|
- icon:defalutIcon.value,
|
|
|
- offset: defalutOffset.value,
|
|
|
+ content: createMarkerContent(point.color),
|
|
|
+ offset: new AMap.Pixel(-7, -7),
|
|
|
});
|
|
|
point.type = 'defalutIcon'
|
|
|
+
|
|
|
+ // 绑定点击事件
|
|
|
+ point.icon.on('click', () => {
|
|
|
+ if(point.type === 'defalutIcon'){
|
|
|
+ point.icon.setContent(createMarkerContent('#FFD489')); // 修改颜色
|
|
|
+ point.type = 'activeIcon'
|
|
|
+ }else{
|
|
|
+ point.icon.setContent(createMarkerContent(point.color)); // 修改颜色
|
|
|
+ point.type = 'defalutIcon'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ defalutAllPoints.value.push(point)
|
|
|
});
|
|
|
+
|
|
|
+ const latLngs = allPoints.value.map(item =>item.icon)
|
|
|
+ map.value.setFitView(latLngs,{
|
|
|
+ padding: [0, 0, 0, 0], // 上下左右的边距
|
|
|
+ maxZoom: 18, // 最大缩放级别
|
|
|
+ })
|
|
|
startRectangleSelection()
|
|
|
|
|
|
// 监听框选完成事件
|
|
|
@@ -83,6 +97,14 @@ const initMap = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const resetData = () =>{
|
|
|
+ allPoints.value = defalutAllPoints.value
|
|
|
+ allPoints.value.forEach(item =>{
|
|
|
+ item.icon.setContent(createMarkerContent(item.color))
|
|
|
+ item.type = 'defalutIcon'
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
// 开始框选
|
|
|
const startRectangleSelection = () => {
|
|
|
if (mouseTool.value) {
|
|
|
@@ -101,11 +123,7 @@ const clearSelection = () => {
|
|
|
if (selectedArea.value) {
|
|
|
map.value.remove(selectedArea.value); // 移除框选区域
|
|
|
selectedArea.value = null;
|
|
|
- selectedPoints.value.forEach(item =>{
|
|
|
- item.icon.setIcon(defalutIcon.value)
|
|
|
- item.icon.setOffset(defalutOffset.value)
|
|
|
- item.type = 'defalutIcon'
|
|
|
- })
|
|
|
+ resetData()
|
|
|
selectedPoints.value = []; // 清空选中的点位
|
|
|
}
|
|
|
};
|
|
|
@@ -113,19 +131,16 @@ const clearSelection = () => {
|
|
|
// 检查框选区域内的点位
|
|
|
const checkPointsInArea = () => {
|
|
|
if (!selectedArea.value) return;
|
|
|
-
|
|
|
const bounds = selectedArea.value.getBounds(); // 获取框选区域的边界
|
|
|
selectedPoints.value = allPoints.value.filter((point) => {
|
|
|
return bounds.contains(point.lngLat); // 判断点位是否在框选区域内
|
|
|
});
|
|
|
selectedPoints.value.forEach(item =>{
|
|
|
if(item.type==='defalutIcon'){
|
|
|
- item.icon.setIcon(activeIcon.value)
|
|
|
- item.icon.setOffset(activeOffset.value)
|
|
|
+ item.icon.setContent(createMarkerContent('#FFD489'))
|
|
|
item.type = 'activeIcon'
|
|
|
}else{
|
|
|
- item.icon.setIcon(defalutIcon.value)
|
|
|
- item.icon.setOffset(defalutOffset.value)
|
|
|
+ item.icon.setContent(createMarkerContent(item.color))
|
|
|
item.type = 'defalutIcon'
|
|
|
}
|
|
|
})
|
|
|
@@ -133,6 +148,7 @@ const checkPointsInArea = () => {
|
|
|
eventBus.emit('map:list',arr)
|
|
|
};
|
|
|
|
|
|
+const speciesArr = ref([])
|
|
|
const getList = () =>{
|
|
|
const params = {
|
|
|
farmId:sessionStorage.getItem('farmId'),
|
|
|
@@ -140,23 +156,32 @@ const getList = () =>{
|
|
|
}
|
|
|
VE_API.variety.pointList(params).then(res =>{
|
|
|
allPoints.value = res.data.map(item =>{
|
|
|
+ const bgColor = speciesArr.value.filter(ele =>ele.speciesItemId === item.speciesItemId)
|
|
|
return{
|
|
|
...item,
|
|
|
+ color:bgColor[0].color,
|
|
|
lngLat:convertPointToArray(item.point)
|
|
|
}
|
|
|
})
|
|
|
- initMap();
|
|
|
+ initMap()
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function getSpeciesList(arr){
|
|
|
+ speciesArr.value = arr
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
// 组件挂载时初始化地图
|
|
|
onMounted(() => {
|
|
|
- getList()
|
|
|
eventBus.on('handle:clear',clearSelection)
|
|
|
+ eventBus.on('species:list',getSpeciesList)
|
|
|
});
|
|
|
|
|
|
onUnmounted(()=>{
|
|
|
- eventBus.off('handle:clear',clearSelection)
|
|
|
+ map.value.destroy()// 销毁地图实例以释放资源
|
|
|
+ eventBus.off('handle:clear',clearSelection)
|
|
|
+ eventBus.off('species:list',getSpeciesList)
|
|
|
})
|
|
|
</script>
|
|
|
|
wangsisi