diff --git a/kicc-ui/src/assets/images/hospital-twinkle.gif b/kicc-ui/src/assets/images/hospital-twinkle.gif
new file mode 100644
index 00000000..cd6579eb
Binary files /dev/null and b/kicc-ui/src/assets/images/hospital-twinkle.gif differ
diff --git a/kicc-ui/src/components/AMap/src/Amap.vue b/kicc-ui/src/components/AMap/src/Amap.vue
index c890e508..dc3e753d 100644
--- a/kicc-ui/src/components/AMap/src/Amap.vue
+++ b/kicc-ui/src/components/AMap/src/Amap.vue
@@ -7,6 +7,7 @@
import { largeHospitalMapList, smallHospitalMapList, specimenMapList } from './data';
import hospital from '/@/assets/images/hospital.svg';
import medicalKit from '/@/assets/images/medical-kit.svg';
+ import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
import redFlag from '/@/assets/images/redFlag.svg';
let map;
@@ -36,7 +37,7 @@
viewMode:'3D',
resizeEnable: true,
center: [112.919043,28.288623],
- zoom: 16,
+ zoom: 17,
keyboardEnable: true
}
};
@@ -44,7 +45,7 @@
AMapLoader.load({
key: mapConfig.amapKey,
version: '2.0',
- plugins: ['AMap.MarkerCluster']
+ plugins: ['AMap.MarkerCluster', 'AMap.RectangleEditor', 'AMap.Driving']
}).then(AMap => {
// 创建地图实例
map = new AMap.Map(instance.refs.mapview, mapConfig.options);
@@ -102,7 +103,7 @@
});
largeHospitalMarkerCluster.on('click', ctx => {
const { lnglat } = ctx;
- map.setZoomAndCenter(17, lnglat);
+ map.setZoomAndCenter(18, lnglat);
});
const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({
lnglat: [v.lng, v.lat],
@@ -117,9 +118,11 @@
renderMarker(ctx) {
const { marker, data } = ctx;
if (Array.isArray(data) && data[0]) {
- const { title, orientation } = data[0];
- const content = `
`;
- marker.setContent(content);
+ const { title, orientation, southWest, northEast, notify } = data[0];
+ let content = ``;
marker.setLabel({
direction: 'bottom',
// 设置文本标注偏移量
@@ -128,11 +131,48 @@
content: `${title}
`
});
marker.setOffset(new AMap.Pixel(-18, -10));
+ if (notify && southWest?.length>0 && northEast?.length>0) {
+ // 下级医院通知画布图层
+ const canvas = document.createElement('canvas');
+ canvas.width = canvas.height = 200;
+ const context = canvas.getContext('2d');
+ context.fillStyle = 'rgb(0,100,255)';
+ context.strokeStyle = 'white';
+ context.globalAlpha = 1;
+ context.lineWidth = 1;
+ let radious = 0;
+ const draw = function () {
+ context.clearRect(0, 0, 200, 200);
+ context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
+ radious = (radious + 1) % 100;
+ context.beginPath();
+ context.arc(100, 100, radious, 0, 2 * Math.PI);
+ context.fill();
+ context.stroke();
+ // 刷新渲染图层
+ canvasLayer.reFresh();
+ AMap.Util.requestAnimFrame(draw);
+ };
+ const canvasLayer = new AMap.CanvasLayer({
+ canvas: canvas,
+ bounds: new AMap.Bounds(southWest, northEast)
+ });
+ map.addLayer(canvasLayer);
+ draw();
+ content = `
`;
+ }
+ marker.setContent(content);
}
},
renderClusterMarker(ctx) {
const { clusterData, marker, count } = ctx;
- const content = ``;
+ let content = ``;
+ if(clusterData.some(item => item.notify && item.southWest?.length>0 && item.northEast?.length>0)){
+ content = ``;
+ }
marker.setContent(content);
const title = count == 1 ? clusterData[0].title : `下级医院数量:${count}`;
marker.setLabel({
@@ -147,7 +187,7 @@
});
smallHospitalMarkerCluster.on('click', ctx => {
const { lnglat } = ctx;
- map.setZoomAndCenter(17, lnglat);
+ map.setZoomAndCenter(18, lnglat);
});
const smallHospitalPoints = smallHospitalMapList.map((v: any) => ({
lnglat: [v.lng, v.lat],
@@ -192,7 +232,7 @@
});
specimenMarkerCluster.on('click', ctx => {
const { lnglat } = ctx;
- map.setZoomAndCenter(17, lnglat);
+ map.setZoomAndCenter(18, lnglat);
});
const specimenPoints = specimenMapList.map((v: any) => ({
lnglat: [v.lng, v.lat],
@@ -200,6 +240,40 @@
}));
specimenMarkerCluster?.setData(specimenPoints);
+ // 矩形区域绘制计算出位置
+ /*const southWest = new AMap.LngLat(112.916931,28.283041);
+ const northEast = new AMap.LngLat(112.919049,28.284781);
+ const bounds = new AMap.Bounds(southWest, northEast);
+ const rectangle = new AMap.Rectangle({
+ bounds: bounds,
+ strokeColor:'red',
+ strokeWeight: 6,
+ strokeOpacity:0.5,
+ strokeDasharray: [30,10],
+ strokeStyle: 'dashed',
+ fillColor:'blue',
+ fillOpacity:0.5,
+ cursor:'pointer',
+ zIndex:50
+ });
+ rectangle.setMap(map);
+ map.setFitView([rectangle]);
+ const rectangleEditor = new AMap.RectangleEditor(map, rectangle);
+ rectangleEditor.open();*/
+
+ // 构造路线导航类
+ const driving = new AMap.Driving({
+ map: map,
+ panel: 'panel'
+ });
+ // 根据起终点经纬度规划驾车导航路线
+ driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
+ if (status === 'complete') {
+ console.log('绘制驾车路线完成');
+ } else {
+ console.error('获取驾车数据失败：' + result);
+ }
+ });
// 加载完毕
complete();
@@ -227,12 +301,13 @@
border: none !important;
}
-:deep .amap-logo {
+:deep(.amap-logo) {
display: none!important;
}
-:deep .amap-copyright {
+:deep(.amap-copyright) {
bottom:-100px;
display: none!important;
}
+
diff --git a/kicc-ui/src/components/AMap/src/data.ts b/kicc-ui/src/components/AMap/src/data.ts
index 67497644..939e4190 100644
--- a/kicc-ui/src/components/AMap/src/data.ts
+++ b/kicc-ui/src/components/AMap/src/data.ts
@@ -10,6 +10,9 @@ type mapType = {
orientation: number;
lng: number;
lat: number;
+ southWest: number[];
+ northEast: number[];
+ notify: boolean;
};
export const largeHospitalMapList: mapType[] = [
@@ -19,13 +22,13 @@ export const largeHospitalMapList: mapType[] = [
];
export const smallHospitalMapList: mapType[] = [
- {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891},
- {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991},
- {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991}
+ {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, southWest: [112.916931,28.283041], northEast: [112.919049,28.284781], notify: true},
+ {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, southWest: [112.917838,28.282044], northEast: [112.919956,28.283784], notify: true},
+ {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, southWest: [112.917033,28.281883], northEast: [112.919151,28.283623], notify: true}
];
export const specimenMapList: mapType[] = [
{title: '收样员:小明', orientation: 0, lng: 112.915897, lat: 28.295506},
{title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977},
- {title: '收样员:小易', orientation: 0, lng: 112.913864, lat: 28.295114}
+ {title: '收样员:小测', orientation: 0, lng: 112.913864, lat: 28.295114}
];
diff --git a/kicc-ui/src/main.ts b/kicc-ui/src/main.ts
index 74c29906..4cc66984 100644
--- a/kicc-ui/src/main.ts
+++ b/kicc-ui/src/main.ts
@@ -50,6 +50,11 @@ async function bootstrap() {
await router.isReady();
app.mount('#app', true);
+
+ // 高德地图安全配置
+ window._AMapSecurityConfig = {
+ securityJsCode: 'ea9d5e2fb6383665de6c3c7b4e53c289'
+ };
}
void bootstrap();