diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html
index 2d903b09..6794d28a 100644
--- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html
+++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts
deleted file mode 100644
index 2fe2b600..00000000
--- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AmapPathSimplifierComponent } from './amap-path-simplifier.component';
-
-describe('AmapPathSimplifierComponent', () => {
- let component: AmapPathSimplifierComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ AmapPathSimplifierComponent ]
- })
- .compileComponents();
- });
-
- beforeEach(() => {
- fixture = TestBed.createComponent(AmapPathSimplifierComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts
index b504050b..0d350056 100644
--- a/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts
+++ b/src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts
@@ -1,26 +1,26 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+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 {
- @ViewChild('modal')
- modal: any;
- addressInput: any;
-
+export class AmapPathSimplifierComponent implements OnInit, OnChanges {
aMap: any;
+ pathSimplifierIns: any;
+ @Input()
pathList = [
{
- name: '路线0',
+ name: '路线1',
points: [
{
name: '点a',
@@ -73,11 +73,25 @@ export class AmapPathSimplifierComponent implements OnInit {
]
}
];
+ @Input()
+ selectedIndex = 0;
+ @Input()
+ mapWidth = '800px';
- constructor(private service: BaseService) {}
+ @Input()
+ mapHeight = '500px';
+
+ @Output()
+ clcikPointEvent = new EventEmitter();
+
+ constructor() {}
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.pathList.currentValue && this.pathSimplifierIns) {
+ this.setData(changes.pathList.currentValue);
+ }
+ }
ngOnInit(): void {
this.mapInit();
- // this.PoiPicker();
}
ngOnDestroy(): void {
@@ -87,81 +101,26 @@ export class AmapPathSimplifierComponent implements OnInit {
}
mapInit() {
- console.log(AMapLoader);
-
AMapLoader.load({
- // 首次调用 load
- key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+ key: CONFIG.key,
+ version: CONFIG.version,
plugins: [
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
- 'AMap.SimpleMarker',
- 'AMap.PathSimplifier',
- 'AMap.Scale',
- 'AMap.Marker',
- 'AMap.InfoWindow',
- 'AMap.ToolBar',
- 'AMap.MapType',
- 'AMap.Driving',
- 'AMap.Geolocation'
+ 'AMap.PathSimplifier'
],
AMapUI: {
- // 是否加载 AMapUI，缺省不加载
- version: '1.1', // AMapUI 缺省 1.1
- plugins: ['overlay/SimpleMarker', 'misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
+ version: CONFIG.AMapUIVersion,
+ plugins: ['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
+ zoom: 4
});
- 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);
- });
+ // this.service.msgSrv.info('地图加载完成 !');
+ this.pathInit();
});
})
.catch(e => {
@@ -169,88 +128,50 @@ export class AmapPathSimplifierComponent implements OnInit {
});
}
- poiPickerReady(poiPicker: any) {
- (window as any).poiPicker = poiPicker;
- const map = this.aMap;
- const _this = this;
- var marker = new AMapUI.SimpleMarker();
- console.log(marker);
+ pathInit() {
+ this.pathSimplifierIns = new AMapUI.PathSimplifier({
+ zIndex: 100,
+ //autoSetFitView:false,
+ map: this.aMap, //所属的地图实例
- var infoWindow = new AMap.InfoWindow({
- offset: new AMap.Pixel(0, -20)
- });
- console.log(infoWindow);
+ getPath: function (pathData: any, pathIndex: any) {
+ var points = pathData.points,
+ lnglatList = [];
- //选取了某个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);
+ for (var i = 0, len = points.length; i < len; i++) {
+ lnglatList.push(points[i].lnglat);
+ }
- marker.setMap(map);
- infoWindow.setMap(map);
-
- marker.setPosition(poi.location);
- infoWindow.setPosition(poi.location);
-
- infoWindow.setContent('地址: ' + poi.name + '
');
- infoWindow.open(map, marker.getPosition());
-
- map.setCenter(marker.getPosition());
+ 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
+ }
});
- poiPicker.onCityReady(function () {
- poiPicker.suggest('美食');
+ (window as any).pathSimplifierIns = this.pathSimplifierIns;
+ this.setData(this.pathList);
+
+ 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);
});
}
- 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;
+ setData(pathList: Array) {
+ this.pathSimplifierIns.setData(pathList);
}
- closeInfoWindow() {
- this.aMap.clearInfoWindow();
+ setPathIndex(index: number) {
+ this.pathSimplifierIns.setSelectedPathIndex(index);
}
}
diff --git a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts
index e2bfe070..3f167d20 100644
--- a/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts
+++ b/src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts
@@ -1,9 +1,12 @@
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';
+import { amapConf } from '@conf/amap.config';
declare var AMap: any;
declare var AMapUI: any;
+declare var Loca: any;
+
+const CONFIG = amapConf;
@Component({
selector: 'amap-poi-picker',
@@ -16,7 +19,10 @@ export class AmapPoiPickerComponent implements OnInit {
addressInput: any;
aMap: any;
- constructor(private service: BaseService) {}
+
+ poi: any;
+
+ constructor() {}
ngOnInit(): void {
this.mapInit();
// this.PoiPicker();
@@ -29,63 +35,43 @@ export class AmapPoiPickerComponent implements OnInit {
}
mapInit() {
- console.log(AMapLoader);
-
AMapLoader.load({
// 首次调用 load
- key: '63f9573ca55fef2b92d4ffe0c85dea8f', // 申请好的Web端开发者Key，首次调用 load 时必填
- version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+ key: CONFIG.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+ version: CONFIG.version, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
'AMap.SimpleMarker',
'AMap.PoiPicker',
'AMap.Scale',
- 'AMap.Marker',
'AMap.InfoWindow',
- 'AMap.ToolBar',
- 'AMap.MapType',
- 'AMap.Driving',
'AMap.Geolocation'
],
AMapUI: {
// 是否加载 AMapUI，缺省不加载
- version: '1.1', // AMapUI 缺省 1.1
+ version: CONFIG.AMapUIVersion, // AMapUI 缺省 1.1
plugins: ['overlay/SimpleMarker', 'misc/PoiPicker'] // 需要加载的 AMapUI ui插件
},
Loca: {
// 是否加载 Loca， 缺省不加载
- version: '2.0' // Loca 版本，缺省 1.3.2
+ version: CONFIG.LocaVersion // Loca 版本，缺省 1.3.2
}
})
.then(AMap => {
- console.log(AMap);
-
+ // 搜索picker
var poiPicker = new AMapUI.PoiPicker({
- //city:'北京',
input: 'pickerInput'
});
- console.log(poiPicker);
-
+ // 地图
this.aMap = new AMap.Map('container', {
resizeEnable: true,
zoom: 16
});
- console.log(this.aMap);
+ // 地图创建成功
this.aMap.on('complete', () => {
- this.service.msgSrv.info('地图加载完成 !');
this.poiPickerReady(poiPicker);
- // new AMapUI.SimpleMarker({
- // //前景文字
- // iconLabel: 'A',
- // //图标主题
- // iconTheme: 'default',
- // //背景图标样式
- // iconStyle: 'red',
- // map: this.aMap,
- // position: this.aMap.getCenter()
- // });
});
})
.catch(e => {
@@ -96,28 +82,25 @@ export class AmapPoiPickerComponent implements OnInit {
poiPickerReady(poiPicker: any) {
(window as any).poiPicker = poiPicker;
const map = this.aMap;
- const _this = this;
- var marker = new AMapUI.SimpleMarker();
- console.log(marker);
+ // 定位标志
+ const marker = new AMapUI.SimpleMarker({
+ //图标主题
+ iconTheme: 'default',
+ map: map,
+ position: map.getCenter()
+ });
- var infoWindow = new AMap.InfoWindow({
+ // 信息窗口
+ const 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
- };
+ poiPicker.on('poiPicked', (poiResult: any) => {
+ const source = poiResult.source,
+ poi = poiResult.item;
console.log(poi);
-
+ this.poi = poi;
marker.setMap(map);
infoWindow.setMap(map);
@@ -135,45 +118,6 @@ export class AmapPoiPickerComponent implements OnInit {
});
}
- 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();
}
diff --git a/src/conf/amap.config.ts b/src/conf/amap.config.ts
new file mode 100644
index 00000000..25b3509e
--- /dev/null
+++ b/src/conf/amap.config.ts
@@ -0,0 +1,21 @@
+/**
+ * 高德地图资源配置
+ */
+export const amapConf = {
+ /**
+ * 文件上传路径
+ */
+ key: '63f9573ca55fef2b92d4ffe0c85dea8f',
+ /**
+ * JSAPI版本
+ */
+ version: '2.0',
+ /**
+ * AMapUI版本
+ */
+ AMapUIVersion: '1.1',
+ /**
+ * Loca版本
+ */
+ LocaVersion: '2.0'
+};