|
|
@ -1,195 +1,110 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div id="mapview" ref="mapview" v-loading="mapSet.loading"/> |
|
|
|
<div id="mapview" ref="mapview" v-loading="mapState.loading"/> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
|
|
<script lang="ts" setup> |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'; |
|
|
|
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'; |
|
|
|
import { mapList, mapList1 } from './data'; |
|
|
|
import { largeHospitalMapList } from './data'; |
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
import medicalKit from '/@/assets/images/medical-kit.svg'; |
|
|
|
import medicalKit from '/@/assets/images/medical-kit.svg'; |
|
|
|
import redFlag from '/@/assets/images/redFlag.svg'; |
|
|
|
import redFlag from '/@/assets/images/redFlag.svg'; |
|
|
|
|
|
|
|
|
|
|
|
type resultType = { |
|
|
|
|
|
|
|
info: Array<undefined>; |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let MarkerCluster; |
|
|
|
|
|
|
|
let map; |
|
|
|
let map; |
|
|
|
|
|
|
|
let largeHospitalMarkerCluster; |
|
|
|
|
|
|
|
let smallHospitalMarkerCluster; |
|
|
|
|
|
|
|
let specimenMarkerCluster; |
|
|
|
|
|
|
|
|
|
|
|
const instance = getCurrentInstance(); |
|
|
|
const instance = getCurrentInstance(); |
|
|
|
|
|
|
|
const mapState = reactive({ |
|
|
|
const mapSet = reactive({ |
|
|
|
|
|
|
|
loading: true |
|
|
|
loading: true |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
/** 地图创建完成(动画关闭) */ |
|
|
|
// 地图创建完成(动画关闭) |
|
|
|
|
|
|
|
const complete = (): void => { |
|
|
|
const complete = (): void => { |
|
|
|
if (map) { |
|
|
|
map && map.on('complete', () => { |
|
|
|
map.on('complete', () => { |
|
|
|
mapState.loading = false; |
|
|
|
mapSet.loading = false; |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
onBeforeMount(() => { |
|
|
|
onBeforeMount(() => { |
|
|
|
if (!instance) return; |
|
|
|
if (!instance) return; |
|
|
|
const MapConfigure = { |
|
|
|
const mapConfig = { |
|
|
|
amapKey: 'f278d021a80dcf81f071aee5bff08804', |
|
|
|
amapKey: 'f278d021a80dcf81f071aee5bff08804', |
|
|
|
options: { |
|
|
|
options: { |
|
|
|
|
|
|
|
pitch:60, |
|
|
|
|
|
|
|
viewMode:'3D', |
|
|
|
resizeEnable: true, |
|
|
|
resizeEnable: true, |
|
|
|
center: [116.39,40.1], |
|
|
|
center: [112.919043,28.288623], |
|
|
|
zoom: 12 |
|
|
|
zoom: 16, |
|
|
|
|
|
|
|
keyboardEnable: true |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
let { options } = MapConfigure; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
AMapLoader.load({ |
|
|
|
AMapLoader.load({ |
|
|
|
key: MapConfigure.amapKey, |
|
|
|
key: mapConfig.amapKey, |
|
|
|
version: '2.0', |
|
|
|
version: '2.0', |
|
|
|
plugins: ['AMap.MarkerCluster','AMap.Driving'] |
|
|
|
plugins: ['AMap.MarkerCluster'] |
|
|
|
}).then(AMap => { |
|
|
|
}).then(AMap => { |
|
|
|
// 创建地图实例 |
|
|
|
// 创建地图实例 |
|
|
|
map = new AMap.Map(instance.refs.mapview, options); |
|
|
|
map = new AMap.Map(instance.refs.mapview, mapConfig.options); |
|
|
|
|
|
|
|
|
|
|
|
//地图中添加地图操作ToolBar插件 |
|
|
|
//地图中添加地图操作ToolBar插件 |
|
|
|
map.plugin(['AMap.ToolBar', 'AMap.MapType'], () => { |
|
|
|
map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => { |
|
|
|
|
|
|
|
// 地图操作工具条插件 |
|
|
|
map.addControl(new AMap.ToolBar()); |
|
|
|
map.addControl(new AMap.ToolBar()); |
|
|
|
//地图类型切换 |
|
|
|
// 组合了旋转,倾斜,复位,缩放插件 |
|
|
|
|
|
|
|
map.addControl(new AMap.ControlBar()); |
|
|
|
|
|
|
|
// 比例尺插件 |
|
|
|
|
|
|
|
const scale = new AMap.Scale(); |
|
|
|
|
|
|
|
scale.show(); |
|
|
|
|
|
|
|
map.addControl(scale); |
|
|
|
|
|
|
|
// 地图类型切换插件 |
|
|
|
map.addControl( |
|
|
|
map.addControl( |
|
|
|
new AMap.MapType({ |
|
|
|
new AMap.MapType({ |
|
|
|
defaultType: 0 |
|
|
|
defaultType: 1, |
|
|
|
|
|
|
|
showRoad: true |
|
|
|
}) |
|
|
|
}) |
|
|
|
); |
|
|
|
); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const marker1 = new AMap.Marker({ |
|
|
|
largeHospitalMarkerCluster = new AMap.MarkerCluster(map, [], { |
|
|
|
position: new AMap.LngLat(116.39,39.9), |
|
|
|
|
|
|
|
offset: new AMap.Pixel(-10, -10), |
|
|
|
|
|
|
|
content: `<img width="30px" height="30px" src="${hospital}">`, |
|
|
|
|
|
|
|
label: { |
|
|
|
|
|
|
|
direction: 'bottom', |
|
|
|
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
|
|
|
//设置文本标注内容 |
|
|
|
|
|
|
|
content: '<div>发单点</div>' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const marker2 = new AMap.Marker({ |
|
|
|
|
|
|
|
position: new AMap.LngLat(116.39,40), |
|
|
|
|
|
|
|
offset: new AMap.Pixel(-10, -10), |
|
|
|
|
|
|
|
content: `<img width="30px" height="30px" src="${medicalKit}">`, |
|
|
|
|
|
|
|
label: { |
|
|
|
|
|
|
|
direction: 'bottom', |
|
|
|
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
|
|
|
//设置文本标注内容 |
|
|
|
|
|
|
|
content: '<div>收样员</div>' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const marker3 = new AMap.Marker({ |
|
|
|
|
|
|
|
position: new AMap.LngLat(116.39,40.1), |
|
|
|
|
|
|
|
offset: new AMap.Pixel(-10, -10), |
|
|
|
|
|
|
|
content: `<img width="30px" height="30px" src="${redFlag}">`, |
|
|
|
|
|
|
|
label: { |
|
|
|
|
|
|
|
direction: 'bottom', |
|
|
|
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
|
|
|
//设置文本标注内容 |
|
|
|
|
|
|
|
content: '<div>医检机构</div>' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
map.add([marker1, marker2, marker3]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
MarkerCluster = new AMap.MarkerCluster(map, [], { |
|
|
|
|
|
|
|
// 聚合网格像素大小 |
|
|
|
// 聚合网格像素大小 |
|
|
|
gridSize: 80, |
|
|
|
gridSize: 80, |
|
|
|
maxZoom: 14, |
|
|
|
maxZoom: 14, |
|
|
|
renderMarker(ctx) { |
|
|
|
renderMarker(ctx) { |
|
|
|
let { marker, data } = ctx; |
|
|
|
let { marker, data } = ctx; |
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
const { driver, plateNumber, orientation } = data[0]; |
|
|
|
const { title, orientation } = data[0]; |
|
|
|
const content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`; |
|
|
|
const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${redFlag}'/>`; |
|
|
|
marker.setContent(content); |
|
|
|
marker.setContent(content); |
|
|
|
marker.setLabel({ |
|
|
|
marker.setLabel({ |
|
|
|
direction: 'bottom', |
|
|
|
direction: 'bottom', |
|
|
|
//设置文本标注偏移量 |
|
|
|
//设置文本标注偏移量 |
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
//设置文本标注内容 |
|
|
|
//设置文本标注内容 |
|
|
|
content: `<div> ${plateNumber}(${driver})</div>` |
|
|
|
content: `<div>${title}</div>` |
|
|
|
}); |
|
|
|
}); |
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
marker.on('click', ({ lnglat }) => { |
|
|
|
marker.on('click', ({ lnglat }) => { |
|
|
|
map.setZoom(13); //设置地图层级 |
|
|
|
//设置地图层级 |
|
|
|
|
|
|
|
map.setZoom(16); |
|
|
|
map.setCenter(lnglat); |
|
|
|
map.setCenter(lnglat); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const MarkerCluster1 = new AMap.MarkerCluster(map, [], { |
|
|
|
const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({ |
|
|
|
// 聚合网格像素大小 |
|
|
|
|
|
|
|
gridSize: 80, |
|
|
|
|
|
|
|
maxZoom: 14, |
|
|
|
|
|
|
|
renderMarker(ctx) { |
|
|
|
|
|
|
|
let { marker, data } = ctx; |
|
|
|
|
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
|
|
|
|
const { driver, plateNumber, orientation } = data[0]; |
|
|
|
|
|
|
|
const content = `<img width="60px" height="60px" 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> ${plateNumber}(${driver})</div>` |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
|
|
|
marker.on('click', ({ lnglat }) => { |
|
|
|
|
|
|
|
map.setZoom(13); //设置地图层级 |
|
|
|
|
|
|
|
map.setCenter(lnglat); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const points = mapList.map((v: any) => ({ |
|
|
|
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
|
|
|
|
...v |
|
|
|
|
|
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const points1 = mapList1.map((v: any) => ({ |
|
|
|
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
...v |
|
|
|
...v |
|
|
|
})); |
|
|
|
})); |
|
|
|
if (MarkerCluster) MarkerCluster.setData(points); |
|
|
|
|
|
|
|
MarkerCluster1.setData(points1); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var driving = new AMap.Driving({ |
|
|
|
|
|
|
|
// 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式 |
|
|
|
|
|
|
|
policy: AMap.DrivingPolicy.LEAST_TIME, |
|
|
|
|
|
|
|
// map 指定将路线规划方案绘制到对应的AMap.Map对象上 |
|
|
|
|
|
|
|
map: map, |
|
|
|
|
|
|
|
// panel 指定将结构化的路线详情数据显示的对应的DOM上,传入值需是DOM的ID |
|
|
|
|
|
|
|
panel: 'panel' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var points3 = [ |
|
|
|
if (largeHospitalMarkerCluster) largeHospitalMarkerCluster.setData(largeHospitalPoints); |
|
|
|
{ keyword: '北京市地震局(公交站)',city:'北京' }, |
|
|
|
|
|
|
|
{ keyword: '亦庄文化园(地铁站)',city:'北京' } |
|
|
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 搜索完成后,将自动绘制路线到地图上 |
|
|
|
|
|
|
|
driving.search(points3); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
complete(); |
|
|
|
complete(); |
|
|
|
}).catch(() => { |
|
|
|
}).catch(() => { |
|
|
|
mapSet.loading = false; |
|
|
|
mapState.loading = false; |
|
|
|
throw '地图加载失败,请重新加载'; |
|
|
|
throw '地图加载失败,请重新加载'; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
onUnmounted(() => { |
|
|
@ -198,29 +113,9 @@ onUnmounted(() => { |
|
|
|
map.destroy() && map.clearEvents('click'); |
|
|
|
map.destroy() && map.clearEvents('click'); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
|
|
|
|
.custom-content-marker { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
width: 25px; |
|
|
|
|
|
|
|
height: 34px; |
|
|
|
|
|
|
|
.close-btn { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: -6px; |
|
|
|
|
|
|
|
right: -8px; |
|
|
|
|
|
|
|
width: 15px; |
|
|
|
|
|
|
|
height: 15px; |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
background: #ccc; |
|
|
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
line-height: 15px; |
|
|
|
|
|
|
|
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#mapview { |
|
|
|
#mapview { |
|
|
|
height: calc(100vh - 86px); |
|
|
|
height: calc(100vh - 86px); |
|
|
|
} |
|
|
|
} |
|
|
|