diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e0c2b10..e82830c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -30,7 +30,6 @@ const routes: Routes = [ {path:'keyUnit',loadChildren:() => import('./key-unit/key-unit.module').then(m => m.KeyUnitModule)}, {path:'planManagement',loadChildren:() => import('./plan-management/plan-management.module').then(m => m.PlanManagementModule)}, {path:'planAudit',loadChildren:() => import('./plan-audit/plan-audit.module').then(m => m.PlanAuditModule)}, - {path:'home',loadChildren:() => import('./pages/pages.module').then(m => m.PagesModule)}, {path:'visualization',component: HomeComponent}, {path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}, {path:'statisticanalysis',loadChildren:() => import('./statistic-analysis/statistic-analysis.module').then(m => m.StatisticAnalysisModule)}, diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index b17d918..25b1d60 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -1,10 +1,8 @@ import { Routes, RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; -import { HomeComponent } from './home/home.component'; -import { HomedetailComponent } from './homedetail/homedetail.component'; + const routes: Routes = [ - { path: '', component: HomeComponent}, - { path: 'detail', component: HomedetailComponent}, + ]; @NgModule({ diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index c56369e..8b13789 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1 +1 @@ -

pages works!

+ diff --git a/src/app/statistic-analysis/home/home.component.ts b/src/app/statistic-analysis/home/home.component.ts index 1912374..aa6cc97 100644 --- a/src/app/statistic-analysis/home/home.component.ts +++ b/src/app/statistic-analysis/home/home.component.ts @@ -2,9 +2,10 @@ import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { Router } from '@angular/router'; import { EchartsDataService } from '../echarts-data.service'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IMap } from '@src/modules/map/declare/map'; declare var echarts: any; -declare var AMap: any; -declare var AMapUI: any; + @Component({ selector: 'app-home', templateUrl: './home.component.html', @@ -14,24 +15,10 @@ export class HomeComponent implements OnInit { constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { } - map:any; //地图 + map:IMap; //地图 yuandata ngOnInit() { - this.level=sessionStorage.getItem("level") - this.getechartsdata() - /* this.emitService.eventEmit.subscribe((value: any) => { - if (value == 'echarts') { - setTimeout(() => { - this.updateEcharts() - }, 500); - } - }); - window.addEventListener('resize', () => { - setTimeout(() => { - this.updateEcharts() - }, 0); - }) */ - + this.getechartsdata() window.setTimeout(()=>{ /* this.unitType() this.unitData() @@ -102,231 +89,37 @@ export class HomeComponent implements OnInit { } //初始化地图 adcode:any //行政编码 - level//组织级别 + level = sessionStorage.getItem("level")//组织级别 orid + + //封装Gaode + getEchartsData (data) { + return new Promise((resolve, reject)=>{ + let paramsdata:any ={ + name:data.properties.name, + level:Number(this.level)+1 + } + this.http.get("/api/Organizations/GetIdByName",{params:paramsdata}).subscribe((data:any)=>{ + this.orid=data[0] + this.getechartsdata() + resolve('success') + }) + }) + } + setEchartsData () { + this.orid='' + this.getechartsdata() + } + //封装Gaode + mapInit () { //创建地图 - this.map = new AMap.Map('chartMap', { + this.map = MapFactory.MapInstance('chartMap', { cursor: 'default', zooms:[8,16], mapStyle:"amap://styles/grey", - // bubble: true }); - - let colors = [ - "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", - "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", - "#651067", "#329262", "#5574a6", "#3b3eac" - ]; - - AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> { - - //创建一个实例 - let districtExplorer = new DistrictExplorer({ - map: this.map, - eventSupport: true, //打开事件支持 - }); - - // let adcode = this.adcode; //行政编码 - let adcode - if(sessionStorage.getItem("realName") == "上海总队"){ - adcode = 310000 - }else{ - adcode = 310000 - } - - districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { - - //更新地图视野 - this.map.setBounds(areaNode.getBounds(), null, null, true); - - //设置定位节点,支持鼠标位置识别 - //注意节点的顺序,前面的高优先级 - districtExplorer.setAreaNodesForLocating(areaNode); - - //清除已有的绘制内容 - districtExplorer.clearFeaturePolygons(); - - //绘制子区域 - districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ - // console.log(123,feature,i) - - let fillColor = colors[i % colors.length]; - let strokeColor = colors[colors.length - 1 - i % colors.length]; - - return { - cursor: 'default', - bubble: true, - strokeColor: strokeColor, //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor, //填充色 - fillOpacity: 0.5, //填充透明度 - }; - }); - - //绘制父区域 - districtExplorer.renderParentFeature(areaNode, { - cursor: 'default', - bubble: true, - strokeColor: 'black', //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: null, //填充色 - fillOpacity: 0.5, //填充透明度 - }); - - // 更新地图视野以适合区划面 - this.map.setFitView(districtExplorer.getAllFeaturePolygons()); - }); - if(this.level=="0"||this.level=="1"||this.level=="2"){ - //区域内点击 - districtExplorer.on('featureClick', (e, feature) =>{ - //console.log(feature) - let paramsdata:any ={ - name:feature.properties.name, - level:Number(this.level)+1 - } - this.http.get("/api/Organizations/GetIdByName",{params:paramsdata}).subscribe((data:any)=>{ - console.log(data) - this.orid=data[0] - this.getechartsdata() - }) - - let props = feature.properties; - adcode = props.adcode - let fillColor2 - if(props.level == 'city'){ - fillColor2 = null - }else{ - fillColor2 = '#d0daee' - } - districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { - //更新地图视野 - // this.map.setBounds(areaNode.getBounds(), null, null, true); - - //设置定位节点,支持鼠标位置识别 - //注意节点的顺序,前面的高优先级 - districtExplorer.setAreaNodesForLocating(areaNode); - - //清除已有的绘制内容 - districtExplorer.clearFeaturePolygons(); - - //绘制子区域 - districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ - let fillColor = colors[i % colors.length]; - // console.log(111,fillColor) - let strokeColor = colors[colors.length - 1 - i % colors.length]; - - return { - cursor: 'default', - bubble: true, - strokeColor: strokeColor, //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor, //填充色 - fillOpacity: 0.5, //填充透明度 - }; - }); - - //绘制父区域 - districtExplorer.renderParentFeature(areaNode, { - cursor: 'default', - bubble: true, - strokeColor: 'black', //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor2, //填充色 - fillOpacity: 0.5, //填充透明度 - }); - - // 更新地图视野以适合区划面 - this.map.setFitView(districtExplorer.getAllFeaturePolygons()); - }); - - //this.planState.setOption(this.planStateOptionsZhong); - //this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhong); - //this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhong); - /* this.planNum = ["0","0","3","1","6","5"] - this.keyUnitNum = 666 */ - //this.dataGetNum = 456 - - /* this.threePlanNum = "867" - this.twoPlanNum = "485" - this.cardPlanNum = "756" - this.otherPlanNum = "658" */ - }); - - districtExplorer.on('outsideClick', (e) => { - this.orid='' - this.getechartsdata() - // console.log('区域外点击'); - let adcode - if(sessionStorage.getItem("realName") == "上海总队"){ - adcode = 310000 - }else{ - adcode = 310000 - } - districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { - //更新地图视野 - // this.map.setBounds(areaNode.getBounds(), null, null, true); - - //设置定位节点,支持鼠标位置识别 - //注意节点的顺序,前面的高优先级 - districtExplorer.setAreaNodesForLocating(areaNode); - - //清除已有的绘制内容 - districtExplorer.clearFeaturePolygons(); - - //绘制子区域 - districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ - let fillColor = colors[i % colors.length]; - // console.log(111,fillColor) - let strokeColor = colors[colors.length - 1 - i % colors.length]; - - return { - cursor: 'default', - bubble: true, - strokeColor: strokeColor, //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: fillColor, //填充色 - fillOpacity: 0.5, //填充透明度 - }; - }); - - //绘制父区域 - districtExplorer.renderParentFeature(areaNode, { - cursor: 'default', - bubble: true, - strokeColor: 'black', //线颜色 - strokeOpacity: 1, //线透明度 - strokeWeight: 1, //线宽 - fillColor: null, //填充色 - fillOpacity: 0.5, //填充透明度 - }); - - // 更新地图视野以适合区划面 - this.map.setFitView(districtExplorer.getAllFeaturePolygons()); - }); - /* this.planState.setOption(this.planStateOptionsZhi); - this.chartDwsjcj.setOption(this.chartDwsjcjOptionsZhi); - this.chartZdgzqy.setOption(this.chartZdgzqyOptionsZhi); */ - /* this.planNum = ["0","2","2","6","7","8"] - this.keyUnitNum = 8036 - this.dataGetNum = 6578 */ - - /* this.threePlanNum = "4374" - this.twoPlanNum = "9693" - this.cardPlanNum = "6403" - this.otherPlanNum = "2208" */ - }) - } - - - }); - - + this.map.setAdministrativeAreaStyle(this,this.getEchartsData,this.setEchartsData) } planNum = [] keyUnitNum diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index 5047e30..df2a8e6 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -1,6 +1,7 @@ import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch } from './map' import MapTools from './map-tools'; declare var AMap: any; +declare var AMapUI: any; class GaodeBasic implements ISelf { self: any; @@ -63,6 +64,165 @@ export class GaoDeMap extends GaodeBasic implements IMap { on(eventName: string, callback: Function): void { return this.self.on(eventName, callback); } + setAdministrativeAreaStyle(component:any,getData?:Function, setData?:Function) {//自定义 行政区划 样式 + let that = this + let level = sessionStorage.getItem("level") + AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer)=> { + + let colors = [ + "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", + "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", + "#651067", "#329262", "#5574a6", "#3b3eac" + ]; + + //创建一个实例 + let districtExplorer = new DistrictExplorer({ + map: that.self, + eventSupport: true, //打开事件支持 + }); + + let adcode = 310000 //上海行政编码 + districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { + + //更新地图视野 + that.setBounds(areaNode.getBounds(), null, null, true); + + //设置定位节点,支持鼠标位置识别 + //注意节点的顺序,前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + let fillColor = colors[i % colors.length]; + let strokeColor = colors[colors.length - 1 - i % colors.length]; + return { + cursor: 'default', + bubble: true, + strokeColor: strokeColor, //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor, //填充色 + fillOpacity: 0.5, //填充透明度 + }; + }); + + //绘制父区域 + districtExplorer.renderParentFeature(areaNode, { + cursor: 'default', + bubble: true, + strokeColor: 'black', //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: null, //填充色 + fillOpacity: 0.5, //填充透明度 + }); + + // 更新地图视野以适合区划面 + that.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + + if(level=="0"||level=="1"||level=="2"){ + //区域内点击 + districtExplorer.on('featureClick', (e, feature) =>{ + getData && getData(feature); + + let props = feature.properties; + adcode = props.adcode + let fillColor2 + if(props.level == 'city'){ + fillColor2 = null + }else{ + fillColor2 = '#d0daee' + } + districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { + + //设置定位节点,支持鼠标位置识别 + //注意节点的顺序,前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + let fillColor = colors[i % colors.length]; + let strokeColor = colors[colors.length - 1 - i % colors.length]; + return { + cursor: 'default', + bubble: true, + strokeColor: strokeColor, //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor, //填充色 + fillOpacity: 0.5, //填充透明度 + }; + }); + + //绘制父区域 + districtExplorer.renderParentFeature(areaNode, { + cursor: 'default', + bubble: true, + strokeColor: 'black', //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor2, //填充色 + fillOpacity: 0.5, //填充透明度 + }); + + // 更新地图视野以适合区划面 + that.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + }); + + districtExplorer.on('outsideClick', (e) => { + setData && setData(component); + let adcode = 310000 + districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { + + //设置定位节点,支持鼠标位置识别 + //注意节点的顺序,前面的高优先级 + districtExplorer.setAreaNodesForLocating(areaNode); + + //清除已有的绘制内容 + districtExplorer.clearFeaturePolygons(); + + //绘制子区域 + districtExplorer.renderSubFeatures(areaNode, (feature, i) =>{ + let fillColor = colors[i % colors.length]; + let strokeColor = colors[colors.length - 1 - i % colors.length]; + return { + cursor: 'default', + bubble: true, + strokeColor: strokeColor, //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: fillColor, //填充色 + fillOpacity: 0.5, //填充透明度 + }; + }); + + //绘制父区域 + districtExplorer.renderParentFeature(areaNode, { + cursor: 'default', + bubble: true, + strokeColor: 'black', //线颜色 + strokeOpacity: 1, //线透明度 + strokeWeight: 1, //线宽 + fillColor: null, //填充色 + fillOpacity: 0.5, //填充透明度 + }); + + // 更新地图视野以适合区划面 + that.setFitView(districtExplorer.getAllFeaturePolygons()); + }); + }) + } + + }); //end + } } export class GaoDePixel extends GaodeBasic implements IPixel { diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts index 5ff90e8..163b356 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -8,6 +8,9 @@ export class KeDaMap implements IMap { opt.configUrl = ""; this.self = new KMap(opt); } + setAdministrativeAreaStyle() { //自定义 行政区划 样式 + throw new Error('Method not implemented.'); + } setBounds(zoom?: any, x?: any, y?: any, is?: boolean) { throw new Error('Method not implemented.'); } diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 7cf91f1..805da08 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -4,6 +4,7 @@ export interface ISelf { } export interface IMap extends ISelf { + //_component:any; on(eventName: string, callback: Function); plugin(eventName: string[]|string, callback: Function); add(obj: IMarker|any): any; @@ -21,6 +22,7 @@ export interface IMap extends ISelf { getCenter(): any; getBounds(): any; distance(a:number[],b:number[]): any; + setAdministrativeAreaStyle(conponent:any,getData?:Function, setData?:Function): any; //自定义 行政区划 样式 } export interface IMapOptions {