Skip to content

Commit dbdd692

Browse files
luoxiao-supermapluoxiao-supermap
committed
[fix]修改知识图谱最短路径api review by qiw
1 parent 35b2cda commit dbdd692

File tree

24 files changed

+220
-144
lines changed

24 files changed

+220
-144
lines changed

‎examples/leaflet/knowledgeGraph_shortestpath.html

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -138,24 +138,14 @@
138138
function resetAll() {
139139
resetStartEndNode('start');
140140
resetStartEndNode('end');
141-
graphmap.clearHighlight(oldHeightNodesEdges);
141+
graphmap.clearHighlight();
142142
}
143143

144144
function setShortestPath({ startID, endID }) {
145-
graphmap.getShortestPath({ startID, endID }, (res) => {
146-
if (res.type === 'processCompleted' && res.result.succeed) {
147-
highlightShortestPath(res.result);
148-
} else {
149-
alert(res.error.errorMsg, false);
150-
}
145+
graphmap.findShortestPath({ startID, endID }, () => {
146+
graphmap.clearHighlight();
151147
});
152148
}
153-
154-
function highlightShortestPath({ nodeIDs, edgeIDs }) {
155-
graphmap.clearHighlight(oldHeightNodesEdges);
156-
graphmap.highlight({ nodeIDs, edgeIDs });
157-
oldHeightNodesEdges = { nodeIDs, edgeIDs };
158-
}
159149
</script>
160150
</body>
161151
</html>

‎examples/mapboxgl/knowledgeGraph_shortestpath.html

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -139,23 +139,12 @@
139139
function resetAll() {
140140
resetStartEndNode('start');
141141
resetStartEndNode('end');
142-
graphmap.clearHighlight(oldHeightNodesEdges);
142+
graphmap.clearHighlight();
143143
}
144144

145145
function setShortestPath({ startID, endID }) {
146-
graphmap.getShortestPath({ startID, endID }, (res) => {
147-
if (res.type === 'processCompleted' && res.result.succeed) {
148-
highlightShortestPath(res.result);
149-
} else {
150-
alert(res.error.errorMsg, false);
151-
}
152-
});
153-
}
154-
155-
function highlightShortestPath({ nodeIDs, edgeIDs }) {
156-
graphmap.clearHighlight(oldHeightNodesEdges);
157-
graphmap.highlight({ nodeIDs, edgeIDs });
158-
oldHeightNodesEdges = { nodeIDs, edgeIDs };
146+
graphmap.clearHighlight();
147+
graphmap.findShortestPath({ startID, endID });
159148
}
160149
</script>
161150
</body>

‎examples/maplibregl/knowledgeGraph_shortestpath.html

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -139,24 +139,14 @@
139139
function resetAll() {
140140
resetStartEndNode('start');
141141
resetStartEndNode('end');
142-
graphmap.clearHighlight(oldHeightNodesEdges);
142+
graphmap.clearHighlight();
143143
}
144144

145145
function setShortestPath({ startID, endID }) {
146-
graphmap.getShortestPath({ startID, endID }, (res) => {
147-
if (res.type === 'processCompleted' && res.result.succeed) {
148-
highlightShortestPath(res.result);
149-
} else {
150-
alert(res.error.errorMsg, false);
151-
}
146+
graphmap.findShortestPath({ startID, endID }, () => {
147+
graphmap.clearHighlight();
152148
});
153149
}
154-
155-
function highlightShortestPath({ nodeIDs, edgeIDs }) {
156-
graphmap.clearHighlight(oldHeightNodesEdges);
157-
graphmap.highlight({ nodeIDs, edgeIDs });
158-
oldHeightNodesEdges = { nodeIDs, edgeIDs };
159-
}
160150
</script>
161151
</body>
162152
</html>

‎examples/openlayers/knowledgeGraph_shortestpath.html

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -139,24 +139,14 @@
139139
function resetAll() {
140140
resetStartEndNode('start');
141141
resetStartEndNode('end');
142-
graphmap.clearHighlight(oldHeightNodesEdges);
142+
graphmap.clearHighlight();
143143
}
144144

145145
function setShortestPath({ startID, endID }) {
146-
graphmap.getShortestPath({ startID, endID }, (res) => {
147-
if (res.type === 'processCompleted' && res.result.succeed) {
148-
highlightShortestPath(res.result);
149-
} else {
150-
alert(res.error.errorMsg, false);
151-
}
146+
graphmap.findShortestPath({ startID, endID }, () => {
147+
graphmap.clearHighlight();
152148
});
153149
}
154-
155-
function highlightShortestPath({ nodeIDs, edgeIDs }) {
156-
graphmap.clearHighlight(oldHeightNodesEdges);
157-
graphmap.highlight({ nodeIDs, edgeIDs });
158-
oldHeightNodesEdges = { nodeIDs, edgeIDs };
159-
}
160150
</script>
161151
</body>
162152
</html>

‎src/common/iServer/KnowledgeGraphService.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ import { CommonServiceBase } from './CommonServiceBase';
2020
* @param {Object} [options.headers] - 请求头。
2121
* @usage
2222
*/
23+
/**
24+
* @typedef {Object} KnowledgeGraphService.findShortestPathParams
25+
* @property {string} startID - 开始节点的id
26+
* @property {string} endID - 结束节点id
27+
*/
2328
export class KnowledgeGraphService extends CommonServiceBase {
2429
constructor(url, options) {
2530
super(url, options);
@@ -36,12 +41,12 @@ export class KnowledgeGraphService extends CommonServiceBase {
3641
}
3742

3843
/**
39-
* @function KnowledgeGraphService.prototype.getShortestPath
44+
* @function KnowledgeGraphService.prototype.findShortestPath
4045
* @description 获取开始节点和结束节点之间的最短路径。
41-
* @param {Object} params - {startID: 'xxx', endID: 'xxxx'}开始节点的id和结束节点id对象。
46+
* @param {KnowledgeGraphService.findShortestPathParams} params - 参数。
4247
* @param {RequestCallback} [callback] - 回调函数，该参数未传时可通过返回的 promise 获取结果。
4348
*/
44-
getShortestPath(params, callback) {
49+
findShortestPath(params, callback) {
4550
const url = this.url + `/shortestPath.json?startID=${params.startID}&endID=${params.endID}`;
4651
this.processAsync({ url, method: 'GET', callback });
4752
}

‎src/common/overlay/KnowledgeGraph.js

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,18 @@ import clonedeep from 'lodash.clonedeep';
141141
* @property {string} [shadowColor] - 阴影颜色。
142142
*/
143143

144+
/**
145+
* @typedef {Object} KnowledgeGraph.highlightParams - 高亮节点、边的参数， 默认高亮样式和hover高亮样式一致。
146+
* @property {Array} nodeIDs - 高亮节点id数组。
147+
* @property {Array} edgeIDs - 高亮边id数组。
148+
* @property {KnowledgeGraph.NodeStyle} [nodeStateStyles] - 高亮节点样式。
149+
* @property {KnowledgeGraph.EdgeStyle} [edgeStateStyles] - 高亮边样式。
150+
*/
151+
/**
152+
* @typedef {Object} KnowledgeGraph.clearHighlightParams - 取消高亮节点、边的参数。
153+
* @property {Array} nodeIDs - 高亮节点id数组。
154+
* @property {Array} edgeIDs - 高亮边id数组。
155+
*/
144156
export class KnowledgeGraph {
145157
constructor(config, type = 'G6') {
146158
/**
@@ -183,7 +195,7 @@ export class KnowledgeGraph {
183195
.filter((id) => id !== '')
184196
.forEach((id) => {
185197
const item = this.findById(id);
186-
callback(item);
198+
callback(item, 'node');
187199
});
188200
}
189201

@@ -194,23 +206,32 @@ export class KnowledgeGraph {
194206
const item = this.find('edge', (edge) => {
195207
return edge.get('model').edgeId == id;
196208
});
197-
callback(item);
209+
callback(item, 'edge');
198210
});
199211
}
200212

201213
/**
202214
* @function KnowledgeGraph.prototype.highlight
203215
* @version 11.2.0
204216
* @description 高亮节点和边。
205-
* @param {Object} params - { nodeIDs, edgeIDs}， 高亮节点id数组，高亮边id数组。
217+
* @param {KnowledgeGraph.highlightParams} params - 高亮参数。
206218
*/
207219
highlight(params) {
208220
const { nodeIDs = [], edgeIDs = [] } = params;
209221
const graph = this.graph;
210-
const activeCallback = (item) => {
222+
const activeCallback = (item, type = 'node') => {
211223
if (!item) {
212224
return;
213225
}
226+
const stateStyles = params[type + 'StateStyles'];
227+
if (stateStyles) {
228+
graph.updateItem(item, {
229+
style: item.style,
230+
stateStyles: {
231+
actived: stateStyles
232+
}
233+
});
234+
}
214235
graph.setItemState(item, 'actived', true);
215236
graph.paint();
216237
graph.setAutoPaint(true);
@@ -223,13 +244,10 @@ export class KnowledgeGraph {
223244
* @function KnowledgeGraph.prototype.clearHighlight
224245
* @version 11.2.0
225246
* @description 取消之前高亮节点和边。
226-
* @param {Object} params - { nodeIDs, edgeIDs}取消高亮节点id数组和边id数组。
247+
* @param {KnowledgeGraph.clearHighlightParams} [params] - 取消高亮节点id数组和边id数组, 不传默认取消所有激活状态的高亮。
227248
*/
228249
clearHighlight(params) {
229250
const graph = this.graph;
230-
const { nodeIDs = [], edgeIDs = [] } = params;
231-
graph.setAutoPaint(false);
232-
233251
const clearCallback = (item) => {
234252
if (!item) {
235253
return;
@@ -238,6 +256,17 @@ export class KnowledgeGraph {
238256
graph.paint();
239257
graph.setAutoPaint(true);
240258
};
259+
graph.setAutoPaint(false);
260+
if (!params) {
261+
graph.getNodes().forEach(function (node) {
262+
clearCallback(node);
263+
});
264+
graph.getEdges().forEach(function (edge) {
265+
clearCallback(edge);
266+
});
267+
return;
268+
}
269+
const { nodeIDs = [], edgeIDs = [] } = params;
241270
this._handleNodes(nodeIDs, clearCallback);
242271
this._handleEdges(edgeIDs, clearCallback);
243272
}

‎src/leaflet/overlay/GraphMap.js

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,22 +93,33 @@ export class GraphMap extends L.Evented {
9393
}
9494

9595
/**
96-
* @function GraphMap.prototype.getShortestPath
96+
* @function GraphMap.prototype.findShortestPath
9797
* @version 11.2.0
98-
* @description 获取开始节点和结束节点之间的最短路径。
99-
* @param {Object} params - {startID: 'xxx', endID: 'xxxx'}开始节点的id和结束节点id对象。
98+
* @description 获取开始节点和结束节点之间的最短路径。（在渲染完成后调用）
99+
* @param {GraphMap.findShortestPathParams} params - 参数。
100100
* @param {RequestCallback} [callback] - 回调函数，该参数未传时可通过返回的 promise 获取结果。
101101
* @returns {Promise} Promise 对象。
102102
*/
103-
getShortestPath(params, callback) {
104-
return this.knowledgeGraphService.getShortestPath(params, callback);
103+
findShortestPath(params, callback) {
104+
const { startID, endID, isHighlight = true, highlightStateStyles = {} } = params;
105+
return this.knowledgeGraphService.findShortestPath({ startID, endID }, (res) => {
106+
callback && callback(res);
107+
if (isHighlight) {
108+
if (res.type === 'processCompleted' && res.result.succeed) {
109+
const { nodeIDs, edgeIDs } = res.result;
110+
this.highlight({ nodeIDs, edgeIDs, ...highlightStateStyles });
111+
} else {
112+
alert(res.error.errorMsg, false);
113+
}
114+
}
115+
});
105116
}
106117

107118
/**
108119
* @function GraphMap.prototype.highlight
109120
* @version 11.2.0
110121
* @description 高亮节点和边。（在渲染完成后调用）
111-
* @param {Object} params - { nodeIDs, edgeIDs}， 高亮节点id数组，高亮边id数组。
122+
* @param {KnowledgeGraph.highlightParams} params - 高亮参数。
112123
*/
113124
highlight(params) {
114125
if (!this.graph) {
@@ -120,7 +131,7 @@ export class GraphMap extends L.Evented {
120131
* @function GraphMap.prototype.clearHighlight
121132
* @version 11.2.0
122133
* @description 取消高亮节点和边。（在渲染完成后调用）
123-
* @param {Object} params - { nodeIDs, edgeIDs}， 高亮节点id数组，高亮边id数组。
134+
* @param {KnowledgeGraph.claerHighlightParams} [params] - 取消高亮节点id数组和边id数组, 不传默认取消所有激活状态的高亮。
124135
*/
125136
clearHighlight(params) {
126137
if (!this.graph) {

‎src/leaflet/services/KnowledgeGraphService.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ export var KnowledgeGraphService = ServiceBase.extend({
3232
},
3333

3434
/**
35-
* @function KnowledgeGraphService.prototype.getShortestPath
35+
* @function KnowledgeGraphService.prototype.findShortestPath
3636
* @version 11.2.0
3737
* @description 获取开始节点和结束节点之间的最短路径。
38-
* @param {Object} params - {startID: 'xxx', endID: 'xxxx'}开始节点的id和结束节点id对象。
38+
* @param {KnowledgeGraphService.findShortestPathParams} params - 参数。
3939
* @param {RequestCallback} [callback] - 回调函数，该参数未传时可通过返回的 promise 获取结果。
4040
* @returns {Promise} Promise 对象。
4141
*/
42-
getShortestPath(params, callback) {
43-
return this._knowledgeGraphService.getShortestPath(params, callback);
42+
findShortestPath(params, callback) {
43+
return this._knowledgeGraphService.findShortestPath(params, callback);
4444
},
4545
/**
4646
* @function KnowledgeGraphService.prototype.query

‎src/mapboxgl/overlay/GraphMap.js

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,20 @@ import mapboxgl from 'mapbox-gl';
2323
* @extends {mapboxgl.Evented}
2424
* @usage
2525
*/
26+
27+
/**
28+
* @typedef {Object} GraphMap.highlightStateStyles - 高亮节点、边样式， 默认高亮样式和hover高亮样式一致。
29+
* @property {KnowledgeGraph.NodeStyle} [nodeStateStyles] - 高亮节点样式 。
30+
* @property {KnowledgeGraph.EdgeStyle} [edgeStateStyles] - 高亮边样式。
31+
*/
32+
/**
33+
* @typedef {Object} GraphMap.findShortestPathParams
34+
* @property {string} startID - 开始节点的id
35+
* @property {string} endID - 结束节点id
36+
* @property {boolean} [isHighlight = true] - 是否高亮
37+
* @property {GraphMap.highlightStateStyles} [highlightStateStyles] - 高亮节点、边样式， 默认高亮样式和hover高亮样式一致。
38+
*/
39+
2640
export class GraphMap extends mapboxgl.Evented {
2741
constructor(serverUrl, options) {
2842
super(serverUrl, options);
@@ -89,22 +103,33 @@ export class GraphMap extends mapboxgl.Evented {
89103
}
90104

91105
/**
92-
* @function GraphMap.prototype.getShortestPath
106+
* @function GraphMap.prototype.findShortestPath
93107
* @version 11.2.0
94-
* @description 获取开始节点和结束节点之间的最短路径。
95-
* @param {Object} params - {startID: 'xxx', endID: 'xxxx'}开始节点的id和结束节点id对象。
108+
* @description 获取开始节点和结束节点之间的最短路径。（在渲染完成后调用）
109+
* @param {GraphMap.findShortestPathParams} params - 参数。
96110
* @param {RequestCallback} [callback] - 回调函数，该参数未传时可通过返回的 promise 获取结果。
97111
* @returns {Promise} Promise 对象。
98112
*/
99-
getShortestPath(params, callback) {
100-
return this.knowledgeGraphService.getShortestPath(params, callback);
113+
findShortestPath(params, callback) {
114+
const { startID, endID, isHighlight = true, highlightStateStyles = {} } = params;
115+
return this.knowledgeGraphService.findShortestPath({ startID, endID }, (res) => {
116+
callback && callback(res);
117+
if (isHighlight) {
118+
if (res.type === 'processCompleted' && res.result.succeed) {
119+
const { nodeIDs, edgeIDs } = res.result;
120+
this.highlight({ nodeIDs, edgeIDs, ...highlightStateStyles });
121+
} else {
122+
alert(res.error.errorMsg, false);
123+
}
124+
}
125+
});
101126
}
102127

103128
/**
104129
* @function GraphMap.prototype.highlight
105130
* @version 11.2.0
106131
* @description 高亮节点和边。（在渲染完成后调用）
107-
* @param {Object} params - { nodeIDs, edgeIDs}， 高亮节点id数组，高亮边id数组。
132+
* @param {KnowledgeGraph.highlightParams} params - 高亮参数。
108133
*/
109134
highlight(params) {
110135
if (!this.graph) {
@@ -116,7 +141,7 @@ export class GraphMap extends mapboxgl.Evented {
116141
* @function GraphMap.prototype.clearHighlight
117142
* @version 11.2.0
118143
* @description 取消高亮节点和边。（在渲染完成后调用）
119-
* @param {Object} params - { nodeIDs, edgeIDs}， 高亮节点id数组，高亮边id数组。
144+
* @param {KnowledgeGraph.claerHighlightParams} [params] - 取消高亮节点id数组和边id数组, 不传默认取消所有激活状态的高亮。
120145
*/
121146
clearHighlight(params) {
122147
if (!this.graph) {

‎src/mapboxgl/services/KnowledgeGraphService.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ export class KnowledgeGraphService extends ServiceBase {
3232
}
3333

3434
/**
35-
* @function KnowledgeGraphService.prototype.getShortestPath
35+
* @function KnowledgeGraphService.prototype.findShortestPath
3636
* @version 11.2.0
3737
* @description 获取开始节点和结束节点之间的最短路径。
38-
* @param {Object} params - {startID: 'xxx', endID: 'xxxx'}开始节点的id和结束节点id对象。
38+
* @param {KnowledgeGraphService.findShortestPathParams} params - 参数。
3939
* @param {RequestCallback} [callback] - 回调函数，该参数未传时可通过返回的 promise 获取结果。
4040
* @returns {Promise} Promise 对象。
4141
*/
42-
getShortestPath(params, callback) {
43-
return this._knowledgeGraphService.getShortestPath(params, callback);
42+
findShortestPath(params, callback) {
43+
return this._knowledgeGraphService.findShortestPath(params, callback);
4444
}
4545

4646
/**

0 commit comments

Comments
 (0)