edit
This commit is contained in:
Taric Xin
@ -0,0 +1,256 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { BaseService } from 'src/app/shared/services';
|
||||
import { throwError } from 'rxjs';
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
declare var AMap: any;
|
||||
declare var AMapUI: any;
|
||||
declare var Loca: any;
|
||||
|
||||
@Component({
|
||||
selector: 'amap-path-simplifier',
|
||||
templateUrl: './amap-path-simplifier.component.html',
|
||||
styleUrls: ['./amap-path-simplifier.component.less']
|
||||
})
|
||||
export class AmapPathSimplifierComponent implements OnInit {
|
||||
@ViewChild('modal')
|
||||
modal: any;
|
||||
addressInput: any;
|
||||
|
||||
aMap: any;
|
||||
|
||||
pathList = [
|
||||
{
|
||||
name: '路线0',
|
||||
points: [
|
||||
{
|
||||
name: '点a',
|
||||
lnglat: [116.405289, 39.904987]
|
||||
},
|
||||
{
|
||||
name: '点b',
|
||||
lnglat: [113.964458, 40.54664]
|
||||
},
|
||||
{
|
||||
name: '点c',
|
||||
lnglat: [111.47836, 41.135964]
|
||||
},
|
||||
{
|
||||
name: '点d',
|
||||
lnglat: [108.949297, 41.670904]
|
||||
},
|
||||
{
|
||||
name: '点e',
|
||||
lnglat: [106.380111, 42.149509]
|
||||
},
|
||||
{
|
||||
name: '点f',
|
||||
lnglat: [103.774185, 42.56996]
|
||||
},
|
||||
{
|
||||
name: '点g',
|
||||
lnglat: [101.135432, 42.930601]
|
||||
},
|
||||
{
|
||||
name: '点h',
|
||||
lnglat: [98.46826, 43.229964]
|
||||
},
|
||||
{
|
||||
name: '点i',
|
||||
lnglat: [95.777529, 43.466798]
|
||||
},
|
||||
{
|
||||
name: '点j',
|
||||
lnglat: [93.068486, 43.64009]
|
||||
},
|
||||
{
|
||||
name: '点k',
|
||||
lnglat: [90.34669, 43.749086]
|
||||
},
|
||||
{
|
||||
name: '点l',
|
||||
lnglat: [87.61792, 43.793308]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private service: BaseService) {}
|
||||
ngOnInit(): void {
|
||||
this.mapInit();
|
||||
// this.PoiPicker();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.aMap) {
|
||||
this.aMap.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
mapInit() {
|
||||
console.log(AMapLoader);
|
||||
|
||||
AMapLoader.load({
|
||||
// 首次调用 load
|
||||
key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
'AMap.SimpleMarker',
|
||||
'AMap.PathSimplifier',
|
||||
'AMap.Scale',
|
||||
'AMap.Marker',
|
||||
'AMap.InfoWindow',
|
||||
'AMap.ToolBar',
|
||||
'AMap.MapType',
|
||||
'AMap.Driving',
|
||||
'AMap.Geolocation'
|
||||
],
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: '1.1', // AMapUI 缺省 1.1
|
||||
plugins: ['overlay/SimpleMarker', 'misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
Loca: {
|
||||
// 是否加载 Loca， 缺省不加载
|
||||
version: '2.0' // Loca 版本，缺省 1.3.2
|
||||
}
|
||||
})
|
||||
.then(AMap => {
|
||||
console.log(AMap);
|
||||
|
||||
this.aMap = new AMap.Map('container', {
|
||||
resizeEnable: true,
|
||||
zoom: 16
|
||||
});
|
||||
console.log(this.aMap);
|
||||
|
||||
this.aMap.on('complete', () => {
|
||||
this.service.msgSrv.info('地图加载完成 !');
|
||||
var 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 = pathSimplifierIns;
|
||||
pathSimplifierIns.setData(this.pathList);
|
||||
|
||||
pathSimplifierIns.setSelectedPathIndex(0);
|
||||
|
||||
pathSimplifierIns.on('pointClick', function (e: any, info: any) {
|
||||
console.log('Click: ' + info.pathData.points[info.pointIndex].name);
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
throwError(e);
|
||||
});
|
||||
}
|
||||
|
||||
poiPickerReady(poiPicker: any) {
|
||||
(window as any).poiPicker = poiPicker;
|
||||
const map = this.aMap;
|
||||
const _this = this;
|
||||
var marker = new AMapUI.SimpleMarker();
|
||||
console.log(marker);
|
||||
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(0, -20)
|
||||
});
|
||||
console.log(infoWindow);
|
||||
|
||||
//选取了某个POI
|
||||
poiPicker.on('poiPicked', function (poiResult: any) {
|
||||
var source = poiResult.source,
|
||||
poi = poiResult.item,
|
||||
info = {
|
||||
source: source,
|
||||
id: poi.id,
|
||||
name: poi.name,
|
||||
location: poi.location.toString(),
|
||||
address: poi.address
|
||||
};
|
||||
console.log(poi);
|
||||
|
||||
marker.setMap(map);
|
||||
infoWindow.setMap(map);
|
||||
|
||||
marker.setPosition(poi.location);
|
||||
infoWindow.setPosition(poi.location);
|
||||
|
||||
infoWindow.setContent('地址: <pre>' + poi.name + '</pre>');
|
||||
infoWindow.open(map, marker.getPosition());
|
||||
|
||||
map.setCenter(marker.getPosition());
|
||||
});
|
||||
|
||||
poiPicker.onCityReady(function () {
|
||||
poiPicker.suggest('美食');
|
||||
});
|
||||
}
|
||||
|
||||
createInfoWindow(title: any, content: any) {
|
||||
var info = document.createElement('div');
|
||||
info.className = 'custom-info input-card content-window-card';
|
||||
|
||||
//可以通过下面的方式修改自定义窗体的宽高
|
||||
//info.style.width = "400px";
|
||||
// 定义顶部标题
|
||||
var top = document.createElement('div');
|
||||
var titleD = document.createElement('div');
|
||||
var closeX = document.createElement('img');
|
||||
top.className = 'info-top';
|
||||
titleD.innerHTML = title;
|
||||
closeX.src = 'https://webapi.amap.com/images/close2.gif';
|
||||
closeX.onclick = this.closeInfoWindow;
|
||||
|
||||
top.appendChild(titleD);
|
||||
top.appendChild(closeX);
|
||||
info.appendChild(top);
|
||||
|
||||
// 定义中部内容
|
||||
var middle = document.createElement('div');
|
||||
middle.className = 'info-middle';
|
||||
middle.style.backgroundColor = 'white';
|
||||
middle.innerHTML = content;
|
||||
info.appendChild(middle);
|
||||
|
||||
// 定义底部内容
|
||||
var bottom = document.createElement('div');
|
||||
bottom.className = 'info-bottom';
|
||||
bottom.style.position = 'relative';
|
||||
bottom.style.top = '0px';
|
||||
bottom.style.margin = '0 auto';
|
||||
var sharp = document.createElement('img');
|
||||
sharp.src = 'https://webapi.amap.com/images/sharp.png';
|
||||
bottom.appendChild(sharp);
|
||||
info.appendChild(bottom);
|
||||
return info;
|
||||
}
|
||||
|
||||
closeInfoWindow() {
|
||||
this.aMap.clearInfoWindow();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user