Browse Source

[完善]天地图

非煤矿山灾害智能感知和预警系统
邵佳豪 2 years ago
parent
commit
426f864db2
  1. 1
      package.json
  2. 70
      src/app/home/statistic-analysis/home/home.component.ts

1
package.json

@ -40,7 +40,6 @@
"@angular/compiler-cli": "~13.1.0", "@angular/compiler-cli": "~13.1.0",
"@types/jasmine": "~3.10.0", "@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1", "@types/node": "^12.11.1",
"d3": "^7.8.2",
"html-docx-js-typescript": "^0.1.5", "html-docx-js-typescript": "^0.1.5",
"jasmine-core": "~3.10.0", "jasmine-core": "~3.10.0",
"karma": "~6.3.0", "karma": "~6.3.0",

70
src/app/home/statistic-analysis/home/home.component.ts

@ -837,43 +837,25 @@ export class HomeComponent implements OnInit {
countries = []; countries = [];
map; map;
mapInit() { mapInit() {
const that = this;
var T = window['T']; var T = window['T'];
var d3 = window['d3']; var d3 = window['d3'];
var countries = [];
var countriesOverlay = new T.D3Overlay(init, redraw);
this.map = new T.Map('mapbox'); 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); 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( d3.json(
'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', 'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json',
function (data) { (data) => {
that.countries = data.features; countries = data.features;
resolve(data); this.map.addOverLay(countriesOverlay);
countriesOverlay.bringToBack();
} }
); );
}).then(() => {
console.log(countries);
var upd = sel.selectAll('path.geojson').data(this.countries);
function init(sel, transform) {
var upd = sel.selectAll('path.geojson').data(countries);
upd upd
.enter() .enter()
.append('path') .append('path')
@ -883,12 +865,9 @@ export class HomeComponent implements OnInit {
return d3.hsl(Math.random() * 360, 0.9, 0.5); return d3.hsl(Math.random() * 360, 0.9, 0.5);
}) })
.attr('fill-opacity', '0.5'); .attr('fill-opacity', '0.5');
});
} }
redraw(sel, transform) {
console.log(transform);
var d3 = window['d3']; function redraw(sel, transform) {
sel.selectAll('path.geojson').each(function (d, i) { sel.selectAll('path.geojson').each(function (d, i) {
d3.select(this).attr('d', transform.pathFromGeojson); d3.select(this).attr('d', transform.pathFromGeojson);
// .on("mouseover",function(){ // .on("mouseover",function(){
@ -896,35 +875,6 @@ export class HomeComponent implements OnInit {
// }) // })
}); });
} }
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);
});
} }
formroute() { formroute() {

Loading…
Cancel
Save