增加地图元素清空功能,完成附近医院路线规划功能

This commit is contained in:
zk
2024-05-23 15:05:34 +08:00
parent 1599ffd6d8
commit 0eb5fad72f
11 changed files with 611 additions and 31 deletions
+149 -2
View File
@@ -2,7 +2,7 @@ import AMapLoader from '@amap/amap-jsapi-loader';
import china from '/@/assets/lngLat/china.ts';
import chinaInner from '/@/assets/lngLat/chinaInner.ts';
import { createCircle, createIcon, getCenter, getLonLat, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
import { aircraftContent, alarmIcon, female, male } from '/@/components/chinaMap/chinaHooks.ts';
import { isFunction } from '/@/utils/is.ts';
import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts';
import { defaultOption, getZoom, mapKey, mapPlugin } from '/@/assets/mapUtils/mapConstant.ts';
@@ -17,6 +17,8 @@ export const Map = {
placeSearch: null, //地点查询
marker: null, // 健康终端报警
infoWindow: null, //地图弹窗
driveLine: null, // 导航轨迹线
emergencyMarker: null, // 应急人员marker
/**
* @desc 地图舒适化
* @param el dom元素 id选择器
@@ -31,7 +33,6 @@ export const Map = {
}).then((res) => {
AMap = res;
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
console.log(zoom, center);
//基本地图加载
this.map = new AMap.Map(el, {
resizeEnable: true,
@@ -314,4 +315,150 @@ export const Map = {
this.infoWindow = null;
}
},
/**
* @desc 计算两个坐标点的距离
* @param {Array} listA 坐标点数组
* @param {Array} listB 坐标点数组
* @return {Number} 距离
*/
getDistance(listA: number[], listB: number[]) {
let lnglatA = new AMap.LngLat(listA[0], listA[1]);
let lnglatB = new AMap.LngLat(listB[0], listB[1]);
return lnglatA.distance(lnglatB);
},
/**
* @desc 计算两个坐标点的驾车时间
* @param {Array} listA 坐标点数组
* @param {Array} listB 坐标点数组
* @param {Function} callback 回调
* @return {Number} 时间
*/
getDriveTime(listA: number[], listB: number[], callback?: Callback) {
let lnglatA = new AMap.LngLat(listA[0], listA[1]);
let lnglatB = new AMap.LngLat(listB[0], listB[1]);
const drivingOptions = {
policy: AMap.DrivingPolicy.LEAST_TIME,
};
let driving = new AMap.Driving(drivingOptions);
return new Promise((resolve, reject) => {
driving.search(lnglatA, lnglatB, (status, result) => {
if (status === 'complete') {
// console.log('result', result);
if (callback && isFunction(callback)) {
callback(result);
}
return resolve(result.routes[0]);
}
});
});
},
/**
* @desc 创建导航轨迹线路
* @param {Array} listA 坐标点数组
* @param {Array} listB 坐标点数组
*
*/
createNaviLine(listA: number[], listB: number[]) {
this.clearNaviLine();
let lnglatA = new AMap.LngLat(listA[0], listA[1]);
let lnglatB = new AMap.LngLat(listB[0], listB[1]);
const drivingOptions = {
policy: AMap.DrivingPolicy.LEAST_TIME,
map: this.map,
autoFitView: true,
// panel: 'driving-panel',
};
this.driveLine = new AMap.Driving(drivingOptions);
this.driveLine.search(lnglatA, lnglatB, (status, result) => {
if (status === 'complete') {
// console.log('result', result);
}
});
this.driveLine.on('error', function (result) {
let str = '定位失败:';
console.log('error', result);
switch (result.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
console.log(str);
return false;
});
},
/**
* @desc 清除导航轨迹线路
*/
clearNaviLine() {
if (this.driveLine) {
this.driveLine.clear();
}
},
/**
* @desc 创建应急人员Marker
*/
createEmergencyMarker(option) {
this.clearEmergencyMarker();
const { sex, address, name, position } = option;
const icon = sex == '1' ? female : male;
this.emergencyMarker = new AMap.Marker({
position: position,
icon: createIcon({ icon: icon, iconSize: [36, 36], imageSize: [36, 36] }),
offset: new AMap.Pixel(0, 0), //设置偏移量
label: {
content: `<div class="alarm-content" style="width: 180px" >
<div style="text-align: center;padding-bottom: 6px">${name}</div>
<div style="text-wrap: wrap">${address}</div>
</div>`,
offset: new AMap.Pixel(-100, 55),
},
});
this.map.add(this.emergencyMarker);
this.setZoomCenter(position);
},
/**
* @desc 清除应急人员Marker
*/
clearEmergencyMarker() {
if (this.emergencyMarker) {
this.emergencyMarker?.setMap(null);
this.emergencyMarker = null;
}
},
/**
* @desc 根据坐标获取地址信息
* @param {Array} list 坐标点数组
*/
getAddressByPoint(list: number[]) {
const geocoder = new AMap.Geocoder({
city: '全国',
radius: 1000,
});
let lnglat = new AMap.LngLat(list[0], list[1]);
return new Promise((resolve, reject) => {
geocoder.getAddress(lnglat, (status, result) => {
if (status === 'complete' && result.regeocode) {
return resolve(result.regeocode.formattedAddress);
}
return reject(result);
});
});
},
/**
* @desc 清除导航元素
*/
clearNavigationElements() {
this.clearNaviLine();
this.clearEmergencyMarker();
},
};