137 lines
3.7 KiB
TypeScript
137 lines
3.7 KiB
TypeScript
import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter } from '@angular/core';
|
||
import { BaseService } from 'src/app/shared/services';
|
||
import { throwError } from 'rxjs';
|
||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||
import { amapConf } from '@conf/amap.config';
|
||
declare var AMap: any;
|
||
declare var AMapUI: any;
|
||
declare var Loca: any;
|
||
|
||
const CONFIG = amapConf;
|
||
@Component({
|
||
selector: 'amap-path-simplifier',
|
||
templateUrl: './amap-path-simplifier.component.html',
|
||
styleUrls: ['./amap-path-simplifier.component.less']
|
||
})
|
||
export class AmapPathSimplifierComponent implements OnInit, OnChanges {
|
||
aMap: any;
|
||
pathSimplifierIns: any;
|
||
@Input()
|
||
pathList: any = [];
|
||
@Input()
|
||
selectedIndex = 0;
|
||
@Input()
|
||
mapWidth = '800px';
|
||
@Input('MapList') MapList: any;
|
||
@Input()
|
||
mapHeight = '500px';
|
||
|
||
@Output()
|
||
clcikPointEvent = new EventEmitter<any>();
|
||
|
||
constructor(public service: BaseService) {}
|
||
ngOnChanges(changes: SimpleChanges): void {
|
||
if (changes?.pathList?.currentValue && this?.pathSimplifierIns) {
|
||
this.setData(changes.pathList?.currentValue);
|
||
this.setPathIndex(this.selectedIndex);
|
||
}
|
||
}
|
||
ngOnInit(): void {
|
||
this.mapInit();
|
||
this.pathList = [
|
||
{
|
||
name: '路线1',
|
||
points: this.MapList
|
||
}
|
||
];
|
||
// this.DataInit();
|
||
}
|
||
ngOnDestroy(): void {
|
||
if (this.aMap) {
|
||
this.aMap.destroy();
|
||
}
|
||
}
|
||
|
||
mapInit() {
|
||
AMapLoader.load({
|
||
key: CONFIG.key,
|
||
version: CONFIG.version,
|
||
plugins: [
|
||
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
'AMap.PathSimplifier'
|
||
],
|
||
AMapUI: {
|
||
version: CONFIG.AMapUIVersion,
|
||
plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
|
||
}
|
||
})
|
||
.then(AMap => {
|
||
this.aMap = new AMap.Map('container', {
|
||
zoom: 4
|
||
});
|
||
|
||
this.aMap.on('complete', () => {
|
||
// this.service.msgSrv.info('地图加载完成 !');
|
||
this.pathInit();
|
||
});
|
||
})
|
||
.catch(e => {
|
||
throwError(e);
|
||
});
|
||
}
|
||
|
||
pathInit() {
|
||
this.pathSimplifierIns = new AMapUI.PathSimplifier({
|
||
zIndex: 100,
|
||
//autoSetFitView:false,
|
||
map: this.aMap, //所属的地图实例
|
||
|
||
getPath: function (pathData: any, pathIndex: any) {
|
||
var points = pathData.points,
|
||
lnglatList = [];
|
||
|
||
for (var i = 0, len = points?.length; i < len; i++) {
|
||
lnglatList.push(points[i].lnglat);
|
||
}
|
||
|
||
return lnglatList;
|
||
},
|
||
getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
|
||
if (pointIndex >= 0) {
|
||
//point
|
||
return pathData.name + '，' + pathData.points[pointIndex].name;
|
||
}
|
||
return pathData.name + '，点数量' + pathData.points?.length;
|
||
},
|
||
renderOptions: {
|
||
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
|
||
}
|
||
});
|
||
(window as any).pathSimplifierIns = this.pathSimplifierIns;
|
||
this.setData(this.pathList);
|
||
|
||
if(this.pathList.length>0){
|
||
this.setPathIndex(this.selectedIndex);
|
||
}
|
||
|
||
this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
|
||
this.clcikPointEvent.emit({ e, info });
|
||
console.log('Click: ' + info.pathData.points[info.pointIndex].name);
|
||
});
|
||
// navg1.start();
|
||
// var navg1 = this.pathSimplifierIns.createPathNavigator(0, {
|
||
// loop: true, //循环播放
|
||
// speed: 1000000 //巡航速度，单位千米/小时
|
||
// });
|
||
// navg1.start();
|
||
}
|
||
|
||
setData(pathList: Array<any>) {
|
||
this.pathSimplifierIns.setData(pathList);
|
||
}
|
||
|
||
setPathIndex(index: number) {
|
||
this.pathSimplifierIns.setSelectedPathIndex(index);
|
||
}
|
||
}
|