shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

封装高德初步完成

上海一张图
陈鹏飞 4 years ago
parent
0b0852c124
commit
fe16a09942
10 changed files with 264 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 64
      src/app/data-collection/fire-force/fire-force.component.ts
  2. 65
      src/app/data-collection/linkage-forces/linkage-forces.component.ts
  3. 64
      src/app/data-collection/water-collection/water-collection.component.ts
  4. 119
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  5. 64
      src/app/key-unit/water-road/water-road.component.ts
  6. 11
      src/modules/map/declare/factory.ts
  7. 34
      src/modules/map/declare/gaode-map.ts
  8. 1
      src/modules/map/declare/keda-map.ts
  9. 14
      src/modules/map/declare/map-tools.ts
  10. 10
      src/modules/map/declare/map.d.ts

64
src/app/data-collection/fire-force/fire-force.component.ts
Unescape View File

@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { MapFactory } from '@src/modules/map/declare/factory';
import { Console } from 'console';
import { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs'
@ -94,38 +95,43 @@ export class FireForceComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = markerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
return div;
};
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
var _renderMarker = (context)=>{
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.cluster.on('click',(e)=>{
if(e.clusterData.length == 1){

65
src/app/data-collection/linkage-forces/linkage-forces.component.ts
Unescape View File

@ -10,6 +10,7 @@ import { NzTreeNode } from 'ng-zorro-antd/tree';
import { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs'
import Swiper from 'swiper';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var CryptoJS
declare var AMap: any;
@Component({
@ -127,38 +128,44 @@ export class LinkageForcesComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = markerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
return div;
};
var _renderMarker = (context)=> {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.cluster.on('click',(e)=>{
if(e.clusterData.length == 1){

64
src/app/data-collection/water-collection/water-collection.component.ts
Unescape View File

@ -4,6 +4,7 @@ import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any;
@Component({
@ -83,38 +84,43 @@ export class WaterCollectionComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = markerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
return div;
};
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
var _renderMarker = (context)=> {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
context.marker.setContent(content)
var offset = new AMap.Pixel(-15, -15);
context.marker.setOffset(offset)
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.cluster.on('click',(e)=>{
if(e.clusterData.length == 1){

119
src/app/gis-management/gis-labeling/gis-labeling.component.ts
Unescape View File

@ -368,8 +368,10 @@ export class GisLabelingComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60
var count = unitMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
@ -377,29 +379,32 @@ export class GisLabelingComponent implements OnInit {
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
return div;
};
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
var _renderMarker = (context) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, {
this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.unitCluster.on('click', (e) => {
if (e.clusterData.length == 1) {
@ -440,7 +445,7 @@ export class GisLabelingComponent implements OnInit {
</div>
</div>`
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({
this.infoWindow = MapFactory.InfoWindowInstance({
position: [item.location.x, item.location.y],
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
@ -539,8 +544,10 @@ export class GisLabelingComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60
var count = fireForceMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
@ -548,29 +555,32 @@ export class GisLabelingComponent implements OnInit {
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
return div;
};
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
var _renderMarker = (context) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.fireForceCluster = new AMap.MarkerCluster(this.map, fireForceMarkerArrcluster, {
this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
});
}
@ -682,8 +692,10 @@ export class GisLabelingComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60
var count = linkageForcesMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
@ -691,29 +703,33 @@ export class GisLabelingComponent implements OnInit {
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
return div;
};
var _renderMarker = (context) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.linkageForcesCluster = new AMap.MarkerCluster(this.map, linkageForcesMarkerArrcluster, {
this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
});
}
@ -850,8 +866,8 @@ export class GisLabelingComponent implements OnInit {
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = () => {
return `<img class='clusterImgCollection' src="${render.getFirstImages}" alt="">`;
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
@ -1013,16 +1029,13 @@ export class GisLabelingComponent implements OnInit {
} else {
this.unitCluster ? this.unitCluster.setData([]) : null
this.mapPattern = false
this.map = new AMap.Map('map', {
this.map = MapFactory.MapInstance('map', {
viewMode: '3D',
pitch: 60,
rotation: -35,
features: ['bg', 'road', 'point', 'building'],
mapStyle: 'amap://styles/light',
});
this.map.setCity('上海市');
}
this.satelliteModel = false
@ -1042,7 +1055,7 @@ export class GisLabelingComponent implements OnInit {
that.map = MapFactory.MapInstance('map', { layers: [layer] });
that.map.setCity('上海市');
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
that.mouseTool = new AMap.MouseTool(that.map);
that.mouseTool = new AMap.MouseTool(that.map.self);
});
}
@ -1179,7 +1192,7 @@ export class GisLabelingComponent implements OnInit {
this.markers.forEach((element, index) => { this.map.remove(element); }); //先删除所有标点
this.markers = []
let marker = new AMap.Marker({
let marker = MapFactory.MarkerInstance({
map: this.map,
position: [e.location.x, e.location.y], // 基点位置,
});
@ -1220,7 +1233,7 @@ export class GisLabelingComponent implements OnInit {
</div>
</div>`
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({
this.infoWindow = MapFactory.InfoWindowInstance({
position: [e.location.x, e.location.y],
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
@ -1233,7 +1246,7 @@ export class GisLabelingComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
marker.on('click', (ev) => { //marker点击事件
this.infoWindow = new AMap.InfoWindow({
this.infoWindow = MapFactory.InfoWindowInstance({
position: [e.location.x, e.location.y],
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,

64
src/app/key-unit/water-road/water-road.component.ts
Unescape View File

@ -4,6 +4,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any;
@Component({
@ -224,38 +225,43 @@ export class WaterRoadComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = waterMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
return div;
};
render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2);
};
render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
var _renderMarker = (context)=> {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-12.5, -12.5);
context.marker.setContent(content)
context.marker.setOffset(offset)
render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15);
}
this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.waterCluster.on('click',(e)=>{
if(e.clusterData.length == 1){

11
src/modules/map/declare/factory.ts
Unescape View File

@ -1,7 +1,7 @@
const mapSupplier: number = 1; //1:高德
import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker } from './map'
import { GaodeCircle, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map'
import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, InfoWindow } from './map'
import { GaodeCircle, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map'
import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map';
import MapTools from './map-tools';
@ -52,6 +52,13 @@ export class MapFactory {
}
}
public static InfoWindowInstance(options: any): InfoWindow {
switch (mapSupplier) {
case 1: return new GaodeInfoWindow(options);
default: return null;
}
}
public static CircleInstance(options: any): ICircle {
switch (mapSupplier) {
case 1: return new GaodeCircle(options);

34
src/modules/map/declare/gaode-map.ts
Unescape View File

@ -1,4 +1,4 @@
import { HtmlRender, ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IPixel, IRenderClusterMarker, ISelf, PixelRender } from './map'
import { HtmlRender, ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, InfoWindow, IPixel, IRenderClusterMarker, ISelf, PixelRender } from './map'
import MapTools from './map-tools';
declare var AMap: any;
@ -28,7 +28,7 @@ export class GaoDeMap extends GaodeBasic implements IMap {
return this.self.add(obj.self)
}
remove(obj: any) {
return this.self.remove(obj)
return this.self.remove(obj.self)
}
setCity(city: string) {
return this.self.setCity(city)
@ -62,7 +62,9 @@ export class GaoDeMarker extends GaodeBasic implements IMarker {
super();
let conf = MapTools.InstanceConvert(options);
this.self = new AMap.Marker(conf);
this._position = this.self._position;
}
_position: number[]
setMap() {
this.self.setMap(null)
}
@ -83,6 +85,12 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
let conf = MapTools.InstanceConvert(options);
this.self = new AMap.MarkerCluster(map.self, list, conf)
}
on(eventName: string, callback: Function): void {
this.self.on(eventName, callback);
}
setData(list:any[]) {
this.self.setData(list)
}
}
export class GaoDeLngLat extends GaodeBasic implements ILngLat {
@ -102,13 +110,27 @@ export class GaodeLayer extends GaodeBasic implements ILayer {
}
}
export class GaodeCircle extends GaodeBasic implements ICircle {
export class GaodeInfoWindow extends GaodeBasic implements InfoWindow {
constructor(options: any) {
super();
options.offset = options.offset.self
this.self = new AMap.InfoWindow(options);
}
open(map: IMap) {
return this.self.open(map.self)
}
listen(html: any, event: string, callback: Function) {
return this.self.listen(html,event,callback)
}
}
export class GaodeCircle extends GaodeBasic implements ICircle {
constructor(options: Object) {
super();
this.self = new AMap.Circle(options);
}
setMap(map: any) {
return this.self.setMap(map)
setMap(map: IMap) {
return this.self.setMap(map.self)
}
setCenter(pos: number[]) {
return this.self.setCenter(pos)
@ -134,7 +156,7 @@ export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf {
context.marker.setOffset(this.pixelRender(context.count).self);
},
renderMarker: (context) => {
context.marker.setContent(this.contentNonRender());
context.marker.setContent(this.contentNonRender(this.getFirstImages(context)));
context.marker.setOffset(this.pixelNonRender(context.count).self);
}
};

1
src/modules/map/declare/keda-map.ts
Unescape View File

@ -72,6 +72,7 @@ export class KeDaMarker implements IMarker {
};
this.self = d;
}
_position: number[];
setMap() {
throw new Error('Method not implemented.');
}

14
src/modules/map/declare/map-tools.ts
Unescape View File

@ -6,6 +6,7 @@ export default class MapTools {
}
let obj = Object.assign({}, data);
let convert = (obj: any, data: string) => {
if(!obj[data])return;
if (obj[data].discriminator === "ISelf") {
obj[data] = obj[data].self;
} else if (obj[data].discriminator === "ISelfCombine") {
@ -13,19 +14,26 @@ export default class MapTools {
}
}
let process = (obj: any) => {
let process = (obj: any,deep:number=0) => {
try{
deep++;
if(deep>=4)return;
if (obj == undefined) return;
if (!(obj instanceof Object)) return;
for (var name in obj) {
if (obj[name] instanceof Array) {
for (var j in obj[name]) {
process(j);
process(j,deep);
}
continue;
}
convert(obj, name);
process(obj[name]);
process(obj[name],deep);
}
}catch(e){
console.log(e);
debugger
}
}
process(obj);
return obj;

10
src/modules/map/declare/map.d.ts vendored
Unescape View File

@ -25,6 +25,7 @@ export interface IMapOptions {
export interface IMarker extends ISelf {
id: string;
_position:number[];
on(eventName: string, callback: Function);
setMap();
}
@ -43,11 +44,11 @@ export interface IRenderClusterMarker {
pixelNonRender: PixelRender;
}
export class IMarkOptions {
position?: ILngLat;
position?: ILngLat | number[];
content?: string;
offset?: IPixel;
map?: IMap;
}
export interface IPixel extends ISelf {
@ -62,6 +63,11 @@ export interface ILayer extends ISelf {
}
export interface InfoWindow extends ISelf {
open(map:IMap);
listen(html:any, event:string, callback: Function)
}
export interface ICircle extends ISelf {
setRadius(num: number);
setCenter(pos: number[])

Write Preview
Loading…
Cancel
Save