600 lines
21 KiB
HTML
Executable File
600 lines
21 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>map</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 -->
|
||
<script src="echarts.min.js"></script>
|
||
<script src="china.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="voicePanel">
|
||
<div class="voice-vocal">
|
||
<p style="margin:10px 0px 20px;">请说话</p>
|
||
<img src="./image/voice.gif" alt="" width="100px"/>
|
||
<p class="voice-btn">
|
||
<a href="javascript:void(0)" onclick="cancelVoice();">取消</a>
|
||
<a href="javascript:void(0)" onclick="cancelVoice();">确定</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- 顶部导航栏 -->
|
||
<div class="map_header">
|
||
<div class="map_left">
|
||
<h2 class="logo_txt">
|
||
<span class="iconfont icon-zhankai collpase-icon"></span>
|
||
基于知识图谱的兵要信息平台
|
||
</h2>
|
||
<ul class="map-nav">
|
||
<li>
|
||
<a href="javscript:void(0)">首页</a>
|
||
</li>
|
||
<li>
|
||
<a href="javscript:void(0)">产品</a>
|
||
</li>
|
||
<li>
|
||
<a href="javscript:void(0)">后台管理</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<ul class="user_info">
|
||
<span class="search-Panel">
|
||
<input class="search-input-item prov" placeholder="请输入地点" />
|
||
<input onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" class="search-input-item lon" placeholder="经度" />
|
||
<input onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" class="search-input-item lon" placeholder="纬度" />
|
||
<div class="show_detail ml10">
|
||
<i class="iconfont icon-search"></i>
|
||
<ul class="detail_info">
|
||
<li class="info_txt" data-key="prov">地点</li>
|
||
<li class="info_txt" data-key="lon">经纬度</li>
|
||
<li class="info_txt" data-key="voice">语音</li>
|
||
</ul>
|
||
</div>
|
||
</span>
|
||
<li class="info-item">
|
||
<div class="show_detail">
|
||
<img class="user_img" src="./image/3.jpg" />
|
||
<ul class="detail_info">
|
||
<li class="info_txt" data-key="user">admin</li>
|
||
<li class="info_txt" data-key="off">退出</li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="banner-panel" style="padding-top:60px;">
|
||
<p class="banner-header"></p>
|
||
<div class="carouselBottom">
|
||
<a class="bottomItem active" href="javscript:void(0)">
|
||
<img src="./image/1.png" />服务优势
|
||
</a>
|
||
<a class="bottomItem" href="javscript:void(0)">
|
||
<img src="./image/2.png" />引擎服务
|
||
</a>
|
||
<a class="bottomItem" href="javscript:void(0)">
|
||
<img src="./image/3.png" />案例精选
|
||
</a>
|
||
<a class="bottomItem" href="javscript:void(0)">
|
||
<img src="./image/4.png" />快速入门
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="map-container">
|
||
<div class="fixed-left">
|
||
<div class="screen-btn screen-open" id="btn">
|
||
<span class="screen_icon iconfont icon-kuoda"></span>
|
||
</div>
|
||
<div class="left_echart" id="mainGraph"></div>
|
||
<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">
|
||
<source src="movie.ogg" type="video/ogg" style="width: 400px;">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
<div class="slider slider_one_big_picture">
|
||
<div>
|
||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/1.jpg" />
|
||
</div>
|
||
<div>
|
||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/2.jpg" />
|
||
</div>
|
||
<div>
|
||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/3.jpg" />
|
||
</div>
|
||
<div>
|
||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/4.jpg" />
|
||
</div>
|
||
<div>
|
||
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/5.jpg" />
|
||
</div>
|
||
<!-- <div class="next_button"></div>
|
||
<div class="prev_button"></div> -->
|
||
<!-- <div class="nav_indicators"></div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="maps" style="height: 100%; width: 100%;"></div>
|
||
</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 src="./js/map.js"></script>
|
||
|
||
|
||
<script>
|
||
$(document).ready(function () {
|
||
var graphContainer = document.getElementById('mainGraph');
|
||
var myChartGraph = echarts.init(graphContainer);
|
||
|
||
// 根据更新后的option重新画图
|
||
function redrawGraph() {
|
||
// $('.fixed-left').css({left: 0}).addClass('collpased');
|
||
// // $('.screen-btn').css({left: '360px'});
|
||
// if (!$('.fixed-left').hasClass('active')) {
|
||
// $('.screen-btn').css({left: '360px'});
|
||
// }
|
||
// $('.collpase-icon').addClass('icon-shouqi').removeClass('icon-zhankai');
|
||
optionGraph.series[0].data = Object.values(currentGraph.nodes);
|
||
optionGraph.series[0].links = Object.values(currentGraph.links);
|
||
myChartGraph.setOption(optionGraph);
|
||
}
|
||
// 页面加载时，第一次初始化图，以及点击省份后更换数据
|
||
|
||
var currentGraph = {
|
||
nodes: {},
|
||
links: {},
|
||
};
|
||
var nodeMap = {};
|
||
var category = 1
|
||
var level = "level"
|
||
var symbolSize = 40;
|
||
const optionGraph = {
|
||
title: {
|
||
title:'知识图谱',
|
||
top: 'top',
|
||
left: 'center',
|
||
},
|
||
tooltip: {},
|
||
legend: [],
|
||
animation: false,
|
||
series: [{
|
||
type: 'graph',
|
||
layout: 'force',
|
||
data: Object.values(currentGraph.nodes),
|
||
links: Object.values(currentGraph.links),
|
||
categories: [
|
||
{
|
||
name: 1,
|
||
itemStyle: {
|
||
color: '#c23531'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 2,
|
||
itemStyle: {
|
||
color: '#2f4554'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 3,
|
||
itemStyle: {
|
||
color: '#61a0a8'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 4,
|
||
itemStyle: {
|
||
color: '#999ea4'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 5,
|
||
itemStyle: {
|
||
color: '#555555'
|
||
},
|
||
}
|
||
],
|
||
roam: true,
|
||
focusNodeAdjacency: false,
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: '#fff',
|
||
borderWidth: 1,
|
||
shadowBlur: 10,
|
||
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
||
}
|
||
},
|
||
label: {
|
||
position: 'right',
|
||
formatter: '{b}'
|
||
},
|
||
lineStyle: {
|
||
color: 'target',
|
||
opacity: 0.6,
|
||
curveness: 0.3
|
||
},
|
||
emphasis: {
|
||
lineStyle: {
|
||
width: 10
|
||
}
|
||
},
|
||
force: {
|
||
layoutAnimation: false,
|
||
repulsion: 500
|
||
}
|
||
}]
|
||
};
|
||
function sync_request(url){
|
||
|
||
//实例化XmlHttpRequest对象
|
||
var xhr=new XMLHttpRequest();
|
||
//使用GET方式请求指定网址的页面
|
||
xhr.open("GET",url,false);
|
||
//发送空内容请求
|
||
xhr.send(null);
|
||
|
||
if(xhr.status===200){//200状态码表示正常
|
||
result = xhr.responseText
|
||
// console.log(JSON.parse(result))
|
||
return JSON.parse(result)
|
||
}else{
|
||
alert("Error occurred:"+xhr.statusText);
|
||
}
|
||
}
|
||
|
||
|
||
function fillInfo(result, name) {
|
||
// graphList = {"keyword":{
|
||
// "nodes":[],
|
||
// "links":[]
|
||
// }}
|
||
if (graphList.keyword.nodes.length == 0) {
|
||
formNode = {"name":name, "category":category, "symbolSize":symbolSize}
|
||
graphList.keyword.nodes[0]=formNode
|
||
category += 1
|
||
symbolSize -= 5
|
||
}
|
||
else if (graphList.keyword.nodes[0].name == name) {
|
||
return 0
|
||
}
|
||
else {
|
||
// console.log(name)
|
||
category = nodeMap[name].category + 1
|
||
symbolSize = nodeMap[name].symbolSize - 5
|
||
}
|
||
|
||
nodeLen = graphList.keyword.nodes.length
|
||
linkLen = graphList.keyword.links.length
|
||
source = name
|
||
for (i = 0; i < result.data.avp.length; i++) {
|
||
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]}
|
||
graphList.keyword.links[linkLen+i]=formLink
|
||
}
|
||
}
|
||
|
||
graphList = {"keyword":{
|
||
"nodes":[],
|
||
"links":[]
|
||
}}
|
||
|
||
// 处理点击节点展开
|
||
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("无法继续展开");
|
||
return
|
||
}
|
||
Object.values(node.nodes).forEach(n => {
|
||
currentGraph.nodes[n.name] = n;
|
||
});
|
||
Object.values(node.links).forEach(l => {
|
||
currentGraph.links[l.source + "_" + l.target] = l;
|
||
});
|
||
node.hasAppend = true;
|
||
redrawGraph();
|
||
}
|
||
|
||
// 处理点击节点收缩
|
||
function remove(nodeName) {
|
||
//根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归
|
||
let node = nodeMap[nodeName];
|
||
Object.values(node.nodes).forEach(n => {
|
||
delete currentGraph.nodes[n.name];
|
||
if (n.hasAppend === true && Object.keys(n.nodes).length > 0) {
|
||
remove(n.name);
|
||
}
|
||
});
|
||
Object.values(node.links).forEach(l => {
|
||
delete currentGraph.links[l.source + '_' + l.target];
|
||
});
|
||
// 设置flag 等于false
|
||
node.hasAppend = false;
|
||
|
||
redrawGraph();
|
||
}
|
||
function loadData(name) {
|
||
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
|
||
if (JSON.stringify(result.data) == '{}'){
|
||
alert("nothing")
|
||
return 0
|
||
}
|
||
fillInfo(result, name)
|
||
nodeMap = {};
|
||
graph = graphList.keyword
|
||
for (let i = 0; i < graph.nodes.length; i++) {
|
||
nodeMap[graph.nodes[i].name] = graph.nodes[i];
|
||
nodeMap[graph.nodes[i].name]['links'] = {};
|
||
nodeMap[graph.nodes[i].name]['nodes'] = {};
|
||
nodeMap[graph.nodes[i].name]['hasAppend'] = false;
|
||
}
|
||
for (let i = 0; i < graph.links.length; i++) {
|
||
let link = graph.links[i];
|
||
if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
|
||
nodeMap[link.source].links[link.target] = link;
|
||
nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
|
||
}
|
||
}
|
||
for (let i = 0; i < graph.nodes.length; i++) {
|
||
graph.nodes[i].itemStyle = null;
|
||
graph.nodes[i].label = {
|
||
normal: {
|
||
show: graph.nodes[i].symbolSize > 15
|
||
}
|
||
};
|
||
}
|
||
append(name)
|
||
}
|
||
|
||
function init(name) {
|
||
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
|
||
if (!result.data) {
|
||
alert("nothing")
|
||
return 0
|
||
}
|
||
fillInfo(result, name)
|
||
nodeMap = {};
|
||
graph = graphList.keyword
|
||
for (let i = 0; i < graph.nodes.length; i++) {
|
||
if (graph.nodes[i].category === 1) {
|
||
currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i];
|
||
}
|
||
nodeMap[graph.nodes[i].name] = graph.nodes[i];
|
||
nodeMap[graph.nodes[i].name]['links'] = {};
|
||
nodeMap[graph.nodes[i].name]['nodes'] = {};
|
||
nodeMap[graph.nodes[i].name]['hasAppend'] = false;
|
||
}
|
||
for (let i = 0; i < graph.links.length; i++) {
|
||
let link = graph.links[i];
|
||
if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
|
||
nodeMap[link.source].links[link.target] = link;
|
||
nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
|
||
}
|
||
}
|
||
for (let i = 0; i < graph.nodes.length; i++) {
|
||
graph.nodes[i].itemStyle = null;
|
||
graph.nodes[i].label = {
|
||
normal: {
|
||
show: graph.nodes[i].symbolSize > 15
|
||
}
|
||
};
|
||
}
|
||
|
||
redrawGraph();
|
||
loadVideo('西藏');
|
||
}
|
||
|
||
init("西藏")
|
||
|
||
myChartGraph.on('click', function(params) {
|
||
if (params.dataType === "node") {
|
||
const node = nodeMap[params.data.name];
|
||
|
||
if (node.hasAppend === true) {
|
||
remove(node.name)
|
||
} else {
|
||
loadData(node.name);
|
||
}
|
||
}
|
||
});
|
||
|
||
$('#btn').on('click', function () {
|
||
|
||
if ($('.fixed-left').hasClass('active')) {
|
||
|
||
$('.fixed-left').removeClass('active');
|
||
$('.video_img, .search-area').show();
|
||
$('.screen_icon').removeClass('icon-suoxiao').addClass('icon-kuoda');
|
||
$('.screen-btn').css({
|
||
left: '360px'
|
||
})
|
||
graphContainer.style.width = 400 + 'px';
|
||
graphContainer.style.height = '60%';
|
||
|
||
} else {
|
||
var width = document.body.clientWidth;
|
||
$('.fixed-left').addClass('active');
|
||
$('.screen-btn').css({
|
||
left: width - 40 + 'px'
|
||
});
|
||
$('.video_img, .search-area').hide();
|
||
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
|
||
graphContainer.style.width = document.body.clientWidth + 'px';
|
||
graphContainer.style.height = document.body.clientHeight + 'px';
|
||
}
|
||
// redrawGraph();
|
||
myChartGraph.resize();
|
||
});
|
||
|
||
|
||
function loadVideo(name) {
|
||
if (name == "西藏" || name == "新疆" || name == "青海") {
|
||
temp = 1
|
||
}
|
||
else {
|
||
name = "西藏"
|
||
}
|
||
$("video").remove();
|
||
var newPath = "./image/"+name+"/1.mp4"
|
||
var newSource = "<video width=\"100%\" height=\"100%\" controls>"+
|
||
"<source class=\"video\" src="+newPath+" type=\"video/mp4\">"+
|
||
"<source src=\"movie.ogg\" type=\"video/ogg\">"+
|
||
"Your browser does not support the video tag."+
|
||
"</video>"
|
||
$(".div-video").prepend(newSource)
|
||
}
|
||
})
|
||
|
||
</script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
$('.slider_one_big_picture').EasySlides({
|
||
'autoplay': true,
|
||
'stepbystep': false,
|
||
'show': 0,
|
||
'loop': true
|
||
});
|
||
|
||
// 左侧全屏
|
||
$('.search-prov').on('mouseover', function () {
|
||
$('.search_input').addClass('active');
|
||
}).on('mouseout', function () {
|
||
$('.search_input').removeClass('active');
|
||
});
|
||
|
||
// 搜索
|
||
$('.more_icon').on('mouseover', function () {
|
||
$('.detail_info').show();
|
||
}).on('mouseout', function () {
|
||
var timer = setTimeout(function () {
|
||
$('.detail_info').hide();
|
||
}, 300);
|
||
$('.detail_info').on('mouseover', function () {
|
||
clearTimeout(timer);
|
||
$('.detail_info').show();
|
||
}).on('mouseout', function () {
|
||
$('.detail_info').hide();
|
||
});
|
||
})
|
||
|
||
|
||
// 根据省份查找
|
||
function searchProvince (value) {
|
||
console.log('查找的省份:', value);
|
||
highLight(value)
|
||
|
||
}
|
||
$('.search_icon').on('click', function () {
|
||
var $val = $(".search_input").val();
|
||
// alert($val)
|
||
searchProvince($val)
|
||
});
|
||
$('.search_input').on('keydown', function (e) {
|
||
if (e.keyCode === 13) {
|
||
// 调用查找接口
|
||
var $val = $(this).val();
|
||
searchProvince($val)
|
||
}
|
||
})
|
||
|
||
$('.detail_info').on('click', 'li', function () {
|
||
console.log($(this).attr('data-key'));
|
||
$('.detail_info').hide();
|
||
var key = $(this).attr('data-key');
|
||
if (key === 'prov') {
|
||
$('.search-prov').show();
|
||
$('.lat_lon_sec').hide();
|
||
}
|
||
else if (key === 'lon') {
|
||
$('.search-prov').hide();
|
||
$('.lat_lon_sec').show();
|
||
}
|
||
else {
|
||
$('.search-prov').hide();
|
||
}
|
||
});
|
||
|
||
function latOrLonSearch () {
|
||
var lat = $('.lat').val(); // 纬度
|
||
var lon = $('.lon').val(); // 经度
|
||
if (!lat || !lon) {
|
||
if (!lat) $('.lat').focus();
|
||
if (!lon) $('.lon').focus();
|
||
return;
|
||
}
|
||
console.log('经度', lon);
|
||
console.log('纬度', lat);
|
||
};
|
||
|
||
$('.search_input_common').on('keydown', function (e) {
|
||
if (e.keyCode === 13) {
|
||
latOrLonSearch();
|
||
}
|
||
})
|
||
|
||
$('.lat_lon_search').on('click', function () {
|
||
latOrLonSearch();
|
||
})
|
||
|
||
|
||
// 左侧滑屏结束后调用该事件，重新渲染知识图谱
|
||
// $('.fixed-left').on('transitionend', function () {
|
||
// console.log('滑屏结束时，调用渲染知识图谱');
|
||
// // redrawGraph()
|
||
// })
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
$(function(){
|
||
$(".show_detail").hover(function(){
|
||
$(this).find(".detail_info").show();
|
||
},function(){
|
||
$(this).find(".detail_info").hide();
|
||
})
|
||
$(".detail_info").on("click",".info_txt",function(){
|
||
var key = $(this).attr("data-key");
|
||
$(".search-input-item").removeClass("active");
|
||
$("."+key).addClass("active");
|
||
if(key === "voice"){
|
||
$(".voicePanel").addClass("active");
|
||
}
|
||
})
|
||
|
||
$(".carouselBottom").on("click",".bottomItem",function(){
|
||
$(".bottomItem").removeClass("active");
|
||
$(this).addClass("active");
|
||
})
|
||
})
|
||
|
||
// 取消语音录入
|
||
function cancelVoice(){
|
||
$(".voicePanel").removeClass("active");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |