[fix]知识图谱center算法 review by songym

Author: luoxiao-supermap

src/common/overlay/KnowledgeGraph.js

@@ -21,6 +21,7 @@ import { G6Render } from './knowledge-graph/G6Render';
  * @property {string | HTMLElement} container - 创建的容器 id 或容器本身, 默认是'knowledgeGraph'。
  * @property {number} width - 图的宽度, 默认是container的width。
  * @property {number} height - 图的高度,默认是container的height。
+ * @property {Array.<number>} [center] - 中心点的渲染坐标。可以通过KnowledgeGraph.prototype.getViewPortCenterPoint获取。
  * @property {number} [zoom] - 缩放比例。
  * @property {number} [minZoom] - 最小缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例小于该值，则将使用该值进行缩放，并返回 false。
  * @property {number} [maxZoom] - 最大缩放比例。若 fitView、zoom、zoomTo 等操作导致图的缩放比例大于该值，则将使用该值进行缩放，并返回 false。
@@ -43,7 +44,6 @@ import { G6Render } from './knowledge-graph/G6Render';
 /**
  * @typedef {Object} KnowledgeGraph.Layout - 布局。
  * @property {string} [type='force'] - 布局类型， 可选值：['force']。 默认'force'。
- * @property {Array.<number>} [center] - 布局的中心, 图的中心。
  */
 
 /**
@@ -416,6 +416,9 @@ export class KnowledgeGraph {
  if (this.config.zoom !== undefined) {
  this.zoom(this.config.zoom);
  }
+ if (this.config.center !== undefined) {
+ this.graphRender.setCenter({ x: this.config.center[0], y: this.config.center[1] });
+ }
  };
  this.graph.on('beforelayout', cb);
  return graph;

src/common/overlay/knowledge-graph/G6Render.js

@@ -360,6 +360,14 @@ export class G6Render {
  getHeight() {
  return this.graph.getHeight();
  }
+
+ setCenter(centerDrawPoint) {
+ var centerCanvasPointX = this.graph.getWidth() / 2;
+ var centerCanvasPointY = this.graph.getHeight() / 2;
+ var centerCanvasPointNew = this.graph.getCanvasByPoint(centerDrawPoint.x, centerDrawPoint.y);
+ this.graph.translate(centerCanvasPointX - centerCanvasPointNew.x, centerCanvasPointY - centerCanvasPointNew.y);
+ }
+
  /**
  * @function G6Render.prototype._setToolBarStyle
  * @description 隐藏工具栏的redo undo realZoom按钮

test/mapboxgl/overlay/GraphMapSpec.js

@@ -36,10 +36,10 @@ describe('GraphMap mapboxgl', () => {
  return Promise.resolve(new Response(graphmapData));
  }
  });
- var graphMap = new GraphMap(knowledgegraphmapURL);
- graphMap.on('loaded',()=>{
+ var graphMap = new GraphMap(knowledgegraphmapURL, { config: { center: [0, 0] } });
+ graphMap.on('loaded', () => {
  expect(graphMap).not.toBeNull();
  done();
- })
+ });
  });
 });