Browse Source

👈 编写高德地图组件

master
wangxiang 3 years ago
parent
commit
5760d935c8
  1. 219
      kicc-ui/src/components/AMap/src/Amap.vue
  2. 26
      kicc-ui/src/components/AMap/src/data.ts

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

@ -1,226 +1,121 @@
<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 = { let map;
info: Array<undefined>; let largeHospitalMarkerCluster;
}; let smallHospitalMarkerCluster;
let specimenMarkerCluster;
let MarkerCluster;
let map; const instance = getCurrentInstance();
const mapState = reactive({
const instance = getCurrentInstance();
const mapSet = reactive({
loading: true loading: true
});
// ()
const complete = (): void => {
if (map) {
map.on('complete', () => {
mapSet.loading = false;
}); });
} /** 地图创建完成(动画关闭) */
}; const complete = (): void => {
map && map.on('complete', () => {
mapState.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,
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='${hospital}'/>`;
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 MarkerCluster1 = 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='${medicalKit}'/>`; 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 largeHospitalPoints = largeHospitalMapList.map((v: any) => ({
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 线DOMDOMID
panel: 'panel'
});
var points3 = [
{ keyword: '北京市地震局(公交站)',city:'北京' },
{ keyword: '亦庄文化园(地铁站)',city:'北京' }
];
// 线 if (largeHospitalMarkerCluster) largeHospitalMarkerCluster.setData(largeHospitalPoints);
driving.search(points3);
complete(); complete();
}).catch(() => { }).catch(() => {
mapSet.loading = false; mapState.loading = false;
throw '地图加载失败,请重新加载'; throw '地图加载失败,请重新加载';
}); });
});
onUnmounted(() => { });
onUnmounted(() => {
if (map) { if (map) {
// //
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);
} }

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

@ -1,25 +1,19 @@
/**
* @program: kicc-ui
* @description:
* @author: entfrm开发团队-
* @create: 2022/5/22
*/
type mapType = { type mapType = {
plateNumber: string; title: string;
driver: string;
orientation: number; orientation: number;
lng: number; lng: number;
lat: number; lat: number;
'orientation|1-360'?: number;
'lng|113-114.1-10'?: number;
'lat|34-35.1-10'?: number;
}; };
export const mapList: mapType[] = [ export const largeHospitalMapList: mapType[] = [
{plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 114.893657, lat: 35.289}, {title: '上级医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
{plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 114.71, lat: 34.5394614}, {title: '上级医院:测试2', orientation: 0, lng: 114.71, lat: 34.5394614}
{plateNumber: '豫A90026H', driver: '马洋', orientation: 0, lng: 114.72888, lat: 35.4585},
{plateNumber: '豫A20644R', driver: '孙洋', orientation: 0, lng: 114.1722778, lat: 35.340310104},
{plateNumber: '豫A97973Y', driver: '朱丽', orientation: 0, lng: 113.72223, lat: 35.68455},
{plateNumber: '豫A76379B', driver: '蒋强', orientation: 0, lng: 114.379, lat: 34.36825}
]; ];
export const mapList1: mapType[] = [
{plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 119.893657, lat: 35.289},
{plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 111.71, lat: 34.5394614}
];

Loading…
Cancel
Save