Browse Source

👈 编写高德地图组件

master
wangxiang 3 years ago
parent
commit
144dd9e666
  1. 121
      kicc-ui/src/components/AMap/src/Amap.vue
  2. 17
      kicc-ui/src/components/AMap/src/data.ts

121
kicc-ui/src/components/AMap/src/Amap.vue

@ -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 => {

17
kicc-ui/src/components/AMap/src/data.ts

@ -13,8 +13,19 @@ type mapType = { @@ -13,8 +13,19 @@ type mapType = {
};
export const largeHospitalMapList: mapType[] = [
{title: '上级医检医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
{title: '上级医检医院:测试2', orientation: 0, lng: 112.919165, lat: 28.289924},
{title: '上级医检医院:测试3', orientation: 0, lng: 112.919165, lat: 29.289924}
{title: '上级医检医院:金域', orientation: 0, lng: 112.919043, lat: 28.288623},
{title: '上级医检医院:康来', orientation: 0, lng: 112.919165, lat: 28.289924},
{title: '上级医检医院:附一', orientation: 0, lng: 112.919965, lat: 28.289924}
];
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}
];
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}
];

Loading…
Cancel
Save