597 lines
21 KiB
HTML
597 lines
21 KiB
HTML
|
<!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="sureVoice();">确定</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 class="ml10">
|
|||
|
|
<a href="/map.html">首页</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="ml10">
|
|||
|
|
<a href="javscript:void(0)" title="正在完善中">新闻动态</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="ml10">
|
|||
|
|
<a href="javscript:void(0)" title="正在完善中">后台管理</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/300.png" />
|
|||
|
|
<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="./machine.html">
|
|||
|
|
<img src="./image/2.png" />AI智能服务
|
|||
|
|
</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 src="https://www.w3school.com.cn/i/movie.ogg" width="100%" height="100%" controls="controls">
|
|||
|
|
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
<div class="slider_panel">
|
|||
|
|
<div class="silider_panel_from">
|
|||
|
|
<span class="photo_icon iconfont icon-kuoda"></span>
|
|||
|
|
<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>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
//回车
|
|||
|
|
$(document).keydown(function(event)
|
|||
|
|
{
|
|||
|
|
if(event.keyCode==13 && $(".search-input-item.prov").is(":focus"))
|
|||
|
|
{
|
|||
|
|
var name = $(".search-input-item.prov").val();
|
|||
|
|
$(".fixed-left").addClass("collpased").css({left:"0px"});
|
|||
|
|
init(name);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
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) == '{}'){
|
|||
|
|
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) {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
graphList = {"keyword":{
|
|||
|
|
"nodes":[],
|
|||
|
|
"links":[]
|
|||
|
|
}}
|
|||
|
|
currentGraph = {
|
|||
|
|
nodes: {},
|
|||
|
|
links: {},
|
|||
|
|
};
|
|||
|
|
category = 1;
|
|||
|
|
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(name);
|
|||
|
|
// myChartGraph.resize();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init("班公湖")
|
|||
|
|
|
|||
|
|
window.loadData = loadData;
|
|||
|
|
window.initial = init;
|
|||
|
|
window.myChartGraph = myChartGraph;
|
|||
|
|
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 == "青海"|| name == "班公湖") {
|
|||
|
|
temp = 1
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
name = "西藏"
|
|||
|
|
}
|
|||
|
|
$("video").remove();
|
|||
|
|
var newPath = "./image/"+name+"/video.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 src="./js/public.js"></script>
|
|||
|
|
|
|||
|
|
<script src="./js/map.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|