制作新需求

package.json

@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/proj4": "^2.5.5",
     "element-plus": "^2.7.3",
     "konva": "^9.3.6",
     "mitt": "^3.0.1",
     "ol": "^9.2.4",
+    "proj4": "^2.12.1",
     "rollup": "^4.18.0",
     "rollup-plugin-dts": "^6.1.1",
     "sass": "^1.77.1",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@rollup/plugin-node-resolve': ^15.2.3
   '@types/node': ^20.14.5
+  '@types/proj4': ^2.5.5
   '@types/three': ^0.164.0
   '@vitejs/plugin-vue': ^5.0.4
   dts-bundle: ^0.7.3
@@ -10,6 +11,7 @@ specifiers:
   konva: ^9.3.6
   mitt: ^3.0.1
   ol: ^9.2.4
+  proj4: ^2.12.1
   rollup: ^4.18.0
   rollup-plugin-dts: ^6.1.1
   sass: ^1.77.1
@@ -22,10 +24,12 @@ specifiers:
 
 dependencies:
   '@rollup/plugin-node-resolve': 15.2.3_rollup@4.18.0
+  '@types/proj4': 2.5.5
   element-plus: 2.7.3_vue@3.4.27
   konva: 9.3.6
   mitt: 3.0.1
   ol: 9.2.4
+  proj4: 2.12.1
   rollup: 4.18.0
   rollup-plugin-dts: 6.1.1_kvrf5kykmw4i6hziq5unr5euja
   sass: 1.77.1
@@ -533,6 +537,10 @@ packages:
     resolution: {integrity: sha512-j2tekvJCO7j22cs+LO6i0kRPhmQ9MXaPZ55TzOc1lzkN5b6BWqq4AFjl04s1oRRQ1v5rSe+KEvnLUSTonuls/A==}
     dev: true
 
+  /@types/proj4/2.5.5:
+    resolution: {integrity: sha512-y4tHUVVoMEOm2nxRLQ2/ET8upj/pBmoutGxFw2LZJTQWPgWXI+cbxVEUFFmIzr/bpFR83hGDOTSXX6HBeObvZA==}
+    dev: false
+
   /@types/resolve/1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: false
@@ -1112,6 +1120,10 @@ packages:
     resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
     dev: true
 
+  /mgrs/1.0.0:
+    resolution: {integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==}
+    dev: false
+
   /minimatch/3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -1222,6 +1234,13 @@ packages:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  /proj4/2.12.1:
+    resolution: {integrity: sha512-vmhP3hmstjXjzFwg8QXJwpoj4n7GVrXk3ZW3DzNK/Ur4cuwXq7ZiMXaWYvLYLQbX8n4MXgbwTr4lthOUZltBpA==}
+    dependencies:
+      mgrs: 1.0.0
+      wkt-parser: 1.3.3
+    dev: false
+
   /protocol-buffers-schema/3.6.0:
     resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
     dev: false
@@ -1450,6 +1469,10 @@ packages:
     resolution: {integrity: sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==}
     dev: false
 
+  /wkt-parser/1.3.3:
+    resolution: {integrity: sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==}
+    dev: false
+
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true

src/app/4dmap/coord-transform.ts

@@ -0,0 +1,49 @@
+// import proj4 from "proj4";
+// import { PolygonsAttrib } from "./type";
+
+// proj4.defs(
+//   "mercator",
+//   "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
+// );
+// proj4.defs("wgs84", "+proj=longlat +ellps=GRS80 +no_defs");
+
+// export const toWGS84 = (point: { x: number; y: number }) =>
+//   proj4("mercator", "wgs84", { ...point });
+
+// export const toMercator = (point: { x: number; y: number }) =>
+//   proj4("wgs84", "mercator", { ...point });
+
+// export const toWgs84Data = (data: PolygonsAttrib) => ({
+//   ...data,
+//   points: data.points.map(toWGS84),
+// });
+
+// export const toMercatorData = (data: PolygonsAttrib) => ({
+//   ...data,
+//   points: data.points.map(toMercator),
+// });
+
+export const normalPath = (data: number[]) => {
+  const center = { x: 0, y: 0 };
+  let num = 0;
+  for (let i = 0; i < data.length; i += 2) {
+    center.x += data[i];
+    center.y += data[i + 1];
+    num++;
+  }
+  if (num) {
+    center.x /= num;
+    center.y /= num;
+  }
+
+  const udata = [...data];
+  for (let i = 0; i < data.length; i += 2) {
+    udata[i] = data[i] - center.x;
+    udata[i + 1] = data[i + 1] - center.y;
+  }
+
+  return {
+    data: udata,
+    center,
+  };
+};

src/app/4dmap/example/index.vue

@@ -24,8 +24,8 @@ import { ElButton } from "element-plus";
 import { createBoard, changeEnv } from "../index";
 
 changeEnv(false);
-const width = 661;
-const height = 934;
+const width = 1002;
+const height = 873;
 withDefaults(defineProps<{ width?: number; height?: number; pixelRation?: number }>(), {
   width: 320,
   height: 150,
@@ -52,10 +52,10 @@ watch(containerRef, (container, _) => {
   if (container) {
     board.setProps({ dom: container });
     board.raw.bound.setBound([
-      114.10671883665741,
-      24.922018922142065,
-      114.1102647169751,
-      24.927029288581885,
+      113.59473282697611,
+      22.367298495178236,
+      113.59483105070557,
+      22.367212917018723,
     ]);
   }
 });

src/app/4dmap/index.ts

@@ -157,7 +157,7 @@ export const createBoard = (
     if (val > 1000) {
       let km = round(val / 1000, 1);
       let mkm = km % 1;
-      km = Math.floor(km) + (mkm > 0.5 ? 1 : mkm < 0.5 ? -1 : 0.5);
+      km = Math.floor(km) + (mkm > 0.5 ? 1 : mkm < 0.5 ? 0 : 0.5);
       return km + " km";
     } else {
       return Math.floor(val) + " m";

src/app/4dmap/path.ts

@@ -9,6 +9,7 @@ import { Line } from "konva/lib/shapes/Line";
 import { Polygons } from "./polygons";
 import { Group } from "konva/lib/Group";
 import { watch } from "vue";
+import { normalPath } from "./coord-transform";
 
 const polygonActShapeFactory = () => {
   const act = polygonShapeFactory({
@@ -17,6 +18,25 @@ const polygonActShapeFactory = () => {
   const path = act.shape.findOne<Line>(".polygon-line");
   const result = {
     ...act,
+    setData(data: number[]) {
+      let npath = normalPath(data);
+
+      path.points(npath.data);
+      path.x(npath.center.x);
+      path.y(npath.center.y);
+      if (act.closeLine) {
+        if (data.length > 4) {
+          const ndxs = [data.length - 2, data.length - 1, 0, 1];
+          npath = normalPath(ndxs.map((ndx) => data[ndx]));
+          act.closeLine.setData(npath.data);
+          act.closeLine.shape.x(npath.center.x);
+          act.closeLine.shape.y(npath.center.y);
+          act.closeLine.shape.visible(true);
+        } else {
+          act.closeLine.shape.visible(false);
+        }
+      }
+    },
     common() {
       path.fill("rgba(0, 0, 0, 0)");
       act.closeLine.common();

src/app/4dmap/polygons.ts

@@ -19,6 +19,7 @@ import { reactive } from "vue";
 import { PoPoint } from "./point";
 import { PoPath } from "./path";
 import { lineShapeFactory } from "../../board/packages/whole-line/style";
+import { normalPath } from "./coord-transform";
 
 // 加点
 const getPolygonPoint = (position: number[]) => {
@@ -58,7 +59,10 @@ const lineActShapeFactory = (attrib: PolygonsLineAttrib, tree: any) => {
   return {
     shape: wll.shape,
     setData(data: number[]) {
-      wll.setData(data);
+      const npath = normalPath(data);
+      wll.setData(npath.data);
+      wll.shape.x(npath.center.x);
+      wll.shape.y(npath.center.y);
       common();
     },
     common,

src/board/packages/scale/scale.ts

@@ -28,7 +28,7 @@ export class Scale extends Entity<ScaleAttrib, Group> {
 
   constructor(props: EntityProps<ScaleAttrib>) {
     props.name = props.name || "pixel-scale";
-    props.zIndex = 1000 || props.zIndex;
+    props.zIndex = props.zIndex || 1000;
     if (!props.attrib.left && !props.attrib.right) {
       props.attrib.left = 10;
     }
@@ -92,12 +92,12 @@ export class Scale extends Entity<ScaleAttrib, Group> {
     let minDeviation = 1;
     let width;
     let realWidth;
-    for (let w = this.attrib.minWidth; w <= this.attrib.maxWidth; w++) {
+    for (let w = this.attrib.minWidth; w <= this.attrib.maxWidth; w += 0.3) {
       const rw = w * this.pixelScale;
       const deviation = round(rw, 10) - rw;
       const mod = rw < 1000 ? 5 : 500;
-
-      if (deviation < this.allowable && rw % mod < 1) {
+      //
+      if (deviation < this.allowable && rw % mod < 0.1) {
         width = w;
         realWidth = rw;
         break;
@@ -107,6 +107,11 @@ export class Scale extends Entity<ScaleAttrib, Group> {
         minDeviation = deviation;
       }
     }
+    // 小于1 直接取1
+    if (realWidth < 1) {
+      realWidth = 1;
+      width = 1 / this.pixelScale;
+    }
     // if (realWidth < 10) {
     //   realWidth = round(realWidth, 2);
     // } else if (realWidth < 100) {

src/board/packages/whole-line/service/whole-line-edit.ts

@@ -148,7 +148,6 @@ export const penWholeLinePoygonsEdit = <
     let child = target && tree.find(target.id());
     const pixel = [evt.evt.offsetX, evt.evt.offsetY];
 
-    console.log(child);
     if (child instanceof WholeLineLine) {
       if (!canOper || canOper(child, evt.target)) {
         if (polyginAttrib.lineIds.includes(child.attrib.id)) {
@@ -205,8 +204,8 @@ export const penWholeLinePoygonsEdit = <
           if (flatChildren[i] instanceof WholeLinePoint) {
             const point = flatChildren[i] as WholeLinePoint;
             if (
-              round(point.attrib.x - position[0], 8) === 0 &&
-              round(point.attrib.y - position[1], 8) === 0
+              round(point.attrib.x - position[0], 10) === 0 &&
+              round(point.attrib.y - position[1], 10) === 0
             ) {
               child = tree.children[i];
               break;

src/board/packages/whole-line/service/whole-line-helper.ts

@@ -13,7 +13,11 @@ import {
 } from "./whole-line-edit";
 import addMouseIco from "../../../shared/cursor/pic_pen_a.ico";
 import delMouseIco from "../../../shared/cursor/pic_pen_r.ico";
-import { getRealAbsoluteSize, getTouchOffset } from "../../../shared";
+import {
+  getRealAbsoluteSize,
+  getTouchOffset,
+  normalPath,
+} from "../../../shared";
 import { lineShapeFactory, pointShapeFactory } from "../style";
 import { Layer } from "konva/lib/Layer";
 import { Group } from "konva/lib/Group";
@@ -326,7 +330,10 @@ export const penWholeLinePoygonsEditWithHelperShapesMouse = <
 
     const lineShapes = [...addLines, ...Object.values(cloneLines)].map(
       (line) => {
-        tempLine.setData(line);
+        const npath = normalPath(line);
+        tempLine.setData(npath.data);
+        tempLine.shape.x(npath.center.x);
+        tempLine.shape.y(npath.center.y);
         return tempLine.shape.clone() as Group;
       }
     );

src/board/plugins/bound-plugin.ts

@@ -174,6 +174,6 @@ export class BoundQueryPlugin {
       size: [stage.width(), stage.height()],
     });
     this.tree.redraw();
-    this.tree.stage.draw();
+    // this.tree.stage.draw();
   }
 }

src/board/shared/util.ts

@@ -214,3 +214,28 @@ export const mergeFuns = (...fns: (() => void)[] | (() => void)[][]) => {
     });
   };
 };
+
+export const normalPath = (data: number[]) => {
+  const center = { x: 0, y: 0 };
+  let num = 0;
+  for (let i = 0; i < data.length; i += 2) {
+    center.x += data[i];
+    center.y += data[i + 1];
+    num++;
+  }
+  if (num) {
+    center.x /= num;
+    center.y /= num;
+  }
+
+  const udata = [...data];
+  for (let i = 0; i < data.length; i += 2) {
+    udata[i] = data[i] - center.x;
+    udata[i + 1] = data[i + 1] - center.y;
+  }
+
+  return {
+    data: udata,
+    center,
+  };
+};