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

完善高德封装

上海一张图
陈鹏飞 4 years ago
parent
dbf16d9269
commit
7369e920bd
7 changed files with 197 additions and 242 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/app-routing.module.ts
  2. 6
      src/app/pages/pages-routing.module.ts
  3. 2
      src/app/pages/pages.component.html
  4. 265
      src/app/statistic-analysis/home/home.component.ts
  5. 160
      src/modules/map/declare/gaode-map.ts
  6. 3
      src/modules/map/declare/keda-map.ts
  7. 2
      src/modules/map/declare/map.d.ts

1
src/app/app-routing.module.ts
Unescape View File

@ -30,7 +30,6 @@ const routes: Routes = [
{path:'keyUnit',loadChildren:() => import('./key-unit/key-unit.module').then(m => m.KeyUnitModule)}, {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:'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:'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:'visualization',component: HomeComponent},
{path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}, {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)}, {path:'statisticanalysis',loadChildren:() => import('./statistic-analysis/statistic-analysis.module').then(m => m.StatisticAnalysisModule)},

6
src/app/pages/pages-routing.module.ts
Unescape View File

@ -1,10 +1,8 @@
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { HomedetailComponent } from './homedetail/homedetail.component';
const routes: Routes = [ const routes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'detail', component: HomedetailComponent},
]; ];
@NgModule({ @NgModule({

2
src/app/pages/pages.component.html
Unescape View File

@ -1 +1 @@
<p>pages works!</p>

265
src/app/statistic-analysis/home/home.component.ts
Unescape View File

@ -2,9 +2,10 @@ import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http' import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { EchartsDataService } from '../echarts-data.service'; 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 echarts: any;
declare var AMap: any;
declare var AMapUI: any;
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: './home.component.html', 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) { } constructor(private http:HttpClient, private render2: Renderer2,public element: ElementRef,private router: Router,public emitService: EchartsDataService) { }
map:any; //地图 map:IMap; //地图
yuandata yuandata
ngOnInit() { ngOnInit() {
this.level=sessionStorage.getItem("level") this.getechartsdata()
this.getechartsdata()
/* this.emitService.eventEmit.subscribe((value: any) => {
if (value == 'echarts') {
setTimeout(() => {
this.updateEcharts()
}, 500);
}
});
window.addEventListener('resize', () => {
setTimeout(() => {
this.updateEcharts()
}, 0);
}) */
window.setTimeout(()=>{ window.setTimeout(()=>{
/* this.unitType() /* this.unitType()
this.unitData() this.unitData()
@ -102,231 +89,37 @@ export class HomeComponent implements OnInit {
} }
//初始化地图 //初始化地图
adcode:any //行政编码 adcode:any //行政编码
level//组织级别 level = sessionStorage.getItem("level")//组织级别
orid orid
mapInit () {
//创建地图
this.map = new AMap.Map('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)=> {
//创建一个实例 //封装Gaode
let districtExplorer = new DistrictExplorer({ getEchartsData (data) {
map: this.map, return new Promise((resolve, reject)=>{
eventSupport: true, //打开事件支持 let paramsdata:any ={
}); name:data.properties.name,
level:Number(this.level)+1
// let adcode = this.adcode; //行政编码
let adcode
if(sessionStorage.getItem("realName") == "上海总队"){
adcode = 310000
}else{
adcode = 310000
} }
this.http.get("/api/Organizations/GetIdByName",{params:paramsdata}).subscribe((data:any)=>{
districtExplorer.loadAreaNode(adcode, (error, areaNode)=> { this.orid=data[0]
//更新地图视野
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() this.getechartsdata()
// console.log('区域外点击'); resolve('success')
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" */
}) })
} })
}
setEchartsData () {
this.orid=''
this.getechartsdata()
}
//封装Gaode
mapInit () {
//创建地图
this.map = MapFactory.MapInstance('chartMap', {
cursor: 'default',
zooms:[8,16],
mapStyle:"amap://styles/grey",
}); });
this.map.setAdministrativeAreaStyle(this,this.getEchartsData,this.setEchartsData)
} }
planNum = [] planNum = []
keyUnitNum keyUnitNum

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

@ -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 { 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'; import MapTools from './map-tools';
declare var AMap: any; declare var AMap: any;
declare var AMapUI: any;
class GaodeBasic implements ISelf { class GaodeBasic implements ISelf {
self: any; self: any;
@ -63,6 +64,165 @@ export class GaoDeMap extends GaodeBasic implements IMap {
on(eventName: string, callback: Function): void { on(eventName: string, callback: Function): void {
return this.self.on(eventName, callback); 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 { export class GaoDePixel extends GaodeBasic implements IPixel {

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

@ -8,6 +8,9 @@ export class KeDaMap implements IMap {
opt.configUrl = ""; opt.configUrl = "";
this.self = new KMap(opt); this.self = new KMap(opt);
} }
setAdministrativeAreaStyle() { //自定义 行政区划 样式
throw new Error('Method not implemented.');
}
setBounds(zoom?: any, x?: any, y?: any, is?: boolean) { setBounds(zoom?: any, x?: any, y?: any, is?: boolean) {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');
} }

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

@ -4,6 +4,7 @@ export interface ISelf {
} }
export interface IMap extends ISelf { export interface IMap extends ISelf {
//_component:any;
on(eventName: string, callback: Function); on(eventName: string, callback: Function);
plugin(eventName: string[]|string, callback: Function); plugin(eventName: string[]|string, callback: Function);
add(obj: IMarker|any): any; add(obj: IMarker|any): any;
@ -21,6 +22,7 @@ export interface IMap extends ISelf {
getCenter(): any; getCenter(): any;
getBounds(): any; getBounds(): any;
distance(a:number[],b:number[]): any; distance(a:number[],b:number[]): any;
setAdministrativeAreaStyle(conponent:any,getData?:Function, setData?:Function): any; //自定义 行政区划 样式
} }
export interface IMapOptions { export interface IMapOptions {

Write Preview
Loading…
Cancel
Save