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

629 lines
22 KiB
HTML
Raw Normal View History

地图整合
2019-12-19 09:29:32 +08:00
<!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>
需求变更
2019-12-20 15:12:28 +08:00
<a href="javascript:void(0)" onclick="sureVoice();">确定</a>
地图整合
2019-12-19 09:29:32 +08:00
</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">
..
2019-12-19 22:22:00 +08:00
<li class="ml10">
<a href="/map.html">首页</a>
地图整合
2019-12-19 09:29:32 +08:00
</li>
..
2019-12-19 22:22:00 +08:00
<li class="ml10">
<a href="javscript:void(0)" title="正在完善中">新闻动态</a>
地图整合
2019-12-19 09:29:32 +08:00
</li>
..
2019-12-19 22:22:00 +08:00
<li class="ml10">
<a href="javscript:void(0)" title="正在完善中">后台管理</a>
map size
2019-12-19 11:59:32 +08:00
</li>
地图整合
2019-12-19 09:29:32 +08:00
</ul>
</div>
<ul class="user_info">
<span class="search-Panel">
需求变更
2019-12-20 15:12:28 +08:00
<input class="search-input-item prov" placeholder="请输入关键字" />
地图整合
2019-12-19 09:29:32 +08:00
<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">
需求变更
2019-12-20 15:12:28 +08:00
<li class="info_txt" data-key="prov">关键字</li>
地图整合
2019-12-19 09:29:32 +08:00
<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">
..
2019-12-19 22:22:00 +08:00
<img class="user_img" src="./image/300.png" />
地图整合
2019-12-19 09:29:32 +08:00
<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">
头像
2019-12-24 09:30:40 +08:00
<a class="bottomItem active" href="javscript:void(0)">
地图整合
2019-12-19 09:29:32 +08:00
<img src="./image/1.png" />服务优势
</a>
头像
2019-12-24 09:30:40 +08:00
<a class="bottomItem" href="./machine.html">
..
2019-12-19 22:22:00 +08:00
<img src="./image/2.png" />AI智能服务
地图整合
2019-12-19 09:29:32 +08:00
</a>
头像
2019-12-24 09:30:40 +08:00
<a class="bottomItem" href="javscript:void(0)">
地图整合
2019-12-19 09:29:32 +08:00
<img src="./image/3.png" />案例精选
</a>
头像
2019-12-24 09:30:40 +08:00
<a class="bottomItem" href="javscript:void(0)">
地图整合
2019-12-19 09:29:32 +08:00
<img src="./image/4.png" />快速入门
</a>
</div>
</div>
左侧图谱位置
2019-12-19 15:16:38 +08:00
<div class="map-container">
<div class="fixed-left">
<div class="screen-btn screen-open" id="btn">
<span class="screen_icon iconfont icon-kuoda"></span>
地图整合
2019-12-19 09:29:32 +08:00
</div>
头像
2019-12-24 09:30:40 +08:00
<div class="left_echart" id="mainGraph"></div>
左侧图谱位置
2019-12-19 15:16:38 +08:00
<div class="video_img">
<div class="div-video" style="background: #1D346F;">
视频
2019-12-20 16:50:33 +08:00
<video src="https://www.w3school.com.cn/i/movie.ogg" width="100%" height="100%" controls="controls">
头像
2019-12-24 09:30:40 +08:00
左侧图谱位置
2019-12-19 15:16:38 +08:00
</video>
</div>
视频
2019-12-20 16:50:33 +08:00
<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>
左侧图谱位置
2019-12-19 15:16:38 +08:00
</div>
</div>
头像
2019-12-24 09:30:40 +08:00
</div>
地图整合
2019-12-19 09:29:32 +08:00
</div>
头像
2019-12-24 09:30:40 +08:00
左侧图谱位置
2019-12-19 15:16:38 +08:00
<div id="maps" style="height: 100%; width: 100%;"></div>
地图整合
2019-12-19 09:29:32 +08:00
</div>
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
<script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
头像
2019-12-24 09:30:40 +08:00
<script type="text/javascript">
$(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");
})
// 放大banner图
$(".photo_icon").on("click",function(){
if($(this).parents(".slider_panel").hasClass("active")){
$(this).parents(".slider_panel").removeClass("active");
}else{
$(this).parents(".slider_panel").addClass("active");
}
})
})
</script>
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
地图整合
2019-12-19 09:29:32 +08:00
<script type="text/javascript" src="./js/demo.js"></script>
<script>
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
$(document).ready(function () {
主页搜索的问题
2019-12-19 20:35:32 +08:00
//回车
$(document).keydown(function(event)
{
需求变更
2019-12-20 15:12:28 +08:00
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);
}
主页搜索的问题
2019-12-19 20:35:32 +08:00
});
地图整合
2019-12-19 09:29:32 +08:00
var graphContainer = document.getElementById('mainGraph');
var myChartGraph = echarts.init(graphContainer);
// 根据更新后的option重新画图
function redrawGraph() {
update style
2019-12-19 11:32:28 +08:00
// $('.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');
地图整合
2019-12-19 09:29:32 +08:00
optionGraph.series[0].data = Object.values(currentGraph.nodes);
optionGraph.series[0].links = Object.values(currentGraph.links);
myChartGraph.setOption(optionGraph);
}
// 页面加载时，第一次初始化图，以及点击省份后更换数据
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
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);
头像
2019-12-24 09:30:40 +08:00
}
地图整合
2019-12-19 09:29:32 +08:00
}
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
}
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
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
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
let node = nodeMap[nodeName];
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) {
..
2019-12-19 22:22:00 +08:00
alert("没有数据继续展开");
地图整合
2019-12-19 09:29:32 +08:00
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
}
update js
2019-12-19 16:46:52 +08:00
graphList = {"keyword":{
"nodes":[],
"links":[]
}}
currentGraph = {
nodes: {},
links: {},
};
category = 1;
地图整合
2019-12-19 09:29:32 +08:00
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();
update js
2019-12-19 16:46:52 +08:00
loadVideo(name);
// myChartGraph.resize();
地图整合
2019-12-19 09:29:32 +08:00
}
mp4
2019-12-20 17:14:16 +08:00
init("班公湖")
地图整合
2019-12-19 09:29:32 +08:00
update js
2019-12-19 16:46:52 +08:00
window.loadData = loadData;
window.initial = init;
window.myChartGraph = myChartGraph;
地图整合
2019-12-19 09:29:32 +08:00
myChartGraph.on('click', function(params) {
if (params.dataType === "node") {
const node = nodeMap[params.data.name];
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
if (node.hasAppend === true) {
remove(node.name)
} else {
loadData(node.name);
}
}
});
$('#btn').on('click', function () {
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
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%';
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
} 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();
});
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
function loadVideo(name) {
新疆-mp4
2019-12-20 17:00:51 +08:00
if (name == "西藏" || name == "新疆" || name == "青海"|| name == "班公湖") {
地图整合
2019-12-19 09:29:32 +08:00
temp = 1
}
else {
name = "西藏"
}
$("video").remove();
mp4
2019-12-20 17:14:16 +08:00
var newPath = "./image/"+name+"/video.mp4"
地图整合
2019-12-19 09:29:32 +08:00
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)
}
})
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
</script>
<script type="text/javascript">
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
$(document).ready(function () {
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
$('.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)
头像
2019-12-24 09:30:40 +08:00
地图整合
2019-12-19 09:29:32 +08:00
}
$('.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();
头像
2019-12-24 09:30:40 +08:00
}
地图整合
2019-12-19 09:29:32 +08:00
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();
})
map-left
2019-12-19 15:45:01 +08:00
地图整合
2019-12-19 09:29:32 +08:00
// 左侧滑屏结束后调用该事件，重新渲染知识图谱
// $('.fixed-left').on('transitionend', function () {
// console.log('滑屏结束时，调用渲染知识图谱');
// // redrawGraph()
// })
});
</script>
头像
2019-12-24 09:30:40 +08:00
<!-- <script src="./js/public.js"></script> -->
update js
2019-12-19 16:46:52 +08:00
<script src="./js/map.js"></script>
地图整合
2019-12-19 09:29:32 +08:00
</body>
头像
2019-12-24 09:30:40 +08:00
</html>