Skip to content

Commit 34cd4c3

Browse files
luoxiao-supermapluoxiao-supermap
committed
[feature]新增知识图谱最短路径 review by qiw
1 parent e6b9ac1 commit 34cd4c3

32 files changed

Lines changed: 1367 additions & 46 deletions

‎examples/leaflet/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -609,6 +609,13 @@ var exampleConfig = {
609609
version: '11.1.0',
610610
thumbnail: 'knowledgeGraphMap1.png',
611611
fileName: 'knowledgeGraphMap1'
612+
},
613+
{
614+
name: '最短路径',
615+
name_en: 'Shortest Path',
616+
version: '11.2.0',
617+
thumbnail: 'knowledgeGraphMap2.png',
618+
fileName: 'knowledgeGraph_shortestpath'
612619
}
613620
]
614621
},

‎examples/leaflet/knowledgeGraph_shortestpath.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* G6 (https://github.com/antvis/G6)
7+
*********************************************************************-->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
13+
<title data-i18n="resources.title_knowledgeGraphMap"></title>
14+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
15+
<style>
16+
body {
17+
margin: 0;
18+
padding: 0;
19+
width: 100%;
20+
height: 100vh;
21+
overflow: hidden;
22+
}
23+
#knowledgeGraph {
24+
width: 100%;
25+
height: 100%;
26+
}
27+
.short-path-panel {
28+
position: fixed;
29+
top: 60px;
30+
right: 30px;
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
justify-content: center;
35+
width: 350px;
36+
padding: 15px;
37+
background-color: antiquewhite;
38+
border: 1px solid gray;
39+
}
40+
.node-item {
41+
display: inline-flex;
42+
width: 100%;
43+
margin-top: 15px;
44+
}
45+
.node-item input {
46+
width: 150px;
47+
}
48+
.node-item button {
49+
margin: 0 5px;
50+
}
51+
.buttons {
52+
display: inline-flex;
53+
justify-content: center;
54+
margin-top: 20px;
55+
width: 100%;
56+
}
57+
#analysis {
58+
width: 80px;
59+
margin-right: 10px;
60+
}
61+
#reset {
62+
width: 80px;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<div id="knowledgeGraph"></div>
69+
<div class="short-path-panel">
70+
<div class="title" data-i18n="resources.text_graphmap_shortest_analysis"></div>
71+
<div class="node-item start-node">
72+
<span data-i18n="resources.text_startNode"></span> <input class="start" disabled /><button
73+
id="select-start-node"
74+
data-i18n="resources.text_selectStartNode"
75+
></button>
76+
</div>
77+
<div class="node-item end-node">
78+
<span data-i18n="resources.text_endeNode"></span><input class="end" disabled /><button
79+
id="select-end-node"
80+
data-i18n="resources.text_selectEndNode"
81+
></button>
82+
</div>
83+
<div class="buttons">
84+
<button id="analysis" data-i18n="resources.text_analysis"></button>
85+
<button id="reset" data-i18n="resources.text_reset"></button>
86+
</div>
87+
</div>
88+
<script type="text/javascript" include="g6" src="../../dist/leaflet/include-leaflet.js"></script>
89+
<script type="text/javascript">
90+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
91+
const graphmap = new L.supermap.GraphMap(
92+
host + '/iserver/services/knowledgeGraph-budongchan/restjsr/graph/graphmaps/图谱',
93+
{ config: { dragNode: false } }
94+
);
95+
graphmap.on('loaded', () => {
96+
graphmap.graph.on('click', (e) => {
97+
if (selectType && e.item && e.item._cfg.type === 'node') {
98+
const model = e.item.get('model');
99+
const { id, label } = model;
100+
101+
const oldNodeId = shortestPathParams[`${selectType}ID`];
102+
graphmap.clearHighlight({ nodeIDs: [oldNodeId], edgeIDs: [] });
103+
104+
$(`.${selectType}`).val(label);
105+
shortestPathParams[`${selectType}ID`] = id;
106+
graphmap.highlight({ nodeIDs: [id], edgeIDs: [] });
107+
}
108+
});
109+
});
110+
111+
var shortestPathParams = { startID: '', endID: '' };
112+
var oldHeightNodesEdges = { nodeIDs: [], edgeIDs: [] };
113+
var selectType = '';
114+
$('#select-start-node').on('click', () => {
115+
selectType = 'start';
116+
resetStartEndNode(selectType);
117+
});
118+
$('#select-end-node').on('click', () => {
119+
selectType = 'end';
120+
resetStartEndNode(selectType);
121+
});
122+
$('#analysis').on('click', () => {
123+
selectType = '';
124+
setShortestPath(shortestPathParams);
125+
});
126+
127+
$('#reset').on('click', () => {
128+
selectType = '';
129+
resetAll();
130+
});
131+
132+
function resetStartEndNode(selectType) {
133+
$(`.${selectType}`).val('');
134+
graphmap.clearHighlight({ nodeIDs: [shortestPathParams[`${selectType}ID`]], edgeIDs: [] });
135+
shortestPathParams[`${selectType}ID`] = '';
136+
}
137+
138+
function resetAll() {
139+
resetStartEndNode('start');
140+
resetStartEndNode('end');
141+
graphmap.clearHighlight(oldHeightNodesEdges);
142+
}
143+
144+
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+
}
151+
});
152+
}
153+
154+
function highlightShortestPath({ nodeIDs, edgeIDs }) {
155+
graphmap.clearHighlight(oldHeightNodesEdges);
156+
graphmap.highlight({ nodeIDs, edgeIDs });
157+
oldHeightNodesEdges = { nodeIDs, edgeIDs };
158+
}
159+
</script>
160+
</body>
161+
</html>

‎examples/locales/en-US/resources.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -736,6 +736,12 @@ window.examplesResources = {
736736
"title_websymbol_customWebSymbol": "Custom WebSymbol",
737737
"title_dataAttributes": "Attributes",
738738

739+
"text_graphmap_shortest_analysis": "Shortest Path Analysis",
740+
"text_startNode": "start node:",
741+
"text_endeNode": "end node:",
742+
"text_analysis": "Analysis",
743+
"text_selectStartNode": "Capture Start Node",
744+
"text_selectEndNode": "Capture End Node",
739745
"text_district_search": "Administrative region search",
740746
"text_rectangle_search": "Rectangle retrieval",
741747
"text_polygon_search": "Polygon retrieval",

‎examples/locales/zh-CN/resources.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -691,6 +691,13 @@ window.examplesResources = {
691691
"title_editFeatures": "编辑要素",
692692
"title_dataAttributes": "属性表",
693693

694+
"text_graphmap_shortest_analysis": "最短路径分析",
695+
"text_startNode": "开始节点：",
696+
"text_endeNode": "结束节点： ",
697+
"text_analysis": "分析",
698+
"text_selectStartNode": "捕捉开始节点",
699+
"text_selectEndNode": "捕捉结束节点",
700+
694701
"text_district_search": "行政区检索",
695702
"text_rectangle_search": "矩形检索",
696703
"text_polygon_search": "多边形检索",

‎examples/mapboxgl/config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,14 @@ var exampleConfig = {
550550
version: '11.1.0',
551551
thumbnail: 'knowledgeGraphMap1.png',
552552
fileName: 'knowledgeGraphMap1'
553-
}
553+
},
554+
{
555+
name: '最短路径',
556+
name_en: 'Shortest Path',
557+
version: '11.2.0',
558+
thumbnail: 'knowledgeGraphMap2.png',
559+
fileName: 'knowledgeGraph_shortestpath'
560+
}
554561
]
555562
}
556563
}

‎examples/mapboxgl/knowledgeGraph_shortestpath.html‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* G6 (https://github.com/antvis/G6)
7+
*********************************************************************-->
8+
<!DOCTYPE html>
9+
<html>
10+
<head>
11+
<meta charset="utf-8" />
12+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
13+
<title data-i18n="resources.title_knowledgeGraphMap"></title>
14+
<script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
15+
<style>
16+
body {
17+
margin: 0;
18+
padding: 0;
19+
width: 100%;
20+
height: 100vh;
21+
overflow: hidden;
22+
}
23+
24+
#knowledgeGraph {
25+
width: 100%;
26+
height: 100%;
27+
}
28+
.short-path-panel {
29+
position: fixed;
30+
top: 60px;
31+
right: 30px;
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
justify-content: center;
36+
width: 350px;
37+
padding: 15px;
38+
background-color: antiquewhite;
39+
border: 1px solid gray;
40+
}
41+
.node-item {
42+
display: inline-flex;
43+
width: 100%;
44+
margin-top: 15px;
45+
}
46+
.node-item input {
47+
width: 150px;
48+
}
49+
.node-item button {
50+
margin: 0 5px;
51+
}
52+
.buttons {
53+
display: inline-flex;
54+
justify-content: center;
55+
margin-top: 20px;
56+
width: 100%;
57+
}
58+
#analysis {
59+
width: 80px;
60+
margin-right: 10px;
61+
}
62+
#reset {
63+
width: 80px;
64+
}
65+
</style>
66+
</head>
67+
68+
<body>
69+
<div id="knowledgeGraph"></div>
70+
<div class="short-path-panel">
71+
<div class="title" data-i18n="resources.text_graphmap_shortest_analysis"></div>
72+
<div class="node-item start-node">
73+
<span data-i18n="resources.text_startNode"></span> <input class="start" disabled /><button
74+
id="select-start-node"
75+
data-i18n="resources.text_selectStartNode"
76+
></button>
77+
</div>
78+
<div class="node-item end-node">
79+
<span data-i18n="resources.text_endeNode"></span><input class="end" disabled /><button
80+
id="select-end-node"
81+
data-i18n="resources.text_selectEndNode"
82+
></button>
83+
</div>
84+
<div class="buttons">
85+
<button id="analysis" data-i18n="resources.text_analysis"></button>
86+
<button id="reset" data-i18n="resources.text_reset"></button>
87+
</div>
88+
</div>
89+
<script type="text/javascript" include="g6" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
90+
<script type="text/javascript">
91+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
92+
const graphmap = new mapboxgl.supermap.GraphMap(
93+
host + '/iserver/services/knowledgeGraph-budongchan/restjsr/graph/graphmaps/图谱',
94+
{ config: { dragNode: false } }
95+
);
96+
graphmap.on('loaded', () => {
97+
graphmap.graph.on('click', (e) => {
98+
if (selectType && e.item && e.item._cfg.type === 'node') {
99+
const model = e.item.get('model');
100+
const { id, label } = model;
101+
102+
const oldNodeId = shortestPathParams[`${selectType}ID`];
103+
graphmap.clearHighlight({ nodeIDs: [oldNodeId], edgeIDs: [] });
104+
105+
$(`.${selectType}`).val(label);
106+
shortestPathParams[`${selectType}ID`] = id;
107+
graphmap.highlight({ nodeIDs: [id], edgeIDs: [] });
108+
}
109+
});
110+
});
111+
112+
var shortestPathParams = { startID: '', endID: '' };
113+
var oldHeightNodesEdges = { nodeIDs: [], edgeIDs: [] };
114+
var selectType = '';
115+
$('#select-start-node').on('click', () => {
116+
selectType = 'start';
117+
resetStartEndNode(selectType);
118+
});
119+
$('#select-end-node').on('click', () => {
120+
selectType = 'end';
121+
resetStartEndNode(selectType);
122+
});
123+
$('#analysis').on('click', () => {
124+
selectType = '';
125+
setShortestPath(shortestPathParams);
126+
});
127+
128+
$('#reset').on('click', () => {
129+
selectType = '';
130+
resetAll();
131+
});
132+
133+
function resetStartEndNode(selectType) {
134+
$(`.${selectType}`).val('');
135+
graphmap.clearHighlight({ nodeIDs: [shortestPathParams[`${selectType}ID`]], edgeIDs: [] });
136+
shortestPathParams[`${selectType}ID`] = '';
137+
}
138+
139+
function resetAll() {
140+
resetStartEndNode('start');
141+
resetStartEndNode('end');
142+
graphmap.clearHighlight(oldHeightNodesEdges);
143+
}
144+
145+
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 };
159+
}
160+
</script>
161+
</body>
162+
</html>

‎examples/maplibregl/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,13 @@ var exampleConfig = {
492492
name_en: 'Rivers flowing through provinces GraphMap',
493493
thumbnail: 'knowledgeGraphMap1.png',
494494
fileName: 'knowledgeGraphMap1'
495+
},
496+
{
497+
name: '最短路径',
498+
name_en: 'Shortest Path',
499+
version: '11.2.0',
500+
thumbnail: 'knowledgeGraphMap2.png',
501+
fileName: 'knowledgeGraph_shortestpath'
495502
}
496503
]
497504
}

0 commit comments

Comments
 (0)