p85126437
/
geo_info_platform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add annotation for codes

This commit is contained in:
sulenn 2019-12-13 21:02:31 +08:00
parent 35c6e4c29a
commit 002617059d
1 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
demo.html
View File

@ -2,20 +2,17 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>map</title> <title>知识服务系统</title>
<link href="./css/demo.css" rel="stylesheet"> <link href="./css/demo.css" rel="stylesheet">
<link rel="stylesheet" href="./css/flexleft.css"> <link rel="stylesheet" href="./css/flexleft.css">
<link href="./css/slider.css" rel="stylesheet"> <link href="./css/slider.css" rel="stylesheet">
<link href="./font/iconfont.css" rel="stylesheet"> <link href="./font/iconfont.css" rel="stylesheet">
<!-- 引入 echarts.js -->
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="echarts.min.js"></script> <script src="echarts.min.js"></script>
<!-- 引入 china.js -->
<script src="china.js"></script> <script src="china.js"></script>
</head> </head>
<body> <body>
<!-- 顶部导航栏 -->
<div class="map_header"> <div class="map_header">
<h2 class="logo_txt"> <h2 class="logo_txt">
<span class="iconfont icon-zhankai collpase-icon"></span> <span class="iconfont icon-zhankai collpase-icon"></span>
@ -66,8 +63,10 @@
</ul> </ul>
</div> </div>
<!-- 左部可伸缩区域 -->
<div class="fixed-left"> <div class="fixed-left">
<div class="video_img"> <div class="video_img">
<!-- 视频区域 -->
<div class="div-video" style="background: #1D346F;"> <div class="div-video" style="background: #1D346F;">
<video width="100%" height="100%" controls> <video width="100%" height="100%" controls>
<source class="video" src="./image/西藏/1.mp4" type="video/mp4"> <source class="video" src="./image/西藏/1.mp4" type="video/mp4">
@ -75,6 +74,7 @@
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
</div> </div>
<!-- 图片区域 -->
<div class="slider slider_one_big_picture"> <div class="slider slider_one_big_picture">
<div> <div>
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/1.jpg" /> <img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/1.jpg" />
@ -97,28 +97,23 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 知识图谱 echarts 渲染区域 -->
<div class="left_echart" id="mainGraph"></div> <div class="left_echart" id="mainGraph"></div>
<!-- 知识图谱全屏按钮 -->
<div class="screen-btn screen-open" id="btn"> <div class="screen-btn screen-open" id="btn">
<span class="screen_icon iconfont icon-kuoda"></span> <span class="screen_icon iconfont icon-kuoda"></span>
</div> </div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <!-- china map echarts 渲染区域 -->
<div id="main" style="width: 100%;height:100vh;"></div> <div id="main" style="width: 100%;height:100vh;"></div>
<script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script> <script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script> <script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
<script type="text/javascript" src="./js/demo.js"></script> <script type="text/javascript" src="./js/demo.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var graphContainer = document.getElementById('mainGraph'); // 基于准备好的dom，初始化echarts实例，知识图谱和 china map
// 基于准备好的dom，初始化echarts实例，地图
var myChart = echarts.init(document.getElementById('main')); var myChart = echarts.init(document.getElementById('main'));
var graphContainer = document.getElementById('mainGraph');
// var resizeGraphContainer = function () {
// graphContainer.style.width = document.body.clientWidth + 'px';
// graphContainer.style.height = document.body.clientHeight + 'px';
// }
// 知识图谱 // 知识图谱
var myChartGraph = echarts.init(graphContainer); var myChartGraph = echarts.init(graphContainer);
@ -163,7 +158,7 @@
myChart1.setOption(option); myChart1.setOption(option);
} }
// 各省份经纬度 // 各省份经纬度
var chinaGeoCoordMap = { var chinaGeoCoordMap = {
'黑龙江': [127.9688, 45.368], '黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899], '内蒙古': [110.3467, 41.4899],
@ -201,7 +196,7 @@
'台湾': [121.31, 25.03] '台湾': [121.31, 25.03]
}; };
// 各省份对应的浮框数据信息，不包括浮框中的柱状图 // 各省份对应的浮框数据信息，不包括浮框中的柱状图
var chinaDatas = [ var chinaDatas = [
[{ [{
name: '黑龙江', name: '黑龙江',
@ -613,11 +608,12 @@
}] }]
] ]
// 设置 series 内容 // 设置 series 内容
let redName = '西藏'; let redName = '西藏';
// 搜索时，高亮搜索结果（省份） // 搜索时，高亮搜索结果（省份），写的内容和下面 china map 初始化的地方很冗余
function highLight(name) { function highLight(name) {
// 要高亮显示的省份
redName = name redName = name
var series = []; var series = [];
[ [redName, chinaDatas] ].forEach(function(item, i) { [ [redName, chinaDatas] ].forEach(function(item, i) {
@ -740,6 +736,7 @@
); );
}); });
// china map echarts 关键配置信息
option = { option = {
tooltip: { tooltip: {
show:false, show:false,
@ -783,6 +780,7 @@
myChart.setOption(option); myChart.setOption(option);
} }
var series = []; var series = [];
[ [redName, chinaDatas] ].forEach(function(item, i) { [ [redName, chinaDatas] ].forEach(function(item, i) {
series.push( series.push(
{ {
@ -903,7 +901,8 @@
); );
}); });
// 关键！！！！在这里修改悬浮框,把 show:true 改为 show:false // 关键！！！！在这里修改悬浮框,把 show:true 改为 show:false
// china map echarts 中关键配置信息
option = { option = {
tooltip: { tooltip: {
show:false, show:false,
@ -944,7 +943,7 @@
series: series series: series
}; };
// 中国地图上各区域随鼠标移动，亮或不亮 // 中国地图上各区域随鼠标移动，亮或不亮
myChart.on('mouseover', function(params) { myChart.on('mouseover', function(params) {
var city = params.name; var city = params.name;
@ -1294,21 +1293,20 @@
}); });
// 知识图谱 echarts 中关键数据初始化
graphList = {"keyword":{ graphList = {"keyword":{
"nodes":[], "nodes":[],
"links":[] "links":[]
}} }}
currentGraph = { currentGraph = {
nodes: {}, nodes: {},
links: {}, links: {},
}; };
nodeMap = {}; nodeMap = {};
category = 1 category = 1
level = "level"
symbolSize = 40 symbolSize = 40
// china 地图上省份点击事件
myChart.on('click', function(params) { myChart.on('click', function(params) {
var city = params.name; var city = params.name;
graphList = {"keyword":{ graphList = {"keyword":{
"nodes":[], "nodes":[],
@ -1321,32 +1319,34 @@
nodeMap = {}; nodeMap = {};
category = 1 category = 1
symbolSize = 40 symbolSize = 40
// 根据省份，初始化知识图谱内容
init(city) init(city)
// 根据省份，加载新的图片信息
loadPic(city) loadPic(city)
// 根据省份，加载新的video信息
loadVideo(city) loadVideo(city)
}); });
// 重新渲染 china map echarts 区域
function refresh(option){ function refresh(option){
myChart.setOption(option); myChart.setOption(option);
} }
// 默认打开 or 刷新页面时加载 china map
refresh(option) refresh(option)
// 根据点击知识图谱结点后获得的关联信息，往知识图谱数据结构 graphList 增添新的内容
function fillInfo(result, name) { function fillInfo(result, name) {
// graphList = {"keyword":{ // 如果是第一次或者重新点击 china map 中某个省份
// "nodes":[],
// "links":[]
// }}
if (graphList.keyword.nodes.length == 0) { if (graphList.keyword.nodes.length == 0) {
formNode = {"name":name, "category":category, "symbolSize":symbolSize} formNode = {"name":name, "category":category, "symbolSize":symbolSize}
graphList.keyword.nodes[0]=formNode graphList.keyword.nodes[0]=formNode
category += 1 category += 1
symbolSize -= 5 symbolSize -= 5
} }
// 如果是第一次点击省份节点，不需要增添新的内容，只需要讲graphlist 中的数据加载出来即可
else if (graphList.keyword.nodes[0].name == name) { else if (graphList.keyword.nodes[0].name == name) {
return 0 return 0
} }
// 节点所属分类 + 1，节点大小 - 5
else { else {
// console.log(name)
category = nodeMap[name].category + 1 category = nodeMap[name].category + 1
symbolSize = nodeMap[name].symbolSize - 5 symbolSize = nodeMap[name].symbolSize - 5
} }
@ -1355,11 +1355,13 @@
linkLen = graphList.keyword.links.length linkLen = graphList.keyword.links.length
source = name source = name
for (i = 0; i < result.data.avp.length; i++) { for (i = 0; i < result.data.avp.length; i++) {
// 新加载的数据中可能会存在和源 name 相同的数据
if (source == result.data.avp[i][1]) { if (source == result.data.avp[i][1]) {
nodeLen-- nodeLen--
linkLen-- linkLen--
continue continue
} }
// 组织数据
formNode = {"name":result.data.avp[i][1], "category":category, "symbolSize":symbolSize} formNode = {"name":result.data.avp[i][1], "category":category, "symbolSize":symbolSize}
graphList.keyword.nodes[nodeLen+i]=formNode graphList.keyword.nodes[nodeLen+i]=formNode
formLink = {"source":source, "target":result.data.avp[i][1]} formLink = {"source":source, "target":result.data.avp[i][1]}
@ -1367,11 +1369,8 @@
} }
} }
// 根据关键字请求知识图谱关联数据
// 页面加载时，第一次初始化图，以及点击省份后更换数据
function sync_request(url){ function sync_request(url){
//实例化XmlHttpRequest对象 //实例化XmlHttpRequest对象
var xhr=new XMLHttpRequest(); var xhr=new XMLHttpRequest();
//使用GET方式请求指定网址的页面 //使用GET方式请求指定网址的页面
@ -1388,12 +1387,14 @@
} }
} }
// 点击省份的时候初始化 nodeMap 和 currentGraph 等关键数据结构
function init(name) { function init(name) {
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name) result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
if (!result.data) { if (!result.data) {
alert("nothing") alert("不存在关联关系，无法继续展开！")
return 0 return 0
} }
// 往 graphList 中填充数据
fillInfo(result, name) fillInfo(result, name)
nodeMap = {}; nodeMap = {};
graph = graphList.keyword graph = graphList.keyword
@ -1421,14 +1422,14 @@
} }
}; };
} }
redrawGraph(); redrawGraph();
} }
// 每次点击知识图谱中的节点，就根据关键词，请求其关联关系数据
function loadData(name) { function loadData(name) {
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name) result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
if (JSON.stringify(result.data) == '{}'){ if (JSON.stringify(result.data) == '{}'){
alert("nothing") alert("不存在关联关系，无法继续展开！")
return 0 return 0
} }
fillInfo(result, name) fillInfo(result, name)
@ -1458,14 +1459,13 @@
append(name) append(name)
} }
// 处理点击节点展开 // 点击节点，并加载关联数据到 nodeMap 后，再将其展开
function append(nodeName) { function append(nodeName) {
// 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links // 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
let node = nodeMap[nodeName]; let node = nodeMap[nodeName];
if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) { if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) {
alert("无法继续展开"); alert("不存在关联关系，无法继续展开！");
return return
} }
Object.values(node.nodes).forEach(n => { Object.values(node.nodes).forEach(n => {
@ -1477,7 +1477,7 @@
node.hasAppend = true; node.hasAppend = true;
redrawGraph(); redrawGraph();
} }
// 处理点击节点收缩 // 点击已经展开的知识图谱节点，将节点收缩
function remove(nodeName) { function remove(nodeName) {
//根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归 //根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归
let node = nodeMap[nodeName]; let node = nodeMap[nodeName];
@ -1495,10 +1495,9 @@
redrawGraph(); redrawGraph();
} }
// 根据更新后的option重新画图 // 根据更新后的option重新绘制知识图谱的 echarts
function redrawGraph() { function redrawGraph() {
$('.fixed-left').css({left: 0}).addClass('collpased'); $('.fixed-left').css({left: 0}).addClass('collpased');
// $('.screen-btn').css({left: '360px'});
if (!$('.fixed-left').hasClass('active')) { if (!$('.fixed-left').hasClass('active')) {
$('.screen-btn').css({left: '360px'}); $('.screen-btn').css({left: '360px'});
} }
@ -1507,7 +1506,7 @@
optionGraph.series[0].links = Object.values(currentGraph.links); optionGraph.series[0].links = Object.values(currentGraph.links);
myChartGraph.setOption(optionGraph); myChartGraph.setOption(optionGraph);
} }
// 知识图谱 echarts 中的关键配置信息
const optionGraph = { const optionGraph = {
title: { title: {
title:'知识图谱', title:'知识图谱',
@ -1590,6 +1589,7 @@
}; };
// init("西藏") // init("西藏")
// 知识图谱节点点击事件
myChartGraph.on('click', function(params) { myChartGraph.on('click', function(params) {
if (params.dataType === "node") { if (params.dataType === "node") {
const node = nodeMap[params.data.name]; const node = nodeMap[params.data.name];
@ -1601,7 +1601,7 @@
} }
} }
}); });
// 知识图谱全屏点击函数
$('#btn').on('click', function () { $('#btn').on('click', function () {
if ($('.fixed-left').hasClass('active')) { if ($('.fixed-left').hasClass('active')) {
@ -1629,7 +1629,7 @@
// redrawGraph(); // redrawGraph();
myChartGraph.resize(); myChartGraph.resize();
}); });
// 点击省份加载图片 // 点击省份加载图片
function loadPic(name) { function loadPic(name) {
if (name == "西藏" || name == "新疆" || name == "青海") { if (name == "西藏" || name == "新疆" || name == "青海") {
temp = 1 temp = 1
@ -1645,7 +1645,7 @@
}); });
} }
// 点击省份加载视频 // 点击省份加载视频
function loadVideo(name) { function loadVideo(name) {
if (name == "西藏" || name == "新疆" || name == "青海") { if (name == "西藏" || name == "新疆" || name == "青海") {
temp = 1 temp = 1