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

[完善]优化地图聚合显示

tangshan
邵佳豪 3 years ago
parent
98d6621799
commit
c45beb0176
14 changed files with 203 additions and 100 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. 1
      src/app/data-collection/fire-force/fire-force.component.ts
  2. 1
      src/app/data-collection/linkage-forces/linkage-forces.component.ts
  3. 1
      src/app/data-collection/water-collection/water-collection.component.ts
  4. 2
      src/app/gis-management/gis-labeling/gis-labeling.component.html
  5. 37
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  6. 1
      src/app/key-unit/water-road/water-road.component.ts
  7. 10
      src/app/ui/collection-tools-building/collection-tools.component.html
  8. 116
      src/app/ui/collection-tools-building/collection-tools.component.scss
  9. 8
      src/index.html
  10. 2
      src/modules/map/declare/factory.ts
  11. 26
      src/modules/map/declare/gaode-map.ts
  12. 3
      src/modules/map/declare/keda-map.ts
  13. 93
      src/modules/map/declare/map.d.ts
  14. 2
      src/styles.scss

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

@ -799,6 +799,7 @@ export class FireForceComponent implements OnInit {
} }
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
this.cluster.on('click', (e) => { this.cluster.on('click', (e) => {

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

@ -166,6 +166,7 @@ export class LinkageForcesComponent implements OnInit {
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
this.cluster.on('click',(e)=>{ this.cluster.on('click',(e)=>{

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

@ -120,6 +120,7 @@ export class WaterCollectionComponent implements OnInit {
} }
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
this.cluster.on('click',(e)=>{ this.cluster.on('click',(e)=>{

2
src/app/gis-management/gis-labeling/gis-labeling.component.html
Unescape View File

@ -90,7 +90,7 @@
<!-- 右上角 --> <!-- 右上角 -->
<div class="rightTopBox"> <div class="rightTopBox">
<!-- <button (click)="setMaxZoom()">设置聚合范围</button> -->
<div class="topbox"> <div class="topbox">
<div (click)="clickTitle(key)" *ngFor="let item of titleList;let key = index" class="titleItem" [ngClass]="{'selectedItem': key == selectedTitle}"> <div (click)="clickTitle(key)" *ngFor="let item of titleList;let key = index" class="titleItem" [ngClass]="{'selectedItem': key == selectedTitle}">
<img [src]="item.iconImg" alt=""> <img [src]="item.iconImg" alt="">

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

@ -211,7 +211,7 @@ export class GisLabelingComponent implements OnInit {
}) })
} }
//地图范围圆圈---重点单位 //地图范围圆圈---重点单位
circle:ICircle = MapFactory.CircleInstance({ circle: ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -223,7 +223,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50, zIndex: 50,
}) })
//地图范围圆圈---水源 //地图范围圆圈---水源
circleofwater:ICircle = MapFactory.CircleInstance({ circleofwater: ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -235,7 +235,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50, zIndex: 50,
}) })
//地图范围圆圈---消防力量 //地图范围圆圈---消防力量
circleoffireForce:ICircle = MapFactory.CircleInstance({ circleoffireForce: ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -247,7 +247,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50, zIndex: 50,
}) })
//地图范围圆圈---联动力量 //地图范围圆圈---联动力量
circleoflinkageForces:ICircle = MapFactory.CircleInstance({ circleoflinkageForces: ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -402,6 +402,7 @@ export class GisLabelingComponent implements OnInit {
} }
this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, { this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
this.unitCluster.on('click', (e) => { this.unitCluster.on('click', (e) => {
@ -456,10 +457,17 @@ export class GisLabelingComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件
} }
},this) }, this)
}
setMaxZoom() {
this.unitCluster ? this.unitCluster.setMaxZoom(0) : null
this.waterCluster ? this.waterCluster.setMaxZoom(0) : null
this.fireForceCluster ? this.fireForceCluster.setMaxZoom(0) : null
this.linkageForcesCluster ? this.linkageForcesCluster.setMaxZoom(0) : null
} }
//取消显示单位 //取消显示单位
resetUnit() { resetUnit() {
this.keyUnitForm.reset() this.keyUnitForm.reset()
@ -578,6 +586,7 @@ export class GisLabelingComponent implements OnInit {
} }
this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, { this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
@ -727,6 +736,7 @@ export class GisLabelingComponent implements OnInit {
this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, { this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
@ -901,6 +911,7 @@ export class GisLabelingComponent implements OnInit {
// } // }
this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
@ -913,7 +924,7 @@ export class GisLabelingComponent implements OnInit {
if (e.clusterData.length == 1) { if (e.clusterData.length == 1) {
} }
},this) }, this)
} }
//取消显示水源 //取消显示水源
@ -1048,9 +1059,9 @@ export class GisLabelingComponent implements OnInit {
zIndex: 0, //叠加层级 zIndex: 0, //叠加层级
resizeEnable: true //是否监控地图容器尺寸变化, resizeEnable: true //是否监控地图容器尺寸变化,
}) })
that.map = MapFactory.MapInstance('map', { that.map = MapFactory.MapInstance('map', {
layers: [layer], layers: [layer],
WebGLParams: {preserveDrawingBuffer: true} WebGLParams: { preserveDrawingBuffer: true }
}); });
that.map.setCity('上海市'); that.map.setCity('上海市');
that.mouseTool = MapFactory.MouseToolInstance(that.map); that.mouseTool = MapFactory.MouseToolInstance(that.map);
@ -1063,7 +1074,7 @@ export class GisLabelingComponent implements OnInit {
measureDistance; //测距离 measureDistance; //测距离
distanceList = []; //测距离 点和线 distanceList = []; //测距离 点和线
measureArea; //测面积 measureArea; //测面积
mouseTool:IMouseTool;//二合一测距和侧面积 mouseTool: IMouseTool;//二合一测距和侧面积
checkRadio = false //判断测距和侧面积是否选中 checkRadio = false //判断测距和侧面积是否选中
//测距离 开始 //测距离 开始
@ -1339,7 +1350,7 @@ export class GisLabelingComponent implements OnInit {
var autoOptions = { city: info.city } var autoOptions = { city: info.city }
let keywords let keywords
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
var autoComplete = MapFactory.AutocompleteInstance(autoOptions,that); var autoComplete = MapFactory.AutocompleteInstance(autoOptions, that);
autoComplete.search(keywords, function (status, result) { autoComplete.search(keywords, function (status, result) {
if (result && result.tips && result.tips.length) { //搜索到数据时 if (result && result.tips && result.tips.length) { //搜索到数据时
that._ngZone.run(() => { that._ngZone.run(() => {
@ -1432,7 +1443,7 @@ export class GisLabelingComponent implements OnInit {
this.snackBar.open('未查询到终点坐标信息，请输入有效地址', '确定', config); this.snackBar.open('未查询到终点坐标信息，请输入有效地址', '确定', config);
return return
} else { } else {
this.routeGIS.search(this,this.startCoordinate, this.endCoordinate, this.routeGIS.search(this, this.startCoordinate, this.endCoordinate,
function (status, result) { function (status, result) {
if (status === 'complete') { if (status === 'complete') {
that.routes = result.routes[0] that.routes = result.routes[0]
@ -1455,7 +1466,7 @@ export class GisLabelingComponent implements OnInit {
}); });
// 根据起终点名称规划驾车导航路线 // 根据起终点名称规划驾车导航路线
this.routeGIS.search(this,this.startCoordinate, this.endCoordinate, this.routeGIS.search(this, this.startCoordinate, this.endCoordinate,
function (status, result) { function (status, result) {
if (status === 'complete') { if (status === 'complete') {
that.routes = result.routes[0] that.routes = result.routes[0]

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

@ -263,6 +263,7 @@ export class WaterRoadComponent implements OnInit {
} }
this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
maxZoom :15,
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
}); });
this.waterCluster.on('click',(e)=>{ this.waterCluster.on('click',(e)=>{

10
src/app/ui/collection-tools-building/collection-tools.component.html
Unescape View File

@ -53,7 +53,7 @@
<!-- 头部操作栏 --> <!-- 头部操作栏 -->
<div class="headerOperate"> <div class="headerOperate">
<button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" <div *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)"
class="bigeditdeletebtn" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}"> class="bigeditdeletebtn" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
<span class="bigeditdeletebtnname" [title]="item.name">{{item.name}}</span> <span class="bigeditdeletebtnname" [title]="item.name">{{item.name}}</span>
<span class="editdeletebtn" *ngIf="isEditPattern && pattern"> <span class="editdeletebtn" *ngIf="isEditPattern && pattern">
@ -62,10 +62,10 @@
<mat-icon (click)="deleteBuilding($event,item)" <mat-icon (click)="deleteBuilding($event,item)"
style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon> style="font-size: 23px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
</span> </span>
</button> </div>
<button mat-button (click)="createBuilding()" *ngIf="isEditPattern && pattern"> <div style="cursor: pointer;" (click)="createBuilding()" *ngIf="isEditPattern && pattern">
<span style="font-size: 24px;">+</span> <span style="font-size: 20px;">+</span>
</button> </div>
</div> </div>
<!--功能区 --> <!--功能区 -->

116
src/app/ui/collection-tools-building/collection-tools.component.scss
Unescape View File

@ -1,12 +1,15 @@
@import "./panel.scss"; @import "./panel.scss";
html { html {
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
} }
.icongray { .icongray {
color: #d9d0dc; color: #d9d0dc;
} }
.content { .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -30,38 +33,46 @@ html {
align-items: center; align-items: center;
min-height: 40px; min-height: 40px;
background-color: #fff; background-color: #fff;
.zoom { .zoom {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 15px; margin-left: 15px;
cursor: pointer; cursor: pointer;
img { img {
margin-right: 3px; margin-right: 3px;
} }
} }
.marginLeftRight { .marginLeftRight {
margin: 0 8px; margin: 0 8px;
font-size: 16px; font-size: 16px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
.mat-icon { .mat-icon {
vertical-align: middle; vertical-align: middle;
font-size: 24px; font-size: 24px;
} }
} }
.copytobutn { .copytobutn {
width: 60px; width: 60px;
min-width: 60px; min-width: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
span { span {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
} }
.patternSwitch { .patternSwitch {
position: absolute; position: absolute;
right: 140px; right: 140px;
span { span {
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
@ -71,15 +82,18 @@ html {
border-radius: 3px; border-radius: 3px;
padding: 0 5px; padding: 0 5px;
} }
.selectedPattern { .selectedPattern {
background-color: #2196f3; background-color: #2196f3;
color: white; color: white;
} }
} }
.rightSave { .rightSave {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 60px; right: 60px;
label { label {
vertical-align: middle; vertical-align: middle;
color: #279fff; color: #279fff;
@ -89,15 +103,6 @@ html {
//头部操作栏 //头部操作栏
.headerOperate { .headerOperate {
img {
width: 24px;
height: 24px;
vertical-align: middle;
margin-left: 1px;
}
span {
font-size: 15px;
}
flex: 5%; flex: 5%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -105,23 +110,36 @@ html {
box-sizing: border-box; box-sizing: border-box;
margin: 3px 0; margin: 3px 0;
background-color: white; background-color: white;
button { white-space: nowrap;
overflow-x: scroll;
span {
font-size: 15px;
}
div {
cursor: default;
border: 0.5px solid rgb(208, 211, 214); border: 0.5px solid rgb(208, 211, 214);
margin: 0 2px; margin: 0 2px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 3px 8px;
height: 96%;
border-radius: 3px;
} }
.editdeletebtn { .editdeletebtn {
display: none; display: none;
} }
.bigeditdeletebtn { .bigeditdeletebtn {
max-width: 200px;
.bigeditdeletebtnname { .bigeditdeletebtnname {
display: inline-block; // display: inline-block;
max-width: 120px; // white-space: nowrap;
white-space: nowrap; // overflow: hidden;
overflow: hidden; // text-overflow: ellipsis;
text-overflow: ellipsis;
} }
} }
.bigeditdeletebtn:hover { .bigeditdeletebtn:hover {
.editdeletebtn { .editdeletebtn {
display: inline-block; display: inline-block;
@ -135,6 +153,7 @@ html {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
//左右两侧功能栏 统一样式 //左右两侧功能栏 统一样式
.publicCss { .publicCss {
border-radius: 5px; border-radius: 5px;
@ -142,14 +161,17 @@ html {
height: 100%; height: 100%;
top: 0; top: 0;
} }
.functionalDomain { .functionalDomain {
flex: 90%; flex: 90%;
overflow: hidden; overflow: hidden;
.functionalDomainContent { .functionalDomainContent {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.functionalDomainLeft { .functionalDomainLeft {
background-color: #fff; background-color: #fff;
display: flex; display: flex;
@ -161,6 +183,7 @@ html {
width: 235px; width: 235px;
left: 0; left: 0;
z-index: 112; z-index: 112;
.leftDragDiv { .leftDragDiv {
position: absolute; position: absolute;
right: 0; right: 0;
@ -170,6 +193,7 @@ html {
cursor: e-resize; cursor: e-resize;
} }
} }
.functionalDomainRight { .functionalDomainRight {
z-index: 1001; z-index: 1001;
margin-right: 0px; margin-right: 0px;
@ -184,15 +208,18 @@ html {
min-width: 195px; min-width: 195px;
width: 195px; width: 195px;
} }
.functionalDomainRight { .functionalDomainRight {
width: 195px; width: 195px;
} }
} }
//右边导航栏显示隐藏 //右边导航栏显示隐藏
.togglePanel2 { .togglePanel2 {
margin-right: -2000px; margin-right: -2000px;
transition: margin-right 1s; transition: margin-right 1s;
} }
//左侧导航栏显示隐藏 //左侧导航栏显示隐藏
.togglePanel { .togglePanel {
margin-left: -2000px; margin-left: -2000px;
@ -205,12 +232,14 @@ html {
width: 100%; width: 100%;
height: 35px; height: 35px;
background-color: #464646; background-color: #464646;
div { div {
width: 50%; width: 50%;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
background-color: #595959; background-color: #595959;
border-radius: 5px; border-radius: 5px;
span { span {
color: white; color: white;
font-size: 14px; font-size: 14px;
@ -224,13 +253,16 @@ html {
.property { .property {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
.siteproperty { .siteproperty {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
p { p {
color: #9c9fa5; color: #9c9fa5;
padding-left: 5px; padding-left: 5px;
} }
.siteproperty_size { .siteproperty_size {
background-color: #e3e3e3; background-color: #e3e3e3;
width: 93%; width: 93%;
@ -238,6 +270,7 @@ html {
border-radius: 3px; border-radius: 3px;
min-height: 21px; min-height: 21px;
} }
.rightAttribute { .rightAttribute {
width: 12%; width: 12%;
height: 99.5%; height: 99.5%;
@ -248,54 +281,68 @@ html {
border: 2px solid #464646; border: 2px solid #464646;
} }
} }
.assetsproperty { .assetsproperty {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
p { p {
color: #9c9fa5; color: #9c9fa5;
margin: 1px 0 3px 8px; margin: 1px 0 3px 8px;
font-size: 14px; font-size: 14px;
} }
span { span {
font-size: 15px; font-size: 15px;
} }
input { input {
height: 18px; height: 18px;
} }
.biginput { .biginput {
display: block; display: block;
width: 88%; width: 88%;
margin: 0 auto; margin: 0 auto;
} }
.smallinput { .smallinput {
display: block; display: block;
width: 19%; width: 19%;
margin-left: 8px; margin-left: 8px;
} }
.textarea { .textarea {
display: block; display: block;
width: 88%; width: 88%;
height: 50px; height: 50px;
margin: 0 auto; margin: 0 auto;
} }
.swiper-button-next { .swiper-button-next {
right: 6px; right: 6px;
} }
.swiper-button-prev { .swiper-button-prev {
left: 6px; left: 6px;
} }
.swiper-container { .swiper-container {
// --swiper-theme-color: #ff6600;/* 设置Swiper风格 */ // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
// --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */ // --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 20px; /* 设置按钮大小 */ --swiper-navigation-size: 20px;
/* 设置按钮大小 */
} }
.hoverred:hover { .hoverred:hover {
color: rgb(187, 28, 28); color: rgb(187, 28, 28);
} }
.selectDiv { .selectDiv {
height: 21px; height: 21px;
position: relative; position: relative;
margin-bottom: 5px; margin-bottom: 5px;
select { select {
width: 98px; width: 98px;
height: 22px; height: 22px;
@ -307,9 +354,11 @@ html {
border-radius: 2px; border-radius: 2px;
} }
} }
.colorBigDiv { .colorBigDiv {
width: 88%; width: 88%;
margin-left: 8px; margin-left: 8px;
.colorBigTemplateDiv { .colorBigTemplateDiv {
span { span {
color: #9c9fa5; color: #9c9fa5;
@ -317,6 +366,7 @@ html {
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
} }
.colorTemplateDiv { .colorTemplateDiv {
width: 65%; width: 65%;
height: 22px; height: 22px;
@ -334,6 +384,7 @@ html {
float: left; float: left;
border: 2px solid white; border: 2px solid white;
} }
.coloractive { .coloractive {
border: 2px solid black; border: 2px solid black;
} }
@ -341,6 +392,7 @@ html {
} }
} }
} }
.hideAllTreeNode { .hideAllTreeNode {
box-sizing: border-box; box-sizing: border-box;
margin: 3px 0; margin: 3px 0;
@ -349,24 +401,29 @@ html {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
display: flex; display: flex;
label { label {
display: inline-block; display: inline-block;
flex: 1; flex: 1;
cursor: pointer; cursor: pointer;
} }
} }
//右侧消防要素 //右侧消防要素
.firecategories { .firecategories {
background-color: #fff; background-color: #fff;
position: relative; position: relative;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
.firecategoriesTree { .firecategoriesTree {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
mat-tree-node { mat-tree-node {
position: relative; position: relative;
} }
.isLookCss { .isLookCss {
position: absolute; position: absolute;
right: 6px; right: 6px;
@ -382,8 +439,10 @@ div:focus {
//没有图片时显示无图片背景图 //没有图片时显示无图片背景图
.noImgCss { .noImgCss {
background: url(../../../assets/images/noImg.png) no-repeat center center; background: url(../../../assets/images/noImg.png) no-repeat center center;
background-size: 88% 100%; /*按比例缩放*/ background-size: 88% 100%;
/*按比例缩放*/
} }
.input { .input {
width: 18px; width: 18px;
height: 18px; height: 18px;
@ -400,12 +459,15 @@ div:focus {
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
} }
.treeNode:hover { .treeNode:hover {
background-color: #ccebf8; background-color: #ccebf8;
} }
.isLookPattern { .isLookPattern {
display: none; display: none;
} }
.treeText { .treeText {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -421,6 +483,7 @@ div:focus {
overflow: hidden; overflow: hidden;
right: 0; right: 0;
} }
.weatherBox { .weatherBox {
height: 40px; height: 40px;
width: 700px; width: 700px;
@ -428,21 +491,25 @@ div:focus {
position: absolute; position: absolute;
right: 0; right: 0;
transition: right linear 0.5s; transition: right linear 0.5s;
.openbtn { .openbtn {
font-size: 45px; font-size: 45px;
height: 45px; height: 45px;
width: 40px; width: 40px;
} }
.name { .name {
font-size: 16px; font-size: 16px;
vertical-align: middle; vertical-align: middle;
margin-left: 3px; margin-left: 3px;
} }
input { input {
width: 140px; width: 140px;
height: 22px; height: 22px;
margin-left: 3px; margin-left: 3px;
} }
select { select {
width: 96px; width: 96px;
height: 25px; height: 25px;
@ -450,12 +517,15 @@ div:focus {
vertical-align: middle; vertical-align: middle;
} }
} }
.open { .open {
right: 0px; right: 0px;
} }
.close { .close {
right: -622px; right: -622px;
} }
.bottomCss { .bottomCss {
position: absolute; position: absolute;
left: 232px; left: 232px;
@ -466,6 +536,7 @@ div:focus {
z-index: 100; z-index: 100;
background-color: white; background-color: white;
border: 1px solid #464646; border: 1px solid #464646;
.dragDiv { .dragDiv {
width: 100%; width: 100%;
height: 3px; height: 3px;
@ -474,9 +545,11 @@ div:focus {
z-index: 1000; z-index: 1000;
cursor: n-resize; cursor: n-resize;
} }
.title { .title {
height: 35px; height: 35px;
background-color: #464646; background-color: #464646;
div { div {
background-color: #464646; background-color: #464646;
float: left; float: left;
@ -486,10 +559,12 @@ div:focus {
padding-left: 5px; padding-left: 5px;
cursor: pointer; cursor: pointer;
} }
.detailsAndattentBtn { .detailsAndattentBtn {
background-color: #595959; background-color: #595959;
} }
} }
.body { .body {
textarea { textarea {
width: 100%; width: 100%;
@ -497,3 +572,8 @@ div:focus {
} }
} }
} }
::-webkit-scrollbar {
height: 6px;
}

8
src/index.html
Unescape View File

@ -23,10 +23,10 @@
</body> </body>
<!-- <script type="text/javascript" src="./assets/kmap/kmap-service-main-kd.js"></script> --> <!-- <script type="text/javascript" src="./assets/kmap/kmap-service-main-kd.js"></script> -->
<!-- <script src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script> <script src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script> --> <script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script> <!-- <script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script> <script src="https://webapi.amap.com/ui/1.1/main.js"></script> -->
<script src="/assets/html2canvas.js"></script> <script src="/assets/html2canvas.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.js"></script> <script type="text/javascript" src="/assets/wordexport/jquery.js"></script>
<script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script> <script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script>

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

@ -30,7 +30,7 @@ export class MapFactory {
} }
} }
public static MarkerClusterInstance(map: IMap, list: Object[], renderObj: { gridSize: number, render: IRenderClusterMarker }): IMarkerCluster { public static MarkerClusterInstance(map: IMap, list: Object[], renderObj: { gridSize: number, render: IRenderClusterMarker ,maxZoom: number}): IMarkerCluster {
switch (mapSupplier) { switch (mapSupplier) {
case 1: return new GaoDeMarkerCluster(map, list, renderObj); case 1: return new GaoDeMarkerCluster(map, list, renderObj);
case 2: return new KedaMarkerCluster(map, list, renderObj); case 2: return new KedaMarkerCluster(map, list, renderObj);

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

@ -253,7 +253,7 @@ export class GaoDeMarker extends GaodeBasic implements IMarker {
this._position = this.self._position; this._position = this.self._position;
} }
getLngLatByMarkerEvent(map: IMap, e: any): ILngLat { getLngLatByMarkerEvent(map: IMap, e: any): ILngLat {
return map.containerToLngLat(e.pixel); return map.containerToLngLat(e.pixel);
} }
setContent(html: string) { setContent(html: string) {
return this.self.setContent(html) return this.self.setContent(html)
@ -285,12 +285,16 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
this.self = new AMap.MarkerCluster(map.self, list, conf) this.self = new AMap.MarkerCluster(map.self, list, conf)
}); });
} }
setMaxZoom(zoom: number) {
this.self.setMaxZoom(zoom)
}
on(eventName: string, callback: Function): void { on(eventName: string, callback: Function): void {
this.self.on(eventName, callback); this.self.on(eventName, callback);
} }
setData(list: any[]) { setData(list: any[]) {
this.self.setData(list) this.self.setData(list)
} }
} }
export class GaoDeLngLat extends GaodeBasic implements ILngLat { export class GaoDeLngLat extends GaodeBasic implements ILngLat {
@ -369,8 +373,8 @@ export class GaodeDriving extends GaodeBasic implements IDriving {
}) })
} }
search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback) { search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback) {
return this.self.search(posStart.getArray(), posEnd.getArray(), (status, result)=>{ return this.self.search(posStart.getArray(), posEnd.getArray(), (status, result) => {
callback.call(component,status,result) callback.call(component, status, result)
}) })
} }
clear() { clear() {
@ -388,14 +392,14 @@ export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete {
}) })
} }
on(eventName: string, callback: AutocompleteSelectCallback) { on(eventName: string, callback: AutocompleteSelectCallback) {
this.self.on(eventName, (event) => { this.self.on(eventName, (event) => {
callback.call(this.component, event) callback.call(this.component, event)
}) })
} }
search(address: string, callback: AutocompleteSearchCallback) { search(address: string, callback: AutocompleteSearchCallback) {
this.self.search(address, (status, result) => { this.self.search(address, (status, result) => {
callback.call(this.component, status, result) callback.call(this.component, status, result)
}) })
} }
} }

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

@ -694,6 +694,9 @@ export class KedaMarkerCluster extends KedaBasic implements IMarkerCluster { //M
// } // }
// }) // })
} }
setMaxZoom(zoom: number) {
throw new Error('Method not implemented.');
}
on(eventName: string, callback: MarkerClusterCallback, component?: any): void { on(eventName: string, callback: MarkerClusterCallback, component?: any): void {
let _this =this; let _this =this;
if(!this.id){ if(!this.id){

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

@ -7,26 +7,26 @@ export class ClickOptions {
lnglat: ILngLat lnglat: ILngLat
pixel: IPixel pixel: IPixel
type: string type: string
target: { id:string } target: { id: string }
} }
type EventCallback = (event?:ClickOptions)=>void; type EventCallback = (event?: ClickOptions) => void;
export interface IMap extends ISelf { export interface IMap extends ISelf {
on(eventName: string, callback: EventCallback, component?: any); on(eventName: string, callback: EventCallback, component?: any);
add(obj: IMarker|ITileLayer|any); add(obj: IMarker | ITileLayer | any);
remove(obj: IMarker|ITileLayer|any); remove(obj: IMarker | ITileLayer | any);
clearMap(); clearMap();
containerToLngLat(e:IPixel): ILngLat; //地图容器像素坐标转经纬度 containerToLngLat(e: IPixel): ILngLat; //地图容器像素坐标转经纬度
setCity(city: string); setCity(city: string);
getCity(callback: Function): any; getCity(callback: Function): any;
setZoom(zoom: number); setZoom(zoom: number);
setZoomAndCenter(zoom: number, pos: number[]); setZoomAndCenter(zoom: number, pos: number[]);
getZoom(): number; getZoom(): number;
setCenter(pos: number[]|ILngLat); setCenter(pos: number[] | ILngLat);
getCenter(): ILngLat; getCenter(): ILngLat;
getBounds(): any; getBounds(): any;
distance(a:number[],b:number[]): any; distance(a: number[], b: number[]): any;
setAdministrativeAreaStyle(component:any,getData?:Function,setData?:Function): any; //自定义 行政区划 样式 setAdministrativeAreaStyle(component: any, getData?: Function, setData?: Function): any; //自定义 行政区划 样式
} }
export interface IMapOptions { export interface IMapOptions {
@ -36,26 +36,27 @@ export interface IMapOptions {
export interface IMarker extends ISelf { export interface IMarker extends ISelf {
id: string; id: string;
_position:number[]; _position: number[];
on(eventName: string, callback: EventCallback, component?: any); on(eventName: string, callback: EventCallback, component?: any);
setPosition(x:ILngLat|number[]) setPosition(x: ILngLat | number[])
setContent(html:string) setContent(html: string)
setMap(); setMap();
getLngLatByMarkerEvent(map:IMap,e:any):ILngLat; getLngLatByMarkerEvent(map: IMap, e: any): ILngLat;
} }
export class MarkerClusterOptions { //聚合物 click 数据类型 export class MarkerClusterOptions { //聚合物 click 数据类型
cluster:any[] cluster: any[]
clusterData:any[] clusterData: any[]
lnglat:ILngLat lnglat: ILngLat
target:any target: any
markers:IMarker[] markers: IMarker[]
} }
type MarkerClusterCallback = (event:MarkerClusterOptions)=>void; type MarkerClusterCallback = (event: MarkerClusterOptions) => void;
export interface IMarkerCluster extends ISelf { export interface IMarkerCluster extends ISelf {
on(eventName: string, callback: MarkerClusterCallback, component?: any): void; on(eventName: string, callback: MarkerClusterCallback, component?: any): void;
setData(list: any[]); setData(list: any[]);
setMaxZoom(zoom: number)
} }
type HtmlRender = (...args) => string | HTMLElement; type HtmlRender = (...args) => string | HTMLElement;
@ -77,19 +78,19 @@ export class IMarkOptions {
} }
export interface IPixel extends ISelf { export interface IPixel extends ISelf {
x:number x: number
y:number y: number
getArray():number[] getArray(): number[]
} }
export interface ILngLat extends ISelf { export interface ILngLat extends ISelf {
typeName:string typeName: string
lng: number lng: number
lat: number lat: number
KL:number KL: number
kT:number kT: number
offset(x: number, y: number):ILngLat offset(x: number, y: number): ILngLat
getArray():number[] getArray(): number[]
} }
export interface ILayer extends ISelf { export interface ILayer extends ISelf {
@ -127,21 +128,21 @@ export class DrivingSearch { //Driving Search() 数据类型
time: number time: number
tolls_distance: number tolls_distance: number
steps: DrivingSearchSteps[] steps: DrivingSearchSteps[]
routes:any[] //伪代码 routes: any[] //伪代码
} }
export class DrivingSearchSteps { //Driving Search() Steps 数据类型 export class DrivingSearchSteps { //Driving Search() Steps 数据类型
instruction:string instruction: string
orientation:string orientation: string
road: string road: string
distance: number distance: number
time: number time: number
tolls_distance: number tolls_distance: number
} }
type DrivingSearchCallback = (status:string,searchData:DrivingSearch)=>void; type DrivingSearchCallback = (status: string, searchData: DrivingSearch) => void;
export interface IDriving extends ISelf { export interface IDriving extends ISelf {
clear(); clear();
search(component: any,posStart: ILngLat, posEnd: ILngLat, callback:DrivingSearchCallback); search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback);
} }
export class AutocompleteSearch { //Autocomplete Search() 数据类型 export class AutocompleteSearch { //Autocomplete Search() 数据类型
@ -156,13 +157,13 @@ export class AutocompleteSelect { //GaoDe POI 数据类型
district: string district: string
location: ILngLat location: ILngLat
type: string type: string
poi:{ location: ILngLat } poi: { location: ILngLat }
} }
type AutocompleteSearchCallback = (status:string,searchData:AutocompleteSearch)=>void; type AutocompleteSearchCallback = (status: string, searchData: AutocompleteSearch) => void;
type AutocompleteSelectCallback = (event:AutocompleteSelect)=>void; type AutocompleteSelectCallback = (event: AutocompleteSelect) => void;
export interface IAutocomplete extends ISelf { export interface IAutocomplete extends ISelf {
search(address: string,callback: AutocompleteSearchCallback) search(address: string, callback: AutocompleteSearchCallback)
on(eventName: string, callback: AutocompleteSelectCallback) on(eventName: string, callback: AutocompleteSelectCallback)
} }
@ -171,26 +172,26 @@ export class PlaceSearchSearch { //PlaceSearch Search() 数据类型
poiList: PlaceSearchSearchTips poiList: PlaceSearchSearchTips
} }
export class PlaceSearchSearchTips { //PlaceSearch Search() 数据类型 export class PlaceSearchSearchTips { //PlaceSearch Search() 数据类型
pois:AutocompleteSelect[] pois: AutocompleteSelect[]
pageIndex:number pageIndex: number
pageSize:number pageSize: number
count:number count: number
} }
type PlaceSearchCallback = (status:string,searchData:PlaceSearchSearch)=>void; type PlaceSearchCallback = (status: string, searchData: PlaceSearchSearch) => void;
export interface IPlaceSearch extends ISelf { export interface IPlaceSearch extends ISelf {
search(text:string, callback: PlaceSearchCallback); search(text: string, callback: PlaceSearchCallback);
} }
export interface IMouseTool extends ISelf { export interface IMouseTool extends ISelf {
rule(options:any) rule(options: any)
measureArea(options:any) measureArea(options: any)
close(isTrue:boolean) close(isTrue: boolean)
} }
export interface IInfoWindow extends ISelf { export interface IInfoWindow extends ISelf {
open(map:IMap); open(map: IMap);
listen(html:any, event:string, callback: Function) listen(html: any, event: string, callback: Function)
} }
export interface ICircle extends ISelf { export interface ICircle extends ISelf {

2
src/styles.scss
Unescape View File

@ -448,4 +448,4 @@ td {
.carTreeDropdown{ .carTreeDropdown{
max-height: 239px; max-height: 239px;
} }

Write Preview
Loading…
Cancel
Save