From e795e587d7bd51448d0c71ebb2e0200263ccfaa5 Mon Sep 17 00:00:00 2001 From: wangxiang <1827945911@qq.com> Date: Tue, 24 May 2022 14:07:33 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=88=20=E7=BC=96=E5=86=99=E9=AB=98?= =?UTF-8?q?=E5=BE=B7=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- kicc-ui/src/components/AMap/src/Amap.vue | 99 +++++++----------------- kicc-ui/src/components/AMap/src/data.ts | 8 +- 2 files changed, 31 insertions(+), 76 deletions(-) diff --git a/kicc-ui/src/components/AMap/src/Amap.vue b/kicc-ui/src/components/AMap/src/Amap.vue index 5fe06902..0b17fb77 100644 --- a/kicc-ui/src/components/AMap/src/Amap.vue +++ b/kicc-ui/src/components/AMap/src/Amap.vue @@ -13,7 +13,13 @@ ‹

›

- +
+ + + + + +
@@ -26,15 +32,19 @@ import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif'; import redFlag from '/@/assets/images/redFlag.svg'; import { PageWrapper } from '/@/components/Page'; + import { Form } from 'ant-design-vue'; let map; let largeHospitalMarkerCluster; let smallHospitalMarkerCluster; let specimenMarkerCluster; + const AForm = Form; + const AFormItem = Form.Item; + const instance = getCurrentInstance(); const mapState = reactive({ - loading: true, + loading: false, toggleOperatePanelClass: { span: 'none', p: 'block', @@ -42,14 +52,6 @@ }, toggleStatus: true }); - /** 地图创建完成(动画关闭) */ - const complete = (): void => { - if (map) { - map.on('complete', () => { - mapState.loading = false; - }); - } - }; onBeforeMount(() => { if (!instance) return; @@ -64,7 +66,7 @@ keyboardEnable: true } }; - + mapState.loading = true; AMapLoader.load({ key: mapConfig.amapKey, version: '2.0', @@ -142,11 +144,8 @@ renderMarker(ctx) { const { marker, data } = ctx; if (Array.isArray(data) && data[0]) { - const { title, orientation, southWest, northEast, notify } = data[0]; - let content = ``; + const { title, orientation, notify } = data[0]; + let content = ``; marker.setLabel({ direction: 'bottom', // 设置文本标注偏移量 @@ -155,38 +154,8 @@ 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 = ``; + if (notify) { + content = ``; } marker.setContent(content); } @@ -194,7 +163,7 @@ renderClusterMarker(ctx) { const { clusterData, marker, count } = ctx; let content = ``; - if(clusterData.some(item => item.notify && item.southWest?.length>0 && item.northEast?.length>0)){ + if(clusterData.some(item => item.notify)){ content = ``; } marker.setContent(content); @@ -264,27 +233,6 @@ })); 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, @@ -313,10 +261,19 @@ onUnmounted(() => { if (map) { // 销毁地图实例 - map.destroy() && map.clearEvents('click'); + map.destroy() && map.clearEvents(); } }); + /** 地图创建完成(动画关闭) */ + function complete () { + if (map) { + map.on('complete', () => { + mapState.loading = false; + }); + } + } + /** 处理切换操作面板 */ function toggleOperatePanel() { mapState.toggleStatus = !mapState.toggleStatus; diff --git a/kicc-ui/src/components/AMap/src/data.ts b/kicc-ui/src/components/AMap/src/data.ts index ebc3bd93..1fdc3216 100644 --- a/kicc-ui/src/components/AMap/src/data.ts +++ b/kicc-ui/src/components/AMap/src/data.ts @@ -10,8 +10,6 @@ type mapType = { orientation: number; lng: number; lat: number; - southWest: number[]; - northEast: number[]; notify: boolean; }; @@ -22,9 +20,9 @@ export const largeHospitalMapList: mapType[] = [ ]; export const smallHospitalMapList: mapType[] = [ - {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} + {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, notify: true}, + {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, notify: true}, + {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true} ]; export const specimenMapList: mapType[] = [