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

100
demo.html
View File

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