Merge pull request #1451 from easyops-cn/steve/d3-geo

feat(): new brick: china-map

Author: gdutzhendong

bricks/data-view/docs/china-map.md

@@ -0,0 +1,58 @@
+构件 `data-view.china-map`
+
+## Examples
+
+### Basic
+
+```yaml preview height="600px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 4em)
+    position: relative
+children:
+  - brick: data-view.china-map
+    properties:
+      dataSource:
+        - text: "西藏 12311"
+          province: 西藏
+        - text: "四川 89781169"
+          province: 四川
+        - text: "台湾 234181"
+          province: 台湾
+        - text: "江西 21348"
+          province: 江西
+    # Currently this brick only looks well within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```
+
+### Province map
+
+```yaml preview height="600px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 4em)
+    position: relative
+children:
+  - brick: data-view.china-map
+    properties:
+      province: 广东
+      dataSource:
+        - text: "广州 12311"
+          city: 广州
+        - text: "深圳 89781169"
+          city: 深圳
+        - text: "湛江 234181"
+          city: 湛江
+    # Currently this brick only looks well within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

bricks/data-view/package.json

@@ -47,6 +47,7 @@
     "@tweenjs/tween.js": "^19.0.0",
     "classnames": "^2.3.2",
     "d3-force": "^3.0.0",
+    "d3-geo": "^3.1.1",
     "d3-hierarchy": "^3.1.2",
     "react": "0.0.0-experimental-ee8509801-20230117",
     "resize-observer-polyfill": "^1.5.1",

bricks/data-view/scripts/rewind.mjs

@@ -0,0 +1,50 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import { writeFile } from "fs/promises";
+import ChinaGeoJson from "../src/china-map/cities.json" assert { type: "json" };
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+await writeFile(path.join(__dirname, "../src/china-map/cities.json"), JSON.stringify(rewind(ChinaGeoJson, true)));
+
+function rewind(gj, outer) {
+  var type = gj && gj.type, i;
+
+  if (type === 'FeatureCollection') {
+      for (i = 0; i < gj.features.length; i++) rewind(gj.features[i], outer);
+
+  } else if (type === 'GeometryCollection') {
+      for (i = 0; i < gj.geometries.length; i++) rewind(gj.geometries[i], outer);
+
+  } else if (type === 'Feature') {
+      rewind(gj.geometry, outer);
+
+  } else if (type === 'Polygon') {
+      rewindRings(gj.coordinates, outer);
+
+  } else if (type === 'MultiPolygon') {
+      for (i = 0; i < gj.coordinates.length; i++) rewindRings(gj.coordinates[i], outer);
+  }
+
+  return gj;
+}
+
+function rewindRings(rings, outer) {
+  if (rings.length === 0) return;
+
+  rewindRing(rings[0], outer);
+  for (var i = 1; i < rings.length; i++) {
+      rewindRing(rings[i], !outer);
+  }
+}
+
+function rewindRing(ring, dir) {
+  var area = 0, err = 0;
+  for (var i = 0, len = ring.length, j = len - 1; i < len; j = i++) {
+      var k = (ring[i][0] - ring[j][0]) * (ring[j][1] + ring[i][1]);
+      var m = area + k;
+      err += Math.abs(area) >= Math.abs(k) ? area - m + k : k - m + area;
+      area = m;
+  }
+  if (area + err >= 0 !== !!dir) ring.reverse();
+}

bricks/data-view/src/bootstrap.ts

@@ -44,3 +44,4 @@ import "./globe-with-halo-indicator/index.js";
 import "./globe-with-gear-indicator/index.js";
 import "./bubbles-indicator/index.js";
 import "./globe-with-orbit-indicator/index.js";
+import "./china-map/index.js";

bricks/data-view/src/china-map-chart/index.tsx

@@ -453,10 +453,10 @@ export function ChinaMapChartComponent(props: ChinaMapChartProps) {
       //   }); //自定义选择高亮
 
       scene.addLayer(seventhPolygonLayer);
-      scene.addLayer(sixthPolygonLayer);
-      scene.addLayer(fifthPolygonLayer);
-      scene.addLayer(fourthPolygonLayer);
-      scene.addLayer(thirdPolygonLayer);
+      // scene.addLayer(sixthPolygonLayer);
+      // scene.addLayer(fifthPolygonLayer);
+      // // scene.addLayer(fourthPolygonLayer);
+      // scene.addLayer(thirdPolygonLayer);
       scene.addLayer(secondPolygonLayer);
       if (chinaImgLayer) {
         scene.addLayer(chinaImgLayer);