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
Unified 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 { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { MapFactory } from '@src/modules/map/declare/factory';
import { Console } from 'console'; import { Console } from 'console';
import { TreeService } from 'src/app/http-interceptors/tree.service'; import { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs' import Viewer from 'viewerjs'
@ -94,38 +95,43 @@ export class FireForceComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => { this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60 var gridSize = 60
var count = markerArrcluster.length; var count = markerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18); let render = MapFactory.RenderClusterMarkerInstance();
var div = document.createElement('div'); render.contentRender = (contextCount) => {
var Hue = 180 - factor * 180; var factor = Math.pow(contextCount / count, 1 / 18);
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var div = document.createElement('div');
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var Hue = 180 - factor * 180;
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.width = div.style.height = size + 'px'; div.style.backgroundColor = bgColor;
div.style.border = 'solid 1px ' + borderColor; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.borderRadius = size / 2 + 'px'; div.style.width = div.style.height = size + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.border = 'solid 1px ' + borderColor;
div.innerHTML = context.count; div.style.borderRadius = size / 2 + 'px';
div.style.lineHeight = size + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.style.color = fontColor; div.innerHTML = contextCount;
div.style.fontSize = '14px'; div.style.lineHeight = size + 'px';
div.style.textAlign = 'center'; div.style.color = fontColor;
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); div.style.fontSize = '14px';
context.marker.setContent(div) 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)=>{ render.pixelNonRender = () => {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; return MapFactory.PixelInstance(-15, -15);
var offset = new AMap.Pixel(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
} }
this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
this.cluster.on('click',(e)=>{ this.cluster.on('click',(e)=>{
if(e.clusterData.length == 1){ 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 { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs' import Viewer from 'viewerjs'
import Swiper from 'swiper'; import Swiper from 'swiper';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var CryptoJS declare var CryptoJS
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -127,38 +128,44 @@ export class LinkageForcesComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => { this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60 var gridSize = 60
var count = markerArrcluster.length; var count = markerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18); let render = MapFactory.RenderClusterMarkerInstance();
var div = document.createElement('div'); render.contentRender = (contextCount) => {
var Hue = 180 - factor * 180; var factor = Math.pow(contextCount / count, 1 / 18);
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var div = document.createElement('div');
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var Hue = 180 - factor * 180;
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.width = div.style.height = size + 'px'; div.style.backgroundColor = bgColor;
div.style.border = 'solid 1px ' + borderColor; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.borderRadius = size / 2 + 'px'; div.style.width = div.style.height = size + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.border = 'solid 1px ' + borderColor;
div.innerHTML = context.count; div.style.borderRadius = size / 2 + 'px';
div.style.lineHeight = size + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.style.color = fontColor; div.innerHTML = contextCount;
div.style.fontSize = '14px'; div.style.lineHeight = size + 'px';
div.style.textAlign = 'center'; div.style.color = fontColor;
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); div.style.fontSize = '14px';
context.marker.setContent(div) div.style.textAlign = 'center';
return div;
}; };
var _renderMarker = (context)=> { render.pixelRender = (contextCount) => {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
var offset = new AMap.Pixel(-15, -15); return MapFactory.PixelInstance(-size / 2, -size / 2);
context.marker.setContent(content) };
context.marker.setOffset(offset)
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, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
this.cluster.on('click',(e)=>{ this.cluster.on('click',(e)=>{
if(e.clusterData.length == 1){ 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 { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -83,38 +84,43 @@ export class WaterCollectionComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => { this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60 var gridSize = 60
var count = markerArrcluster.length; var count = markerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18); let render = MapFactory.RenderClusterMarkerInstance();
var div = document.createElement('div'); render.contentRender = (contextCount) => {
var Hue = 180 - factor * 180; var factor = Math.pow(contextCount / count, 1 / 18);
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var div = document.createElement('div');
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var Hue = 180 - factor * 180;
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.width = div.style.height = size + 'px'; div.style.backgroundColor = bgColor;
div.style.border = 'solid 1px ' + borderColor; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.borderRadius = size / 2 + 'px'; div.style.width = div.style.height = size + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.border = 'solid 1px ' + borderColor;
div.innerHTML = context.count; div.style.borderRadius = size / 2 + 'px';
div.style.lineHeight = size + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.style.color = fontColor; div.innerHTML = contextCount;
div.style.fontSize = '14px'; div.style.lineHeight = size + 'px';
div.style.textAlign = 'center'; div.style.color = fontColor;
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); div.style.fontSize = '14px';
context.marker.setContent(div) 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)=> { render.pixelNonRender = () => {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; return MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
var offset = new AMap.Pixel(-15, -15);
context.marker.setOffset(offset)
} }
this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
this.cluster.on('click',(e)=>{ this.cluster.on('click',(e)=>{
if(e.clusterData.length == 1){ 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"], () => { this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60 var gridSize = 60
var count = unitMarkerArrcluster.length; 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 div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; 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 borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; 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.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); return div;
context.marker.setContent(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) => { render.pixelNonRender = () => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`; return MapFactory.PixelInstance(-15, -15);
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
} }
this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, { this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
this.unitCluster.on('click', (e) => { this.unitCluster.on('click', (e) => {
if (e.clusterData.length == 1) { if (e.clusterData.length == 1) {
@ -440,7 +445,7 @@ export class GisLabelingComponent implements OnInit {
</div> </div>
</div>` </div>`
// 创建一个自定义内容的 infowindow 实例 // 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({ this.infoWindow = MapFactory.InfoWindowInstance({
position: [item.location.x, item.location.y], position: [item.location.x, item.location.y],
offset: MapFactory.PixelInstance(0, -30), offset: MapFactory.PixelInstance(0, -30),
content: markerContent, content: markerContent,
@ -539,8 +544,10 @@ export class GisLabelingComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"], () => { this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60 var gridSize = 60
var count = fireForceMarkerArrcluster.length; 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 div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; 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 borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; 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.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); return div;
context.marker.setContent(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) => { render.pixelNonRender = () => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`; return MapFactory.PixelInstance(-15, -15);
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
} }
this.fireForceCluster = new AMap.MarkerCluster(this.map, fireForceMarkerArrcluster, { this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
}); });
} }
@ -682,8 +692,10 @@ export class GisLabelingComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"], () => { this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60 var gridSize = 60
var count = linkageForcesMarkerArrcluster.length; 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 div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; 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 borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; 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.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); return div;
context.marker.setContent(div)
}; };
var _renderMarker = (context) => { render.pixelRender = (contextCount) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
var offset = MapFactory.PixelInstance(-15, -15); return MapFactory.PixelInstance(-size / 2, -size / 2);
context.marker.setContent(content) };
context.marker.setOffset(offset)
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, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
}); });
} }
@ -850,8 +866,8 @@ export class GisLabelingComponent implements OnInit {
return MapFactory.PixelInstance(-size / 2, -size / 2); return MapFactory.PixelInstance(-size / 2, -size / 2);
}; };
render.contentNonRender = () => { render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${render.getFirstImages}" alt="">`; return `<img class='clusterImgCollection' src="${src}" alt="">`;
}; };
render.pixelNonRender = () => { render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15); return MapFactory.PixelInstance(-15, -15);
@ -1013,16 +1029,13 @@ export class GisLabelingComponent implements OnInit {
} else { } else {
this.unitCluster ? this.unitCluster.setData([]) : null this.unitCluster ? this.unitCluster.setData([]) : null
this.mapPattern = false this.mapPattern = false
this.map = new AMap.Map('map', { this.map = MapFactory.MapInstance('map', {
viewMode: '3D', viewMode: '3D',
pitch: 60, pitch: 60,
rotation: -35, rotation: -35,
features: ['bg', 'road', 'point', 'building'], features: ['bg', 'road', 'point', 'building'],
mapStyle: 'amap://styles/light', mapStyle: 'amap://styles/light',
}); });
this.map.setCity('上海市'); this.map.setCity('上海市');
} }
this.satelliteModel = false this.satelliteModel = false
@ -1042,7 +1055,7 @@ export class GisLabelingComponent implements OnInit {
that.map = MapFactory.MapInstance('map', { layers: [layer] }); that.map = MapFactory.MapInstance('map', { layers: [layer] });
that.map.setCity('上海市'); that.map.setCity('上海市');
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () { 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.forEach((element, index) => { this.map.remove(element); }); //先删除所有标点
this.markers = [] this.markers = []
let marker = new AMap.Marker({ let marker = MapFactory.MarkerInstance({
map: this.map, map: this.map,
position: [e.location.x, e.location.y], // 基点位置, position: [e.location.x, e.location.y], // 基点位置,
}); });
@ -1220,7 +1233,7 @@ export class GisLabelingComponent implements OnInit {
</div> </div>
</div>` </div>`
// 创建一个自定义内容的 infowindow 实例 // 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({ this.infoWindow = MapFactory.InfoWindowInstance({
position: [e.location.x, e.location.y], position: [e.location.x, e.location.y],
offset: MapFactory.PixelInstance(0, -30), offset: MapFactory.PixelInstance(0, -30),
content: markerContent, 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('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
marker.on('click', (ev) => { //marker点击事件 marker.on('click', (ev) => { //marker点击事件
this.infoWindow = new AMap.InfoWindow({ this.infoWindow = MapFactory.InfoWindowInstance({
position: [e.location.x, e.location.y], position: [e.location.x, e.location.y],
offset: MapFactory.PixelInstance(0, -30), offset: MapFactory.PixelInstance(0, -30),
content: markerContent, 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 { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -224,38 +225,43 @@ export class WaterRoadComponent implements OnInit {
this.map.plugin(["AMap.MarkerClusterer"],() => { this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60 var gridSize = 60
var count = waterMarkerArrcluster.length; var count = waterMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18); let render = MapFactory.RenderClusterMarkerInstance();
var div = document.createElement('div'); render.contentRender = (contextCount) => {
var Hue = 180 - factor * 180; var factor = Math.pow(contextCount / count, 1 / 18);
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var div = document.createElement('div');
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var Hue = 180 - factor * 180;
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.width = div.style.height = size + 'px'; div.style.backgroundColor = bgColor;
div.style.border = 'solid 1px ' + borderColor; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.borderRadius = size / 2 + 'px'; div.style.width = div.style.height = size + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.border = 'solid 1px ' + borderColor;
div.innerHTML = context.count; div.style.borderRadius = size / 2 + 'px';
div.style.lineHeight = size + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.style.color = fontColor; div.innerHTML = contextCount;
div.style.fontSize = '14px'; div.style.lineHeight = size + 'px';
div.style.textAlign = 'center'; div.style.color = fontColor;
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); div.style.fontSize = '14px';
context.marker.setContent(div) 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)=> { render.pixelNonRender = () => {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; return MapFactory.PixelInstance(-15, -15);
var offset = new AMap.Pixel(-12.5, -12.5);
context.marker.setContent(content)
context.marker.setOffset(offset)
} }
this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
}); });
this.waterCluster.on('click',(e)=>{ this.waterCluster.on('click',(e)=>{
if(e.clusterData.length == 1){ if(e.clusterData.length == 1){

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

@ -1,7 +1,7 @@
const mapSupplier: number = 1; //1:高德 const mapSupplier: number = 1; //1:高德
import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker } from './map' import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, InfoWindow } from './map'
import { GaodeCircle, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map' import { GaodeCircle, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map'
import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map'; import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map';
import MapTools from './map-tools'; 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 { public static CircleInstance(options: any): ICircle {
switch (mapSupplier) { switch (mapSupplier) {
case 1: return new GaodeCircle(options); 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'; import MapTools from './map-tools';
declare var AMap: any; declare var AMap: any;
@ -28,7 +28,7 @@ export class GaoDeMap extends GaodeBasic implements IMap {
return this.self.add(obj.self) return this.self.add(obj.self)
} }
remove(obj: any) { remove(obj: any) {
return this.self.remove(obj) return this.self.remove(obj.self)
} }
setCity(city: string) { setCity(city: string) {
return this.self.setCity(city) return this.self.setCity(city)
@ -62,7 +62,9 @@ export class GaoDeMarker extends GaodeBasic implements IMarker {
super(); super();
let conf = MapTools.InstanceConvert(options); let conf = MapTools.InstanceConvert(options);
this.self = new AMap.Marker(conf); this.self = new AMap.Marker(conf);
this._position = this.self._position;
} }
_position: number[]
setMap() { setMap() {
this.self.setMap(null) this.self.setMap(null)
} }
@ -83,6 +85,12 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
let conf = MapTools.InstanceConvert(options); let conf = MapTools.InstanceConvert(options);
this.self = new AMap.MarkerCluster(map.self, list, conf) 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 { 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) { 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(); super();
this.self = new AMap.Circle(options); this.self = new AMap.Circle(options);
} }
setMap(map: any) { setMap(map: IMap) {
return this.self.setMap(map) return this.self.setMap(map.self)
} }
setCenter(pos: number[]) { setCenter(pos: number[]) {
return this.self.setCenter(pos) return this.self.setCenter(pos)
@ -134,7 +156,7 @@ export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf {
context.marker.setOffset(this.pixelRender(context.count).self); context.marker.setOffset(this.pixelRender(context.count).self);
}, },
renderMarker: (context) => { renderMarker: (context) => {
context.marker.setContent(this.contentNonRender()); context.marker.setContent(this.contentNonRender(this.getFirstImages(context)));
context.marker.setOffset(this.pixelNonRender(context.count).self); 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; this.self = d;
} }
_position: number[];
setMap() { setMap() {
throw new Error('Method not implemented.'); 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 obj = Object.assign({}, data);
let convert = (obj: any, data: string) => { let convert = (obj: any, data: string) => {
if(!obj[data])return;
if (obj[data].discriminator === "ISelf") { if (obj[data].discriminator === "ISelf") {
obj[data] = obj[data].self; obj[data] = obj[data].self;
} else if (obj[data].discriminator === "ISelfCombine") { } 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 == undefined) return;
if (!(obj instanceof Object)) return; if (!(obj instanceof Object)) return;
for (var name in obj) { for (var name in obj) {
if (obj[name] instanceof Array) { if (obj[name] instanceof Array) {
for (var j in obj[name]) { for (var j in obj[name]) {
process(j); process(j,deep);
} }
continue; continue;
} }
convert(obj, name); convert(obj, name);
process(obj[name]); process(obj[name],deep);
} }
}catch(e){
console.log(e);
debugger
}
} }
process(obj); process(obj);
return 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 { export interface IMarker extends ISelf {
id: string; id: string;
_position:number[];
on(eventName: string, callback: Function); on(eventName: string, callback: Function);
setMap(); setMap();
} }
@ -43,11 +44,11 @@ export interface IRenderClusterMarker {
pixelNonRender: PixelRender; pixelNonRender: PixelRender;
} }
export class IMarkOptions { export class IMarkOptions {
position?: ILngLat; position?: ILngLat | number[];
content?: string; content?: string;
offset?: IPixel; offset?: IPixel;
map?: IMap;
} }
export interface IPixel extends ISelf { 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 { export interface ICircle extends ISelf {
setRadius(num: number); setRadius(num: number);
setCenter(pos: number[]) setCenter(pos: number[])

Write Preview
Loading…
Cancel
Save