Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

map component

Browse Source
This commit is contained in:
Taric Xin
2021-12-07 14:14:01 +08:00
parent 4613b502a9
commit 141345b1d6
5 changed files with 116 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.html
View File

@ -1 +1 @@
<div class="map-container" id="container" tabindex="0" style="width: 800px; height: 500px"></div>
<div class="map-container" id="container" tabindex="0" [style]="{width: mapWidth, height: mapHeight}"></div>

25
src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.spec.ts
View File

@ -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<AmapPathSimplifierComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AmapPathSimplifierComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AmapPathSimplifierComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

177
src/app/shared/components/amap/amap-path-simplifier/amap-path-simplifier.component.ts
View File

@ -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<any>();
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,46 +101,35 @@ 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({
// this.service.msgSrv.info('地图加载完成 !');
this.pathInit();
});
})
.catch(e => {
throwError(e);
});
}
pathInit() {
this.pathSimplifierIns = new AMapUI.PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: this.aMap, //所属的地图实例
@ -146,7 +149,6 @@ export class AmapPathSimplifierComponent implements OnInit {
//point
return pathData.name + '，' + pathData.points[pointIndex].name;
}
return pathData.name + '，点数量' + pathData.points.length;
},
renderOptions: {
@ -154,103 +156,22 @@ export class AmapPathSimplifierComponent implements OnInit {
}
});
(window as any).pathSimplifierIns = pathSimplifierIns;
pathSimplifierIns.setData(this.pathList);
(window as any).pathSimplifierIns = this.pathSimplifierIns;
this.setData(this.pathList);
pathSimplifierIns.setSelectedPathIndex(0);
this.setPathIndex(this.selectedIndex);
pathSimplifierIns.on('pointClick', function (e: any, info: any) {
this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
this.clcikPointEvent.emit({ e, info });
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('美食');
});
setData(pathList: Array<any>) {
this.pathSimplifierIns.setData(pathList);
}
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();
setPathIndex(index: number) {
this.pathSimplifierIns.setSelectedPathIndex(index);
}
}

112
src/app/shared/components/amap/amap-poi-picker/amap-poi-picker.component.ts
View File

@ -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();
}

21
src/conf/amap.config.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* 高德地图资源配置
*/
export const amapConf = {
/**
* 文件上传路径
*/
key: '63f9573ca55fef2b92d4ffe0c85dea8f',
/**
* JSAPI版本
*/
version: '2.0',
/**
* AMapUI版本
*/
AMapUIVersion: '1.1',
/**
* Loca版本
*/
LocaVersion: '2.0'
};