();
@Input()
- pois: any = [
- {
- id: 'A',
- position: [116.020764, 39.904989],
- markerLabel: 'X_A',
- infoWinContent: 'Hello! A',
- listDesc: '起',
- color: '#F5222D'
- },
- {
- id: 'B',
- position: [116.405285, 39.904989],
- markerLabel: 'X_B',
- infoWinContent: 'Hello! B',
- listDesc: '终',
- color: '#1890ff'
- },
- {
- id: 'C',
- position: [116.789806, 39.904989],
- markerLabel: 'X_C',
- infoWinContent: 'Hello! C',
- listDesc: '卸',
- color: '#1890ff'
- },
- {
- id: 'C',
- position: [116.789806, 39.904989],
- markerLabel: 'X_C',
- infoWinContent: 'Hello! C',
- listDesc: '装',
- color: '#F5222D'
- }
- ];
+ pois: any = [];
+ private _pois: any = [];
constructor(public service: BaseService) {}
ngOnChanges(changes: SimpleChanges): void {
@@ -77,11 +49,19 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
this.pathList = [
{
name: '路线1',
- points: changes?.MapList?.currentValue
+ points: changes.MapList?.currentValue
}
];
this.setData(this.pathList);
this.setPathIndex(this.selectedIndex);
+ this.getPoiByPositon(this.MapList[this.MapList?.length - 1]?.lnglat);
+ }
+ if (changes?.pois?.currentValue) {
+ // console.log(this.pois);
+ this._pois = changes?.pois?.currentValue;
+ if (this?.markerList && this._pois.length > 0) {
+ this.markerList.render(this._pois);
+ }
}
}
ngOnInit(): void {
@@ -99,7 +79,9 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
version: CONFIG.version,
plugins: [
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
- 'AMap.PathSimplifier'
+ 'AMap.PathSimplifier',
+ 'AMap.InfoWindow',
+ 'AMap.Geocoder'
],
AMapUI: {
version: CONFIG.AMapUIVersion,
@@ -112,10 +94,16 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
});
this.aMap.on('complete', () => {
+ // 信息窗口
+ this.infoWindow = new AMap.InfoWindow({
+ offset: new AMap.Pixel(0, -40)
+ });
+ this.geocoder = new AMap.Geocoder({
+ radius: 1000 //范围，默认：500
+ });
// this.service.msgSrv.info('地图加载完成 !');
this.pathInit();
- // this.setPOIS();
- // this.loadPOIS();
+ this.setPOIS();
});
})
.catch(e => {
@@ -123,88 +111,6 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
});
}
- loadPOIS() {
- AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker: any) => {
- if (!SvgMarker.supportSvg) {
- //当前环境并不支持SVG，此时SvgMarker会回退到父类，即SimpleMarker
- alert('当前环境不支持SVG');
- }
-
- //just some colors
- var colors = ['#F5222D', '#1890ff'];
-
- //SvgMarker.Shape下的Shape
- var shapeKeys = ['WaterDrop'];
-
- var colNum = 2,
- rowNum = shapeKeys.length;
- const markers: any[] = [];
-
- this.pois.forEach((d: any) => {
- //创建shape
- const shape = new SvgMarker.Shape['WaterDrop']({
- height: 40,
- strokeWidth: 1,
- strokeColor: '#ccc',
- fillColor: '#F5222D'
- });
-
- markers.push(
- new SvgMarker(shape, {
- map: this.aMap,
- position: d.position,
- containerClassNames: 'shape-' + 'WaterDrop',
- iconLabel: {
- innerHTML: d.listDesc,
- style: {
- top: 7 + 'px'
- }
- },
- showPositionPoint: true
- })
- );
- });
- console.log(markers);
-
- // var pxCenter = this.aMap.lnglatToPixel(this.aMap.getCenter());
-
- // var startX = pxCenter.getX(),
- // startY = pxCenter.getY();
-
- // for (var c = 0; c < colNum; c++) {
- // for (var r = 0; r < rowNum; r++) {
- // var idx = r * colNum + c;
-
- // if (!colors[idx]) {
- // continue;
- // }
-
- // var x = startX + (c - colNum / 2) * 70;
- // var y = startY + 50 + (r - rowNum / 2) * 80;
-
- // var labelCenter = shape.getCenter();
-
- // var position = this.aMap.pixelToLngLat(new AMap.Pixel(x, y));
-
- // markers.push(
- // new SvgMarker(shape, {
- // map: this.aMap,
- // position: position,
- // containerClassNames: 'shape-' + shapeKeys[r],
- // iconLabel: {
- // innerHTML: String.fromCharCode('A'.charCodeAt(0) + c),
- // style: {
- // top: labelCenter[1] - 9 + 'px'
- // }
- // },
- // showPositionPoint: true
- // })
- // );
- // }
- // }
- });
- }
-
pathInit() {
this.pathSimplifierIns = new AMapUI.PathSimplifier({
zIndex: 100,
@@ -222,13 +128,11 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
return lnglatList;
},
getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
- console.log(pathData, pointIndex);
-
if (pointIndex >= 0) {
//point
return pathData.name + '，' + pathData.points[pointIndex].name;
}
- return pathData.name + '，点数量' + pathData.points?.length;
+ return '';
},
renderOptions: {
renderAllPointsIfNumberBelow: 10 //绘制路线节点，如不需要可设置为-1
@@ -248,126 +152,53 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
}
setPOIS() {
- AMapUI.loadUI(['misc/MarkerList'], (MarkerList: any) => {
- var markerList = new MarkerList({
+ AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
+ this.markerList = new MarkerList({
//关联的map对象
map: this.aMap,
-
- //选中状态（通过点击列表或者marker）时在Marker和列表节点上添加的class，可以借此编写css控制选中时的展示效果
- selectedClassNames: 'selected',
-
- //返回数据项的Id
- getDataId: (dataItem: any, index: any) => {
- //index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
- return dataItem.id;
- },
//返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
getPosition: (dataItem: any) => {
- console.log(dataItem);
-
return dataItem.position;
},
//返回数据项对应的Marker
getMarker: (dataItem: any, context: any, recycledMarker: any) => {
- //marker的标注内容
- var content = dataItem.markerLabel;
-
- var label = {
- offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
- content: content
- };
-
//存在可回收利用的marker
if (recycledMarker) {
//直接更新内容返回
- recycledMarker.setLabel(label);
+ recycledMarker.setIconLabel(context.id);
+ recycledMarker.setIconStyle(dataItem.iconStyle);
return recycledMarker;
}
-
+ this.SimpleMarker = SimpleMarker;
//返回一个新的Marker
- return new AMap.Marker({
- label: label
+ return new SimpleMarker({
+ //普通文本
+ iconLabel: {
+ //普通文本
+ innerHTML: dataItem.markerLabel,
+ //设置样式
+ style: {
+ color: '#fff',
+ fontSize: '110%',
+ marginTop: '2px'
+ }
+ },
+ iconStyle: dataItem.color,
+ map: this.aMap,
+ position: dataItem.position
});
},
//返回数据项对应的infoWindow
getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
- var tpl = '<%- dataItem.id %>：<%- dataItem.infoWinContent %>
';
-
- //MarkerList.utils.template支持underscore语法的模板
- var content = MarkerList.utils.template(tpl, {
- dataItem: dataItem,
- dataIndex: context.index
- });
-
- if (recycledInfoWindow) {
- //存在可回收利用的infoWindow, 直接更新内容返回
- recycledInfoWindow.setContent(content);
- return recycledInfoWindow;
- }
-
- //返回一个新的InfoWindow
- return new AMap.InfoWindow({
- offset: new AMap.Pixel(0, -32),
- content: content
- });
- },
- //返回数据项对应的列表节点
- getListElement: (dataItem: any, context: any, recycledListElement: any) => {
- var tpl = '
<%- dataItem.id %>：<%- dataItem.listDesc %>
';
-
- var content = MarkerList.utils.template(tpl, {
- dataItem: dataItem,
- dataIndex: context.index
- });
-
- if (recycledListElement) {
- //存在可回收利用的listElement, 直接更新内容返回
- recycledListElement.innerHTML = content;
- return recycledListElement;
- }
-
- //返回一段html，MarkerList将利用此html构建一个新的dom节点
- return '
' + content + '';
+ this.selectedPOI(dataItem);
+ return null;
}
});
- //监听选中改变
- markerList.on('selectedChanged', (event: any, info: any) => {
- console.log(event, info);
- });
-
- //监听Marker和ListElement上的点击
- markerList.on('markerClick listElementClick', (event: any, record: any) => {
- //console.log(event, record);
- });
-
- //构建一个数据项数组，数据项本身没有格式要求，但需要支持getDataId和getPosition
- var data = [
- {
- id: 'A',
- position: [116.020764, 39.904989],
- markerLabel: 'X_A',
- infoWinContent: 'Hello! A',
- listDesc: '店铺 A'
- },
- {
- id: 'B',
- position: [116.405285, 39.904989],
- markerLabel: 'X_B',
- infoWinContent: 'Hello! B',
- listDesc: '店铺 B'
- },
- {
- id: 'C',
- position: [116.789806, 39.904989],
- markerLabel: 'X_C',
- infoWinContent: 'Hello! C',
- listDesc: '店铺 C'
- }
- ];
-
- //展示该数据
- markerList.render(data);
+ if (this._pois?.length > 0) {
+ //展示该数据
+ this.markerList.render(this._pois);
+ }
});
}
@@ -377,7 +208,7 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
setPathIndex(index: number) {
this.pathSimplifierIns.setSelectedPathIndex(index);
- // this.startNav();
+ this.startNav();
}
startNav() {
@@ -391,4 +222,61 @@ export class AmapPathSimplifierComponent implements OnInit, OnChanges {
this.navigator?.start();
}
}
+
+ /** 根据经纬度获取地址信息 */
+ getPoiByPositon(position: Array) {
+ this.geocoder.getAddress(position, (status: any, result: any) => {
+ if (status === 'complete' && result.info === 'OK') {
+ // result中对应详细地理坐标信息
+ this._pois = [...this.pois, { markerLabel: '终', color: 'red', position: position, title: result.regeocode.formattedAddress }];
+ if (this.markerList) {
+ this.markerList.render(this._pois);
+ }
+ // this.setPOI({ markerLabel: '终', color: 'red', position: position });
+ }
+ });
+ }
+
+ /**
+ * 选中标点，设置窗口信息
+ * @param location
+ */
+ selectedPOI(location: any) {
+ this.infoWindow.setContent(`地址: ${location.title}`);
+ this.infoWindow.open(this.aMap, location.position);
+ this.infoWindow.setPosition(location.position);
+ this.aMap.setCenter(location.position);
+ }
+
+ /**
+ * 增加标记点
+ * @param poi
+ */
+ setPOI(poi: POI) {
+ AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
+ //启动页面
+ new SimpleMarker({
+ //普通文本
+ iconLabel: {
+ //普通文本
+ innerHTML: poi.markerLabel,
+ //设置样式
+ style: {
+ color: '#fff',
+ fontSize: '110%',
+ marginTop: '2px'
+ }
+ },
+ iconStyle: poi.color,
+ map: this.aMap,
+ position: poi.position
+ });
+ });
+ }
+}
+
+export interface POI {
+ markerLabel: string;
+ color: string;
+ position: Array;
}
diff --git a/src/app/shared/components/amap/amap.service.ts b/src/app/shared/components/amap/amap.service.ts
index 4a08b43f..ce1a801e 100644
--- a/src/app/shared/components/amap/amap.service.ts
+++ b/src/app/shared/components/amap/amap.service.ts
@@ -1,5 +1,5 @@
/*
- * @Description :
+ * @Description :
* @Version : 1.0
* @Author : Shiming
* @Date : 2021-12-24 15:37:00
@@ -24,8 +24,8 @@ export class AmapService {
sub = new Subject();
currentSub = new Subject();
- //计算路径驾车最优路线的长度与所需时间
- drivingCompute(starts: any[], ends: any[]): Observable {
+ //计算路径驾车最优路线的长度与所需时间
+ drivingCompute(starts: any[], ends: any[]): Observable {
AMap.plugin('AMap.Driving', () => {
let driving = new AMap.Driving({
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
@@ -35,7 +35,10 @@ export class AmapService {
return { keyword: item.detailedAddress, city: item.city };
});
driving.search(points, (status: any, result: any) => {
- const repData = { distance: (result?.routes?.[0]?.distance / 1000).toFixed(2), time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2) };
+ const repData = {
+ distance: (result?.routes?.[0]?.distance / 1000).toFixed(2),
+ time: (result?.routes?.[0]?.time / 60 / 60).toFixed(2)
+ };
this.sub.next(repData);
});
});
diff --git a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html
index 06381609..4243f024 100644
--- a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html
+++ b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.html
@@ -4,7 +4,7 @@
* @Author : Shiming
* @Date : 2022-01-25 16:03:45
* @LastEditors : Shiming
- * @LastEditTime : 2022-03-01 15:31:23
+ * @LastEditTime : 2022-03-09 16:17:28
* @FilePath : \\tms-obc-web\\src\\app\\shared\\components\\dynamic-setting\\dynamic-setting-h5\\dynamic-setting-h5.component.html
* Copyright (C) 2022 huzhenhong. All rights reserved.
-->
@@ -30,7 +30,10 @@
-
+
+
diff --git a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts
index d26ddfed..79c6db38 100644
--- a/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts
+++ b/src/app/shared/components/dynamic-setting/dynamic-setting-h5/dynamic-setting-h5.component.ts
@@ -50,6 +50,11 @@ export class DynamicSettingH5Component implements OnInit {
if (this.configList?.length < 0) {
return;
}
+ // 配置校验
+ if (this.configList.find((config: any) => !config.itemValue && config.requiredField)) {
+ this.service.msgSrv.warning('请填写必填项');
+ return;
+ }
let params = [...this.configList];
params = params.map((item: any) => {
if (item.itemType == 9) {