|
|
|
@ -4,6 +4,7 @@ import { Router } from '@angular/router';
|
|
|
|
|
declare var AMap: any; |
|
|
|
|
declare var AMapUI: any; |
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
// import * as d3 from 'd3';
|
|
|
|
|
import { NzModalService } from 'ng-zorro-antd/modal'; |
|
|
|
|
import { TaskListComponent } from './task-list/task-list.component'; |
|
|
|
|
import { UnitListComponent } from './unit-list/unit-list.component'; |
|
|
|
@ -758,79 +759,171 @@ export class HomeComponent implements OnInit {
|
|
|
|
|
this.completionOfTaskBar.setOption(this.completionOfTaskBarOption); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// map;
|
|
|
|
|
// mapInit() {
|
|
|
|
|
// //创建地图
|
|
|
|
|
// this.map = new AMap.Map('mapbox', {
|
|
|
|
|
// cursor: 'default',
|
|
|
|
|
// zooms: [8, 16],
|
|
|
|
|
// mapStyle: 'amap://styles/light',
|
|
|
|
|
// // bubble: true
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// let colors = [
|
|
|
|
|
// '#EE30B3',
|
|
|
|
|
// '#B37CF0',
|
|
|
|
|
// '#BD2CE6',
|
|
|
|
|
// '#7768EE',
|
|
|
|
|
// '#359EEF',
|
|
|
|
|
// '#7B95CA',
|
|
|
|
|
// '#CAFBF8',
|
|
|
|
|
// '#43D0E1',
|
|
|
|
|
// '#72C6EF',
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
// AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
|
|
|
|
|
// //创建一个实例
|
|
|
|
|
// let districtExplorer = new DistrictExplorer({
|
|
|
|
|
// map: this.map,
|
|
|
|
|
// eventSupport: true, //打开事件支持
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// // let adcode = this.adcode; //行政编码
|
|
|
|
|
// let adcode = 370100;
|
|
|
|
|
|
|
|
|
|
// 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(111, feature)
|
|
|
|
|
// 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.8, //填充透明度
|
|
|
|
|
// };
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// //绘制父区域
|
|
|
|
|
// districtExplorer.renderParentFeature(areaNode, {
|
|
|
|
|
// cursor: 'default',
|
|
|
|
|
// bubble: true,
|
|
|
|
|
// strokeColor: 'black', //线颜色
|
|
|
|
|
// strokeOpacity: 1, //线透明度
|
|
|
|
|
// strokeWeight: 1, //线宽
|
|
|
|
|
// fillColor: null, //填充色
|
|
|
|
|
// fillOpacity: 0.5, //填充透明度
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// // 更新地图视野以适合区划面
|
|
|
|
|
// this.map.setFitView(districtExplorer.getAllFeaturePolygons());
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
countries = []; |
|
|
|
|
map; |
|
|
|
|
mapInit() { |
|
|
|
|
//创建地图
|
|
|
|
|
this.map = new AMap.Map('mapbox', { |
|
|
|
|
cursor: 'default', |
|
|
|
|
zooms: [8, 16], |
|
|
|
|
mapStyle: 'amap://styles/light', |
|
|
|
|
// bubble: true
|
|
|
|
|
const that = this; |
|
|
|
|
var T = window['T']; |
|
|
|
|
var d3 = window['d3']; |
|
|
|
|
this.map = new T.Map('mapbox'); |
|
|
|
|
var countriesOverlay = new T.D3Overlay(this.init, this.redraw); |
|
|
|
|
var countriesOverlay1 = new T.D3Overlay(this.init1, this.redraw1); |
|
|
|
|
this.map.centerAndZoom(new T.LngLat(117.03862, 36.664169), 9); |
|
|
|
|
d3.json( |
|
|
|
|
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', |
|
|
|
|
function (data) { |
|
|
|
|
that.countries = data.features; |
|
|
|
|
console.log(data); |
|
|
|
|
|
|
|
|
|
that.map.addOverLay(countriesOverlay); |
|
|
|
|
countriesOverlay.bringToBack(); |
|
|
|
|
that.map.addOverLay(countriesOverlay1); |
|
|
|
|
countriesOverlay.bringToBack(); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
// console.log(countriesOverlay);
|
|
|
|
|
} |
|
|
|
|
init(sel, transform) { |
|
|
|
|
const that = this; |
|
|
|
|
var d3 = window['d3']; |
|
|
|
|
var countries; |
|
|
|
|
new Promise((resolve, reject) => { |
|
|
|
|
d3.json( |
|
|
|
|
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', |
|
|
|
|
function (data) { |
|
|
|
|
that.countries = data.features; |
|
|
|
|
resolve(data); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}).then(() => { |
|
|
|
|
console.log(countries); |
|
|
|
|
var upd = sel.selectAll('path.geojson').data(this.countries); |
|
|
|
|
|
|
|
|
|
upd |
|
|
|
|
.enter() |
|
|
|
|
.append('path') |
|
|
|
|
.attr('class', 'geojson') |
|
|
|
|
.attr('stroke', 'black') |
|
|
|
|
.attr('fill', function (d, i) { |
|
|
|
|
return d3.hsl(Math.random() * 360, 0.9, 0.5); |
|
|
|
|
}) |
|
|
|
|
.attr('fill-opacity', '0.5'); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
let colors = [ |
|
|
|
|
'#EE30B3', |
|
|
|
|
'#B37CF0', |
|
|
|
|
'#BD2CE6', |
|
|
|
|
'#7768EE', |
|
|
|
|
'#359EEF', |
|
|
|
|
'#7B95CA', |
|
|
|
|
'#CAFBF8', |
|
|
|
|
'#43D0E1', |
|
|
|
|
'#72C6EF', |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => { |
|
|
|
|
//创建一个实例
|
|
|
|
|
let districtExplorer = new DistrictExplorer({ |
|
|
|
|
map: this.map, |
|
|
|
|
eventSupport: true, //打开事件支持
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// let adcode = this.adcode; //行政编码
|
|
|
|
|
let adcode = 370100; |
|
|
|
|
|
|
|
|
|
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(111, feature)
|
|
|
|
|
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.8, //填充透明度
|
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
//绘制父区域
|
|
|
|
|
districtExplorer.renderParentFeature(areaNode, { |
|
|
|
|
cursor: 'default', |
|
|
|
|
bubble: true, |
|
|
|
|
strokeColor: 'black', //线颜色
|
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
|
fillColor: null, //填充色
|
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 更新地图视野以适合区划面
|
|
|
|
|
this.map.setFitView(districtExplorer.getAllFeaturePolygons()); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
redraw(sel, transform) { |
|
|
|
|
console.log(transform); |
|
|
|
|
|
|
|
|
|
var d3 = window['d3']; |
|
|
|
|
sel.selectAll('path.geojson').each(function (d, i) { |
|
|
|
|
d3.select(this).attr('d', transform.pathFromGeojson); |
|
|
|
|
// .on("mouseover",function(){
|
|
|
|
|
// console.log('这是点击了',);
|
|
|
|
|
// })
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
init1(sel, transform) { |
|
|
|
|
const that = this; |
|
|
|
|
var d3 = window['d3']; |
|
|
|
|
new Promise((resolve, reject) => { |
|
|
|
|
d3.json( |
|
|
|
|
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', |
|
|
|
|
function (data) { |
|
|
|
|
that.countries = data.features; |
|
|
|
|
resolve(data); |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}).then(() => { |
|
|
|
|
var upd = sel.selectAll('path.geojson1').data(this.countries); |
|
|
|
|
upd |
|
|
|
|
.enter() |
|
|
|
|
.append('path') |
|
|
|
|
.attr('class', 'geojson1') |
|
|
|
|
.attr('stroke', 'black') |
|
|
|
|
.attr('fill', function (d, i) { |
|
|
|
|
return d3.hsl(Math.random() * 360, 0.9, 0.5); |
|
|
|
|
}) |
|
|
|
|
.attr('fill-opacity', '0.5'); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
redraw1(sel, transform) { |
|
|
|
|
var d3 = window['d3']; |
|
|
|
|
sel.selectAll('path.geojson1').each(function (d, i) { |
|
|
|
|
d3.select(this).attr('d', transform.pathFromGeojson); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|