|
|
|
@ -4,7 +4,7 @@
@@ -4,7 +4,7 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
|
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'; |
|
|
|
|
import { largeHospitalMapList } from './data'; |
|
|
|
|
import { largeHospitalMapList, smallHospitalMapList, specimenMapList } from './data'; |
|
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
|
import medicalKit from '/@/assets/images/medical-kit.svg'; |
|
|
|
|
import redFlag from '/@/assets/images/redFlag.svg'; |
|
|
|
@ -48,7 +48,6 @@
@@ -48,7 +48,6 @@
|
|
|
|
|
}).then(AMap => { |
|
|
|
|
// 创建地图实例 |
|
|
|
|
map = new AMap.Map(instance.refs.mapview, mapConfig.options); |
|
|
|
|
//地图中添加地图操作ToolBar插件 |
|
|
|
|
map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => { |
|
|
|
|
// 地图操作工具条插件 |
|
|
|
|
map.addControl(new AMap.ToolBar()); |
|
|
|
@ -66,8 +65,8 @@
@@ -66,8 +65,8 @@
|
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 上级医检医院标记点 |
|
|
|
|
largeHospitalMarkerCluster = new AMap.MarkerCluster(map, [], { |
|
|
|
|
// 聚合网格像素大小 |
|
|
|
|
gridSize: 80, |
|
|
|
|
maxZoom: 14, |
|
|
|
|
renderMarker(ctx) { |
|
|
|
@ -78,17 +77,12 @@
@@ -78,17 +77,12 @@
|
|
|
|
|
marker.setContent(content); |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
// 设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
//设置文本标注内容 |
|
|
|
|
// 设置文本标注内容 |
|
|
|
|
content: `<div>${title}</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
marker.on('click', ({ lnglat }) => { |
|
|
|
|
//设置地图层级 |
|
|
|
|
map.setZoom(16); |
|
|
|
|
map.setCenter(lnglat); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
renderClusterMarker(ctx) { |
|
|
|
@ -98,21 +92,17 @@
@@ -98,21 +92,17 @@
|
|
|
|
|
const title = count == 1 ? clusterData[0].title : `上级医检医院数量:${count}`; |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
// 设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
//设置文本标注内容 |
|
|
|
|
// 设置文本标注内容 |
|
|
|
|
content: `<div>${title}</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
marker.on('click', ({ lnglat }) => { |
|
|
|
|
//设置地图层级 |
|
|
|
|
map.setZoom(16); |
|
|
|
|
map.setCenter(lnglat); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
largeHospitalMarkerCluster.on('click', (data) => { |
|
|
|
|
console.log('数据查看:',data); |
|
|
|
|
largeHospitalMarkerCluster.on('click', ctx => { |
|
|
|
|
const { lnglat } = ctx; |
|
|
|
|
map.setZoomAndCenter(17, lnglat); |
|
|
|
|
}); |
|
|
|
|
const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({ |
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
@ -120,6 +110,99 @@
@@ -120,6 +110,99 @@
|
|
|
|
|
})); |
|
|
|
|
largeHospitalMarkerCluster?.setData(largeHospitalPoints); |
|
|
|
|
|
|
|
|
|
// 下级医院标记点 |
|
|
|
|
smallHospitalMarkerCluster = new AMap.MarkerCluster(map, [], { |
|
|
|
|
gridSize: 80, |
|
|
|
|
maxZoom: 14, |
|
|
|
|
renderMarker(ctx) { |
|
|
|
|
const { marker, data } = ctx; |
|
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
|
const { title, orientation } = data[0]; |
|
|
|
|
const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`; |
|
|
|
|
marker.setContent(content); |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
// 设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
// 设置文本标注内容 |
|
|
|
|
content: `<div>${title}</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
renderClusterMarker(ctx) { |
|
|
|
|
const { clusterData, marker, count } = ctx; |
|
|
|
|
const content = `<img width="30px" height="30px" src='${hospital}'/>`; |
|
|
|
|
marker.setContent(content); |
|
|
|
|
const title = count == 1 ? clusterData[0].title : `下级医院数量:${count}`; |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
// 设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
// 设置文本标注内容 |
|
|
|
|
content: `<div>${title}</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
smallHospitalMarkerCluster.on('click', ctx => { |
|
|
|
|
const { lnglat } = ctx; |
|
|
|
|
map.setZoomAndCenter(17, lnglat); |
|
|
|
|
}); |
|
|
|
|
const smallHospitalPoints = smallHospitalMapList.map((v: any) => ({ |
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
|
...v |
|
|
|
|
})); |
|
|
|
|
smallHospitalMarkerCluster?.setData(smallHospitalPoints); |
|
|
|
|
|
|
|
|
|
// 收样员标记点 |
|
|
|
|
specimenMarkerCluster = new AMap.MarkerCluster(map, [], { |
|
|
|
|
gridSize: 80, |
|
|
|
|
maxZoom: 14, |
|
|
|
|
renderMarker(ctx) { |
|
|
|
|
const { marker, data } = ctx; |
|
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
|
const { title, orientation } = data[0]; |
|
|
|
|
const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${medicalKit}'/>`; |
|
|
|
|
marker.setContent(content); |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
// 设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
// 设置文本标注内容 |
|
|
|
|
content: `<div>${title}</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
renderClusterMarker(ctx) { |
|
|
|
|
const { clusterData, marker, count } = ctx; |
|
|
|
|
const content = `<img width="30px" height="30px" src='${medicalKit}'/>`; |
|
|
|
|
marker.setContent(content); |
|
|
|
|
const title = count == 1 ? clusterData[0].title : `收样员数量:${count}`; |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
// 设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
// 设置文本标注内容 |
|
|
|
|
content: `<div>${title}</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
specimenMarkerCluster.on('click', ctx => { |
|
|
|
|
const { lnglat } = ctx; |
|
|
|
|
map.setZoomAndCenter(17, lnglat); |
|
|
|
|
}); |
|
|
|
|
const specimenPoints = specimenMapList.map((v: any) => ({ |
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
|
...v |
|
|
|
|
})); |
|
|
|
|
specimenMarkerCluster?.setData(specimenPoints); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 加载完毕 |
|
|
|
|
complete(); |
|
|
|
|
}).catch(error => { |
|
|
|
|