[完善]天地图

package.json

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

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

@@ -837,43 +837,25 @@ export class HomeComponent implements OnInit {
   countries = [];
   map;
   mapInit() {
-    const that = this;
     var T = window['T'];
     var d3 = window['d3'];
+    var countries = [];
+    var countriesOverlay = new T.D3Overlay(init, redraw);
+
     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);
+      (data) => {
+        countries = data.features;
+        this.map.addOverLay(countriesOverlay);
         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);
 
+    function init(sel, transform) {
+      var upd = sel.selectAll('path.geojson').data(countries);
       upd
         .enter()
         .append('path')
@@ -883,48 +865,16 @@ export class HomeComponent implements OnInit {
           return d3.hsl(Math.random() * 360, 0.9, 0.5);
         })
         .attr('fill-opacity', '0.5');
-    });
-  }
-  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);
-    });
+    }
+
+    function redraw(sel, transform) {
+      sel.selectAll('path.geojson').each(function (d, i) {
+        d3.select(this).attr('d', transform.pathFromGeojson);
+        // .on("mouseover",function(){
+        // console.log('这是点击了',);
+        // })
+      });
+    }
   }
 
   formroute() {