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

1766 lines
63 KiB
HTML
Raw Normal View History

init project
2019-12-10 10:49:33 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
add layout and style
2019-12-10 18:06:23 +08:00
<title>map</title>
<link href="./css/demo.css" rel="stylesheet">
updagte style
2019-12-11 11:51:00 +08:00
<link rel="stylesheet" href="./css/flexleft.css">
add layout and style
2019-12-10 18:06:23 +08:00
<link href="./css/slider.css" rel="stylesheet">
<link href="./font/iconfont.css" rel="stylesheet">
init project
2019-12-10 10:49:33 +08:00
<!-- 引入 echarts.js -->
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
add layout and style
2019-12-10 18:06:23 +08:00
<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
init project
2019-12-10 10:49:33 +08:00
<script src="echarts.min.js"></script>
<!-- 引入 china.js -->
<script src="china.js"></script>
</head>
<body>
updagte style
2019-12-11 11:51:00 +08:00
<div class="map_header">
<h2 class="logo_txt">
<span class="iconfont icon-zhankai collpase-icon"></span>
replace the system name
2019-12-12 13:07:35 +08:00
知识服务系统
updagte style
2019-12-11 11:51:00 +08:00
</h2>
<ul class="user_info">
<li class="info-item">
<div class="lat_lon_sec">
<input
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
class="search_input_common lon" placeholder="经度" />
<input
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
class="search_input_common lat" placeholder="纬度" />
<span class="iconfont icon-search lat_lon_search"></span>
</div>
</li>
<li class="info-item">
<div class="search-prov">
<input class="search_input" placeholder="请输入地点" />
<span class="search_icon iconfont icon-search">
</span>
</div>
</li>
<li class="info-item">
<!-- 搜索,径纬度 区域 -->
<div class="search-area">
<div class="show_detail">
<span class="iconfont icon-gengduo more_icon"></span>
<ul class="detail_info">
<li class="info_txt" data-key="prov">地点</li>
<li class="info_txt" data-key="lon">经纬度</li>
modify voice search style
2019-12-11 16:08:22 +08:00
<li class="info_txt" data-key="voice">语音</li>
updagte style
2019-12-11 11:51:00 +08:00
</ul>
</div>
</div>
</li>
<li class="info-item drop-down">
<img class="user_img" src="./image/3.jpg" />
<span class="user_nick">
admin
</span>
<ul class="drop-down-list">
<li class="drop-down-item">退出</li>
</ul>
</li>
</ul>
</div>
<div class="fixed-left">
<div class="video_img">
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<div class="div-video" style="background: #1D346F;">
updagte style
2019-12-11 11:51:00 +08:00
<video width="100%" height="100%" controls>
correct the question from merg
2019-12-11 13:40:55 +08:00
<source class="video" src="./image/西藏/1.mp4" type="video/mp4">
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<source src="movie.ogg" type="video/ogg" style="width: 400px;">
updagte style
2019-12-11 11:51:00 +08:00
Your browser does not support the video tag.
</video>
</div>
<div class="slider slider_one_big_picture">
<div>
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/1.jpg" />
updagte style
2019-12-11 11:51:00 +08:00
</div>
<div>
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/2.jpg" />
updagte style
2019-12-11 11:51:00 +08:00
</div>
<div>
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/3.jpg" />
updagte style
2019-12-11 11:51:00 +08:00
</div>
<div>
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/4.jpg" />
updagte style
2019-12-11 11:51:00 +08:00
</div>
<div>
modify the size of slide picture and video background color
2019-12-11 15:37:35 +08:00
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/5.jpg" />
updagte style
2019-12-11 11:51:00 +08:00
</div>
<div class="next_button"></div>
<div class="prev_button"></div>
<div class="nav_indicators"></div>
</div>
update style
2019-12-11 15:17:54 +08:00
</div>
</div>
updagte style
2019-12-11 11:51:00 +08:00
update style
2019-12-11 15:17:54 +08:00
<div class="left_echart" id="mainGraph"></div>
<div class="screen-btn screen-open" id="btn">
<span class="screen_icon iconfont icon-kuoda"></span>
add layout and style
2019-12-10 18:06:23 +08:00
</div>
init project
2019-12-10 10:49:33 +08:00
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
merge
2019-12-10 18:08:22 +08:00
solve the question of much padding and margin
2019-12-10 11:12:22 +08:00
<div id="main" style="width: 100%;height:100vh;"></div>
init project
2019-12-10 10:49:33 +08:00
add layout and style
2019-12-10 18:06:23 +08:00
<script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
updagte style
2019-12-11 11:51:00 +08:00
<script type="text/javascript" src="./js/demo.js"></script>
init project
2019-12-10 10:49:33 +08:00
<script type="text/javascript">
update style
2019-12-11 16:08:04 +08:00
var graphContainer = document.getElementById('mainGraph');
init project
2019-12-10 10:49:33 +08:00
// 基于准备好的dom，初始化echarts实例，地图
var myChart = echarts.init(document.getElementById('main'));
update style
2019-12-11 16:08:04 +08:00
// var resizeGraphContainer = function () {
// graphContainer.style.width = document.body.clientWidth + 'px';
// graphContainer.style.height = document.body.clientHeight + 'px';
// }
init project
2019-12-10 10:49:33 +08:00
// 知识图谱
update style
2019-12-11 16:08:04 +08:00
var myChartGraph = echarts.init(graphContainer);
init project
2019-12-10 10:49:33 +08:00
function tooltipCharts() {
console.log(arguments[0]);
var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
var option = {
tooltip: {},
dataset: {
source: [
['xAxis', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'],
['amount', 41.1, 30.4, 65.1, 53.3, 53.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 53.8]
]
},
xAxis: {
type: 'category',
interval: true,
axisLabel: {
rotate: 45
},
axisTick: {
show: false
}
},
yAxis: {},
color: ['#4FA8F9', '#F5A623'],
grid: {
show: true,
backgroundColor: '#1D346F',
left: 30,
right: 10,
top: 10,
bottom: 20,
},
series: [{
type: 'bar',
smooth: true,
seriesLayoutBy: 'row',
barWidth: 10
}]
};
myChart1.setOption(option);
}
// 各省份经纬度
var chinaGeoCoordMap = {
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.48, 31.22],
"香港": [114.15, 22.15],
"澳门": [113.5, 22.2],
'台湾': [121.31, 25.03]
};
// 各省份对应的浮框数据信息，不包括浮框中的柱状图
var chinaDatas = [
[{
name: '黑龙江',
value: 0,
ave:"黑",
provincialcapital:"哈尔滨",
diqu:"中国东北地区",
qihou:"温带大陆性季风气候、寒温带气候",
people:"3773.1万人" ,
num:"47.3万平方公里" ,
GDP:"16361.6亿元",
renjunGDP:"43274元"
}],
[{
name: '内蒙古',
value: 0,
ave:"内蒙古",
provincialcapital:"呼和浩特",
diqu:"中国北部边疆",
qihou:"温带大陆性气候、温带季风气候",
people:"2534万人" ,
num:"118.3万平方公里" ,
GDP:"17289.2亿元",
renjunGDP:"68302元"
}],
[{
name: '吉林',
value: 0,
ave:"吉",
provincialcapital:"长春",
diqu:"中国东北地区",
qihou:"温带季风气候",
people:"2704.06万人" ,
num:"18.74万平方公里" ,
GDP:"15074.62亿元",
renjunGDP:"55611元"
}],
[{
name: '北京',
value: 0,
ave:"京",
provincialcapital:"直辖市",
diqu:"中国华北地区",
qihou:"温带季风性气候",
people:"2154.2万人" ,
num:"1.64万平方公里" ,
GDP:"30320亿元",
renjunGDP:"140000元"
}],
[{
name: '辽宁',
value: 0,
ave:"辽",
provincialcapital:"沈阳",
diqu:"中国东北地区",
qihou:"温带季风气候",
people:"4359.3万人" ,
num:"14.86万平方公里" ,
GDP:"25315.4亿元",
renjunGDP:"58008元"
}],
[{
name: '河北',
value: 0,
ave:"冀",
provincialcapital:"石家庄",
diqu:"中国华北地区",
qihou:"温带大陆性季风气候",
people:"7556.30万人" ,
num:"18.88万平方公里" ,
GDP:"36010.3亿元",
renjunGDP:"47772元"
}],
[{
name: '天津',
value: 0,
ave:"黑",
provincialcapital:"哈尔滨",
diqu:"中国华北地区",
qihou:"温带大陆性季风气候",
people:"3773.1万人" ,
num:"47.3万平方公里" ,
GDP:"16361.6亿元",
renjunGDP:"120000元"
}],
[{
name: '山西',
value: 0,
ave:"晋",
provincialcapital:"太原",
diqu:"中国华北地区",
qihou:"温带大陆性季风气候",
people:"3718.34万人" ,
num:"15.67万平方公里" ,
GDP:"16818.1亿元",
renjunGDP:"45328元"
}],
[{
name: '陕西',
value: 0,
ave:"“陕”或“秦”",
provincialcapital:"西安",
diqu:"中国西北地区",
qihou:"温带季风气候、亚热带季风气候",
people:"3864.40万" ,
num:"20.56万平方公里" ,
GDP:"24438.32亿元",
renjunGDP:"63477元"
}],
[{
name: '甘肃',
value: 0,
ave:"“甘”或“陇”",
provincialcapital:"兰州",
diqu:"中国西北地区",
qihou:"温带大陆性气候、高原山地气候",
people:"2637.26万人" ,
num:"42.58万平方公里" ,
GDP:"8246.1亿元",
renjunGDP:"31336元"
}],
[{
name: '宁夏',
value: 0,
ave:"宁",
provincialcapital:"银川",
diqu:"中国西北地区",
qihou:"温带大陆性气候",
people:"688.11万人" ,
num:"6.64万平方公里" ,
GDP:"3705.18亿元",
renjunGDP:"54094元"
}],
[{
name: '青海',
value: 0,
ave:"青",
provincialcapital:"西宁",
diqu:"中国西北地区",
qihou:"高原大陆性气候",
people:"603.23万人" ,
num:"72万平方公里" ,
GDP:"2865.23亿元",
renjunGDP:"47689元"
}],
[{
name: '新疆',
value: 0,
ave:"新",
provincialcapital:"乌鲁木齐",
diqu:"中国西北地区",
qihou:"温带大陆性气候",
people:"2486.76万人" ,
num:"166万平方公里" ,
GDP:"12199.08亿元",
renjunGDP:"49474元"
}],
[{
name: '西藏',
value: 0,
ave:"藏",
provincialcapital:"拉萨",
diqu:"中国西南地区",
qihou:"西北严寒、东南温暖湿润",
people:"343.82万人" ,
num:"122.84万平方公里" ,
GDP:"1477.63亿元",
renjunGDP:"43397元"
}],
[{
name: '四川',
value: 0,
ave:"“川”或“蜀”",
provincialcapital:"成都",
diqu:"中国西南地区",
qihou:"亚热带季风气候、高原山地气候",
people:"8341万人" ,
num:"47.3万平方公里" ,
GDP:"40678.13亿元",
renjunGDP:"48883元"
}],
[{
name: '重庆',
value: 0,
ave:"渝",
provincialcapital:"直辖市",
diqu:"中国西南地区",
qihou:"亚热带季风性湿润气候",
people:"3101.79万人" ,
num:"48.6万平方公里" ,
GDP:"20363.19亿元",
renjunGDP:"65933元"
}],
[{
name: '山东',
value: 0,
ave:"鲁",
provincialcapital:"济南",
diqu:"中国华北地区",
qihou:"温带季风气候",
people:"10047.24万人" ,
num:"15.79万平方公里" ,
GDP:"76469.7亿元",
renjunGDP:"76267元"
}],
[{
name: '河南',
value: 0,
ave:"豫",
provincialcapital:"郑州",
diqu:"中国华中地区",
qihou:"温带季风气候，亚热带季风气候",
people:"9605万人" ,
num:"16.7万平方公里" ,
GDP:"48055.86亿元",
renjunGDP:"50152元"
}],
[{
name: '江苏',
value: 0,
ave:"黑",
provincialcapital:"南京",
diqu:"中国华东地区",
qihou:"亚热带季风气候，温带季风气候",
people:"8050.7万人" ,
num:"10.72万平方公里" ,
GDP:"92595.4亿元",
renjunGDP:"115000元"
}],
[{
name: '安徽',
value: 0,
ave:"皖",
provincialcapital:"合肥",
diqu:"中国华北地区",
qihou:"温带季风气候、亚热带季风气候",
people:"6323.6万人" ,
num:"14.01万平方公里" ,
GDP:"30006.8亿元",
renjunGDP:"47712元"
}],
[{
name: '湖北',
value: 0,
ave:"鄂",
provincialcapital:"武汉",
diqu:"中国中部地区",
qihou:"亚热带季风气候、高原山地气候",
people:"5917万人" ,
num:"18.59万平方公里" ,
GDP:"39366.55亿元",
renjunGDP:"66615元"
}],
[{
name: '浙江',
value: 0,
ave:"浙",
provincialcapital:"杭州",
diqu:"中国华东地区",
qihou:"亚热带季风气候",
people:"5737万人" ,
num:"10.55万平方公里" ,
GDP:"56197亿元",
renjunGDP:"98643元"
}],
[{
name: '福建',
value: 0,
ave:"闽",
provincialcapital:"福州",
diqu:"中国华东地区",
qihou:"亚热带季风气候",
people:"3941万人" ,
num:"12.4万平方公里" ,
GDP:"35804.04亿元",
renjunGDP:"91197元"
}],
[{
name: '江西',
value: 0,
ave:"赣",
provincialcapital:"南昌",
diqu:"中国华东地区",
qihou:"亚热带季风性湿润气候",
people:"4647.6万人" ,
num:"16.69万平方公里" ,
GDP:"21984.8亿元",
renjunGDP:"47433元"
}],
[{
name: '湖南',
value: 0,
ave:"湘",
provincialcapital:"长沙",
diqu:"中南地区",
qihou:"亚热带季风气候",
people:"6898.8万人" ,
num:"21.18万平方公里" ,
GDP:"36425.8亿元",
renjunGDP:"53097元"
}],
[{
name: '贵州',
value: 0,
ave:"贵",
provincialcapital:"贵阳",
diqu:"西南地区",
qihou:"亚热带季风气候",
people:"3600.0万人" ,
num:"17.6167万平方公里" ,
GDP:"14806.4亿元",
renjunGDP:"41400元"
}],
[{
name: '云南',
value: 0,
ave:"云",
provincialcapital:"昆明",
diqu:"西南地区",
qihou:"亚热带季风气候、热带季风气候、高原山地气候",
people:"4829.5万人" ,
num:"47.3万平方公里" ,
GDP:"14869.9亿元",
renjunGDP:"31358元"
}],
[{
name: '广东',
value: 0,
ave:"粤",
provincialcapital:"广州",
diqu:"华南地区",
qihou:"亚热带季风气候",
people:"11346.0万人" ,
num:"17.97万平方公里" ,
GDP:"89879.2亿元",
renjunGDP:"81089元"
}],
[{
name: '广西',
value: 0,
ave:"桂",
provincialcapital:"南宁",
diqu:"华南地区",
qihou:"亚热带季风气候",
people:"4926万人" ,
num:"23.76万平方公里" ,
GDP:"20396.2亿元",
renjunGDP:"41752元"
}],
[{
name: '海南',
value: 0,
ave:"琼",
provincialcapital:"海口",
diqu:"华南地区",
qihou:"热带海洋性季风气候",
people:"934.32万人" ,
num:"3.54万平方公里" ,
GDP:"4832.05亿元",
renjunGDP:"52195.5元"
}],
[{
name: '上海',
value: 0,
ave:"沪",
provincialcapital:"上海",
diqu:"华东地区",
qihou:"亚热带季风气候",
people:"2423.78万人" ,
num:"6340.5平方公里" ,
GDP:"32679.87亿元",
renjunGDP:"135000元"
}],
[{
name: '香港',
value: 0,
ave:"港",
provincialcapital:"香港",
diqu:"华南地区",
qihou:"亚热带季风气候",
people:"748.25万人" ,
num:"1106.34平方公里" ,
GDP:"24042.15亿元",
renjunGDP:"343595.02元"
}],
[{
name: '澳门',
value: 0,
ave:"澳",
provincialcapital:"澳门",
diqu:"华南地区",
qihou:"亚热带季风气候",
people:"67.2万" ,
num:"32.8平方公里" ,
GDP:"4448.88亿元",
renjunGDP:"676564.63元"
}],
[{
name: '台湾',
value: 0,
ave:"台",
provincialcapital:"台湾",
diqu:"华东地区",
qihou:"北回归线以北属亚热带季风气候，以南属热带季风气候",
people:"2358万人" ,
num:"36192.8155平方公里" ,
GDP:"3.9万亿元人民币",
renjunGDP:"165400元"
}]
]
// 设置 series 内容
complete search funciton by province name
2019-12-11 15:21:30 +08:00
let redName = '西藏';
// 搜索时，高亮搜索结果（省份）
function highLight(name) {
redName = name
var series = [];
[ [redName, chinaDatas] ].forEach(function(item, i) {
series.push(
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'fill', //波纹绘制方式 stroke, fill
scale: .5 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params) { //圆环显示文字
return params.data.name;
},
fontSize: 14
},
},
symbol: 'circle',
symbolSize: function(val) {
return 10; //圆环大小
},
itemStyle: {
normal: {
show: false,
// color: '#f00'
color: function(params) { //圆环显示文字
// if (params.data.dataItem[0].name == redName) {
// return '#2bd291'
// } else {
return '#70c4eb'
// }
},
}
},
// 在这里修改悬浮框,加了一个show:true
tooltip: {
show:true,
trigger: 'item',
backgroundColor: 'rgba(8, 18, 42, 0.85)',
borderColor: '#040616',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
//console.log('params--2',params)
let res = "";
let name = params.data.dataItem[0].name;
let ave = params.data.dataItem[0].ave;
let provincialcapital= params.data.dataItem[0].provincialcapital;
let diqu = params.data.dataItem[0].diqu;
let qihou = params.data.dataItem[0].qihou;
let people = params.data.dataItem[0].people;
let num = params.data.dataItem[0].num;
let GDP = params.data.dataItem[0].GDP;
let renjunGDP = params.data.dataItem[0].renjunGDP;
res = "<div style='color:#fff;padding:10px;'><span>名称：" + name + "</span><br/><span>中文名：" + ave + "</span><br/><span>外文名：" + provincialcapital + "</span><br/><span>所属地区：" + diqu + "</span><br/><span>气候：" + qihou + "</span><br/><span>面积：" + people + "</span><br/><span>语言：" + num + "</span><br/><span>海拔：" + GDP + "</span><br/><span>著名景点：" + renjunGDP +
' </div>' +
' </div>' +
'<div id="tooltipBarId" style="height:100px;width:100%;border-radius:0 0 5px 0;background:#D79D3D"></div>'+ "</span><br/><span>演示表格可以任意定制输入及其他参数";
setTimeout(function() {
tooltipCharts(params.name);
}, 10);
return res;
}
},
data: item[1].map(function(dataItem) {
return {
dataItem: dataItem,
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
fontSize: 14,
offset: [5, 0],
color: '#2bd291',
formatter: '{b}',
textStyle: {
color: "#2bd291"
}
},
},
symbol: 'pin',
color:'#2bd291',
symbolSize: 50,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
},
{
type: 'map',
geoIndex: 0
}
);
});
option = {
tooltip: {
show:false,
trigger: 'item',
position: 'top',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#040616',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100'
},
backgroundColor: "#1D346F",
geo: {
show: true,
map: 'china',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
// roam: false,//地图设置不可拖拽，固定的
itemStyle: {
normal: {
areaColor: '#1D346F',
borderWidth: 0,
shadowColor: '#D79D3D',
shadowBlur: 30,
shadowOffsetX: -5,
shadowOffsetY: 10
}
}
},
series: series
};
myChart.setOption(option);
}
init project
2019-12-10 10:49:33 +08:00
var series = [];
complete search funciton by province name
2019-12-11 15:21:30 +08:00
[ [redName, chinaDatas] ].forEach(function(item, i) {
init project
2019-12-10 10:49:33 +08:00
series.push(
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'fill', //波纹绘制方式 stroke, fill
scale: .5 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params) { //圆环显示文字
return params.data.name;
},
fontSize: 14
},
},
symbol: 'circle',
symbolSize: function(val) {
return 10; //圆环大小
},
itemStyle: {
normal: {
show: false,
// color: '#f00'
color: function(params) { //圆环显示文字
complete search funciton by province name
2019-12-11 15:21:30 +08:00
// if (params.data.dataItem[0].name == redName) {
// return '#2bd291'
// } else {
init project
2019-12-10 10:49:33 +08:00
return '#70c4eb'
complete search funciton by province name
2019-12-11 15:21:30 +08:00
// }
init project
2019-12-10 10:49:33 +08:00
},
}
},
// 在这里修改悬浮框,加了一个show:true
tooltip: {
show:true,
trigger: 'item',
backgroundColor: 'rgba(8, 18, 42, 0.85)',
borderColor: '#040616',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
// 根据业务自己拓展要显示的内容
//console.log('params--2',params)
let res = "";
let name = params.data.dataItem[0].name;
let ave = params.data.dataItem[0].ave;
let provincialcapital= params.data.dataItem[0].provincialcapital;
let diqu = params.data.dataItem[0].diqu;
let qihou = params.data.dataItem[0].qihou;
let people = params.data.dataItem[0].people;
let num = params.data.dataItem[0].num;
let GDP = params.data.dataItem[0].GDP;
let renjunGDP = params.data.dataItem[0].renjunGDP;
res = "<div style='color:#fff;padding:10px;'><span>名称：" + name + "</span><br/><span>中文名：" + ave + "</span><br/><span>外文名：" + provincialcapital + "</span><br/><span>所属地区：" + diqu + "</span><br/><span>气候：" + qihou + "</span><br/><span>面积：" + people + "</span><br/><span>语言：" + num + "</span><br/><span>海拔：" + GDP + "</span><br/><span>著名景点：" + renjunGDP +
' </div>' +
' </div>' +
'<div id="tooltipBarId" style="height:100px;width:100%;border-radius:0 0 5px 0;background:#D79D3D"></div>'+ "</span><br/><span>演示表格可以任意定制输入及其他参数";
setTimeout(function() {
tooltipCharts(params.name);
}, 10);
return res;
}
},
data: item[1].map(function(dataItem) {
return {
dataItem: dataItem,
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
complete search funciton by province name
2019-12-11 15:21:30 +08:00
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
fontSize: 14,
offset: [5, 0],
color: '#2bd291',
formatter: '{b}',
textStyle: {
color: "#2bd291"
}
},
},
symbol: 'pin',
color:'#2bd291',
symbolSize: 50,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
},
init project
2019-12-10 10:49:33 +08:00
{
type: 'map',
geoIndex: 0
}
);
});
// 关键！！！！在这里修改悬浮框,把 show:true 改为 show:false
option = {
tooltip: {
show:false,
trigger: 'item',
position: 'top',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#040616',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100'
},
backgroundColor: "#1D346F",
geo: {
show: true,
map: 'china',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
// roam: false,//地图设置不可拖拽，固定的
itemStyle: {
normal: {
areaColor: '#1D346F',
borderWidth: 0,
shadowColor: '#D79D3D',
shadowBlur: 30,
shadowOffsetX: -5,
shadowOffsetY: 10
}
}
},
series: series
};
// 中国地图上各区域随鼠标移动，亮或不亮
myChart.on('mouseover', function(params) {
var city = params.name;
if (city == '广东' || city == '广西' || city == '海南'|| city == '云南' || city == '湖南' || city == '贵州') {
myChart.dispatchAction({
type: 'highlight',
name: "广东"
});
myChart.dispatchAction({
type: 'highlight',
name: "广西"
});
myChart.dispatchAction({
type: 'highlight',
name: "海南"
});
myChart.dispatchAction({
type: 'highlight',
name: "云南"
});
myChart.dispatchAction({
type: 'highlight',
name: "湖南"
});
myChart.dispatchAction({
type: 'highlight',
name: "贵州"
});
}
if (city == '江西' || city == '江苏' || city == '浙江' || city == '安徽' || city == '福建' || city == '上海') {
myChart.dispatchAction({
type: 'highlight',
name: "江西"
});
myChart.dispatchAction({
type: 'highlight',
name: "江苏"
});
myChart.dispatchAction({
type: 'highlight',
name: "浙江"
});
myChart.dispatchAction({
type: 'highlight',
name: "安徽"
});
myChart.dispatchAction({
type: 'highlight',
name: "福建"
});
myChart.dispatchAction({
type: 'highlight',
name: "上海"
});
}
if (city == '北京' || city == '天津' || city == '河北' || city == '河南' || city == '山西' || city == '陕西' || city == '湖北') {
myChart.dispatchAction({
type: 'highlight',
name: "北京"
});
myChart.dispatchAction({
type: 'highlight',
name: "天津"
});
myChart.dispatchAction({
type: 'highlight',
name: "河北"
});
myChart.dispatchAction({
type: 'highlight',
name: "河南"
});
myChart.dispatchAction({
type: 'highlight',
name: "山西"
});
myChart.dispatchAction({
type: 'highlight',
name: "陕西"
});
myChart.dispatchAction({
type: 'highlight',
name: "湖北"
});
}
if (city == '四川' || city == '甘肃' || city == '青海' || city == '宁夏' || city == '新疆' || city == '西藏' || city == '重庆') {
myChart.dispatchAction({
type: 'highlight',
name: "四川"
});
myChart.dispatchAction({
type: 'highlight',
name: "甘肃"
});
myChart.dispatchAction({
type: 'highlight',
name: "青海"
});
myChart.dispatchAction({
type: 'highlight',
name: "宁夏"
});
myChart.dispatchAction({
type: 'highlight',
name: "新疆"
});
myChart.dispatchAction({
type: 'highlight',
name: "西藏"
});
myChart.dispatchAction({
type: 'highlight',
name: "重庆"
});
}
if (city == '辽宁' || city == '山东' || city == '吉林' || city == '黑龙江' || city == '内蒙古') {
myChart.dispatchAction({
type: 'highlight',
name: "辽宁"
});
myChart.dispatchAction({
type: 'highlight',
name: "山东"
});
myChart.dispatchAction({
type: 'highlight',
name: "吉林"
});
myChart.dispatchAction({
type: 'highlight',
name: "黑龙江"
});
myChart.dispatchAction({
type: 'highlight',
name: "内蒙古"
});
}
if (city == '台湾' || city == '香港' || city == '澳门') {
myChart.dispatchAction({
type: 'highlight',
name: "台湾"
});
myChart.dispatchAction({
type: 'highlight',
name: "香港"
});
myChart.dispatchAction({
type: 'highlight',
name: "澳门"
});
}
});
myChart.on('mouseout', function(params) {
var city = params.name;
if (city == '广东' || city == '广西' || city == '海南'|| city == '云南' || city == '湖南' || city == '贵州') {
myChart.dispatchAction({
type: 'downplay',
name: "广东"
});
myChart.dispatchAction({
type: 'downplay',
name: "广西"
});
myChart.dispatchAction({
type: 'downplay',
name: "海南"
});
myChart.dispatchAction({
type: 'downplay',
name: "云南"
});
myChart.dispatchAction({
type: 'downplay',
name: "湖南"
});
myChart.dispatchAction({
type: 'downplay',
name: "贵州"
});
}
if (city == '江西' || city == '江苏' || city == '浙江' || city == '安徽' || city == '福建' || city == '上海') {
myChart.dispatchAction({
type: 'downplay',
name: "江西"
});
myChart.dispatchAction({
type: 'downplay',
name: "江苏"
});
myChart.dispatchAction({
type: 'downplay',
name: "浙江"
});
myChart.dispatchAction({
type: 'downplay',
name: "安徽"
});
myChart.dispatchAction({
type: 'downplay',
name: "福建"
});
myChart.dispatchAction({
type: 'downplay',
name: "上海"
});
}
if (city == '北京' || city == '天津' || city == '河北' || city == '河南' || city == '山西' || city == '陕西' || city == '湖北') {
myChart.dispatchAction({
type: 'downplay',
name: "北京"
});
myChart.dispatchAction({
type: 'downplay',
name: "天津"
});
myChart.dispatchAction({
type: 'downplay',
name: "河北"
});
myChart.dispatchAction({
type: 'downplay',
name: "河南"
});
myChart.dispatchAction({
type: 'downplay',
name: "山西"
});
myChart.dispatchAction({
type: 'downplay',
name: "陕西"
});
myChart.dispatchAction({
type: 'downplay',
name: "湖北"
});
}
if (city == '四川' || city == '甘肃' || city == '青海' || city == '宁夏' || city == '新疆' || city == '西藏' || city == '重庆') {
myChart.dispatchAction({
type: 'downplay',
name: "四川"
});
myChart.dispatchAction({
type: 'downplay',
name: "甘肃"
});
myChart.dispatchAction({
type: 'downplay',
name: "青海"
});
myChart.dispatchAction({
type: 'downplay',
name: "宁夏"
});
myChart.dispatchAction({
type: 'downplay',
name: "新疆"
});
myChart.dispatchAction({
type: 'downplay',
name: "西藏"
});
myChart.dispatchAction({
type: 'downplay',
name: "重庆"
});
}
if (city == '辽宁' || city == '山东' || city == '吉林' || city == '黑龙江' || city == '内蒙古') {
myChart.dispatchAction({
type: 'downplay',
name: "辽宁"
});
myChart.dispatchAction({
type: 'downplay',
name: "山东"
});
myChart.dispatchAction({
type: 'downplay',
name: "吉林"
});
myChart.dispatchAction({
type: 'downplay',
name: "黑龙江"
});
myChart.dispatchAction({
type: 'downplay',
name: "内蒙古"
});
}
if (city == '台湾' || city == '香港' || city == '澳门') {
myChart.dispatchAction({
type: 'downplay',
name: "台湾"
});
myChart.dispatchAction({
type: 'downplay',
name: "香港"
});
myChart.dispatchAction({
type: 'downplay',
name: "澳门"
});
}
});
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
graphList = {"keyword":{
"nodes":[],
"links":[]
}}
currentGraph = {
nodes: {},
links: {},
};
nodeMap = {};
category = 1
level = "level"
symbolSize = 40
init project
2019-12-10 10:49:33 +08:00
myChart.on('click', function(params) {
var city = params.name;
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
graphList = {"keyword":{
"nodes":[],
"links":[]
}}
currentGraph = {
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
nodes: {},
links: {},
}
nodeMap = {};
category = 1
symbolSize = 40
init project
2019-12-10 10:49:33 +08:00
init(city)
comlete picture and video area
2019-12-11 12:20:20 +08:00
loadPic(city)
loadVideo(city)
init project
2019-12-10 10:49:33 +08:00
});
complete search funciton by province name
2019-12-11 15:21:30 +08:00
function refresh(option){
myChart.setOption(option);
}
refresh(option)
init project
2019-12-10 10:49:33 +08:00
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
function fillInfo(result, name) {
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
// graphList = {"keyword":{
// "nodes":[],
// "links":[]
// }}
if (graphList.keyword.nodes.length == 0) {
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
formNode = {"name":name, "category":category, "symbolSize":symbolSize}
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
graphList.keyword.nodes[0]=formNode
category += 1
symbolSize -= 5
}
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
else if (graphList.keyword.nodes[0].name == name) {
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
return 0
}
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
else {
// console.log(name)
category = nodeMap[name].category + 1
symbolSize = nodeMap[name].symbolSize - 5
}
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
nodeLen = graphList.keyword.nodes.length
linkLen = graphList.keyword.links.length
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
source = name
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
for (i = 0; i < result.data.avp.length; i++) {
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
if (source == result.data.avp[i][1]) {
nodeLen--
linkLen--
continue
}
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
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
}
}
init project
2019-12-10 10:49:33 +08:00
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
init project
2019-12-10 10:49:33 +08:00
// 页面加载时，第一次初始化图，以及点击省份后更换数据
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
function sync_request(url){
update style
2019-12-11 15:17:54 +08:00
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
//实例化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);
}
}
init project
2019-12-10 10:49:33 +08:00
function init(name) {
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
if (!result.data) {
alert("nothing")
return 0
init project
2019-12-10 10:49:33 +08:00
}
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
fillInfo(result, name)
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
nodeMap = {};
graph = graphList.keyword
init project
2019-12-10 10:49:33 +08:00
for (let i = 0; i < graph.nodes.length; i++) {
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
if (graph.nodes[i].category === 1) {
init project
2019-12-10 10:49:33 +08:00
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
}
};
}
update style
2019-12-11 15:17:54 +08:00
init project
2019-12-10 10:49:33 +08:00
redrawGraph();
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
}
function loadData(name) {
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
if (JSON.stringify(result.data) == '{}'){
alert("nothing")
return 0
}
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
fillInfo(result, name)
nodeMap = {};
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
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)
init project
2019-12-10 10:49:33 +08:00
}
// 处理点击节点展开
function append(nodeName) {
// 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
init project
2019-12-10 10:49:33 +08:00
let node = nodeMap[nodeName];
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
init project
2019-12-10 10:49:33 +08:00
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();
}
// 根据更新后的option重新画图
function redrawGraph() {
update style
2019-12-11 16:37:47 +08:00
$('.fixed-left').css({left: 0}).addClass('collpased');
upate style
2019-12-11 16:52:12 +08:00
// $('.screen-btn').css({left: '360px'});
if (!$('.fixed-left').hasClass('active')) {
$('.screen-btn').css({left: '360px'});
}
update style
2019-12-11 16:37:47 +08:00
$('.collpase-icon').addClass('icon-shouqi').removeClass('icon-zhankai');
init project
2019-12-10 10:49:33 +08:00
optionGraph.series[0].data = Object.values(currentGraph.nodes);
optionGraph.series[0].links = Object.values(currentGraph.links);
myChartGraph.setOption(optionGraph);
}
comlete picture and video area
2019-12-11 12:20:20 +08:00
init project
2019-12-10 10:49:33 +08:00
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),
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
categories: [
{
name: 1,
init project
2019-12-10 10:49:33 +08:00
itemStyle: {
color: '#c23531'
},
},
{
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
name: 2,
init project
2019-12-10 10:49:33 +08:00
itemStyle: {
color: '#2f4554'
},
},
{
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
name: 3,
init project
2019-12-10 10:49:33 +08:00
itemStyle: {
color: '#61a0a8'
},
},
{
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
name: 4,
init project
2019-12-10 10:49:33 +08:00
itemStyle: {
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
color: '#999ea4'
init project
2019-12-10 10:49:33 +08:00
},
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
},
{
name: 5,
itemStyle: {
complete knowledge graph and modify the province to place
2019-12-10 22:00:46 +08:00
color: '#555555'
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
},
init project
2019-12-10 10:49:33 +08:00
}
],
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
}
}]
};
update style
2019-12-11 15:17:54 +08:00
correct the question from merg
2019-12-11 13:40:55 +08:00
// init("西藏")
init project
2019-12-10 10:49:33 +08:00
myChartGraph.on('click', function(params) {
if (params.dataType === "node") {
const node = nodeMap[params.data.name];
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
init project
2019-12-10 10:49:33 +08:00
if (node.hasAppend === true) {
remove(node.name)
} else {
modify content of knowledge graph
2019-12-10 18:11:04 +08:00
loadData(node.name);
init project
2019-12-10 10:49:33 +08:00
}
}
});
update style
2019-12-11 15:17:54 +08:00
$('#btn').on('click', function () {
if ($('.fixed-left').hasClass('active')) {
update style
2019-12-11 16:08:04 +08:00
$('.fixed-left').removeClass('active');
$('.video_img, .search-area').show();
$('.screen_icon').removeClass('icon-suoxiao').addClass('icon-kuoda');
$('.screen-btn').css({
left: '360px'
update style
2019-12-11 15:17:54 +08:00
})
update style
2019-12-11 16:08:04 +08:00
graphContainer.style.width = 400 + 'px';
graphContainer.style.height = '60%';
update style
2019-12-11 15:17:54 +08:00
} else {
update style
2019-12-11 16:08:04 +08:00
var width = document.body.clientWidth;
update style
2019-12-11 15:17:54 +08:00
$('.fixed-left').addClass('active');
update style
2019-12-11 16:08:04 +08:00
$('.screen-btn').css({
left: width - 40 + 'px'
});
update style
2019-12-11 15:17:54 +08:00
$('.video_img, .search-area').hide();
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
update style
2019-12-11 16:08:04 +08:00
graphContainer.style.width = document.body.clientWidth + 'px';
graphContainer.style.height = document.body.clientHeight + 'px';
update style
2019-12-11 15:17:54 +08:00
}
update style
2019-12-11 16:08:04 +08:00
// redrawGraph();
myChartGraph.resize();
update style
2019-12-11 15:17:54 +08:00
});
comlete picture and video area
2019-12-11 12:20:20 +08:00
// 点击省份加载图片
function loadPic(name) {
if (name == "西藏" || name == "新疆" || name == "青海") {
temp = 1
}
else {
name = "西藏"
}
correct the question from merg
2019-12-11 13:40:55 +08:00
// alert(1)
$(".picture").each(function(index){
comlete picture and video area
2019-12-11 12:20:20 +08:00
newPath = "./image/"+name+"/"+(index+1)+".jpg"
$(this).attr("src", newPath)
// alert(index)
});
}
// 点击省份加载视频
correct the question from merg
2019-12-11 13:40:55 +08:00
function loadVideo(name) {
comlete picture and video area
2019-12-11 12:20:20 +08:00
if (name == "西藏" || name == "新疆" || name == "青海") {
temp = 1
}
else {
name = "西藏"
}
$("video").remove();
var newPath = "./image/"+name+"/1.mp4"
correct the question from merg
2019-12-11 13:40:55 +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)
comlete picture and video area
2019-12-11 12:20:20 +08:00
}
init project
2019-12-10 10:49:33 +08:00
</script>
add layout and style
2019-12-10 18:06:23 +08:00
<script type="text/javascript">
$(document).ready(function () {
$('.slider_one_big_picture').EasySlides({
'autoplay': true,
'stepbystep': false,
update style
2019-12-11 16:08:04 +08:00
'show': 0,
add layout and style
2019-12-10 18:06:23 +08:00
'loop': true
});
// 左侧全屏
$('.search-prov').on('mouseover', function () {
$('.search_input').addClass('active');
}).on('mouseout', function () {
$('.search_input').removeClass('active');
});
updagte style
2019-12-11 11:51:00 +08:00
// 搜索
add layout and style
2019-12-10 18:06:23 +08:00
$('.more_icon').on('mouseover', function () {
$('.detail_info').show();
}).on('mouseout', function () {
var timer = setTimeout(function () {
updagte style
2019-12-11 11:51:00 +08:00
$('.detail_info').hide();
}, 300);
$('.detail_info').on('mouseover', function () {
clearTimeout(timer);
$('.detail_info').show();
}).on('mouseout', function () {
$('.detail_info').hide();
});
add layout and style
2019-12-10 18:06:23 +08:00
})
// 根据省份查找
function searchProvince (value) {
console.log('查找的省份:', value);
complete search funciton by province name
2019-12-11 15:21:30 +08:00
highLight(value)
add layout and style
2019-12-10 18:06:23 +08:00
}
$('.search_icon').on('click', function () {
complete search funciton by province name
2019-12-11 15:21:30 +08:00
var $val = $(".search_input").val();
// alert($val)
add layout and style
2019-12-10 18:06:23 +08:00
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();
modify voice search style
2019-12-11 16:08:22 +08:00
}
else if (key === 'lon') {
add layout and style
2019-12-10 18:06:23 +08:00
$('.search-prov').hide();
$('.lat_lon_sec').show();
}
modify voice search style
2019-12-11 16:08:22 +08:00
else {
$('.search-prov').hide();
}
add layout and style
2019-12-10 18:06:23 +08:00
});
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();
})
updagte style
2019-12-11 11:51:00 +08:00
// 左侧滑屏结束后调用该事件，重新渲染知识图谱
update style
2019-12-11 15:17:54 +08:00
// $('.fixed-left').on('transitionend', function () {
// console.log('滑屏结束时，调用渲染知识图谱');
// // redrawGraph()
// })
add layout and style
2019-12-10 18:06:23 +08:00
});
</script>
init project
2019-12-10 10:49:33 +08:00
</body>
</html>