p78543092
/
geo_info_platform
1
0
Fork 2
Code Issues Pull Requests 1 Releases Wiki Activity

Merge branch 'master' of http://git.trustie.net/qiubing/geo_info_platform

This commit is contained in:
caicai8 2019-12-24 17:27:09 +08:00
parent 1ccc1f0717 990d7fd29d
commit b8d7a1d575
4 changed files with 338 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Index.html
View File

@ -76,11 +76,19 @@
<a class="bottomItem" href="./machine.html">
<img src="./image/2.png" />AI智能服务
</a>
<<<<<<< HEAD
<a class="bottomItem" href="javscript:void(0)">
<img src="./image/3.png" />战略目标库
</a>
<a class="bottomItem" href="./datail.html">
<img src="./image/4.png" />制式报告输出
=======
<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" />快速入门
>>>>>>> 636dc67cd946b3b122fb6d46222fed6de7a0f4bb
</a>
</div>
</div>
@ -626,6 +634,8 @@
$('.search_input_common').on('keydown', function (e) {
if (e.keyCode === 13) {
latOrLonSearch();
console.log("5655");
}
})

197
datail.html Normal file
View File

@ -0,0 +1,197 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详细信息</title>
<link rel="stylesheet" href="./detail.css"/>
<script src="./js/jQuery-1.8.3.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<div class="carouselBottom">
<a class="bottomItem" 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 active" href="./datail.html">
<img src="./image/4.png">制式报告输出
</a>
</div>
<div class="box-con">
<div class="opration">
<!-- <span>2s 后可再次导出</span> -->
<button id = "png">导出png</button>
<button id = "pdf">导出pdf</button>
<a href="" download="下载图.png" id="download"></a>
</div>
<div class="h1-con"><h1>班公湖</h1></div>
<div class="para">
<b>班公错</b>（<a href="#">拉达克语</a>：Pangong Tso），
<a href="#">藏语</a>名<b>哥木克哥那喇令错</b>，或<b>错木昂拉仁波</b>（<a href="#">藏文</a>：མཚོ་མོ་ངང་ལྷ་རིང་པོ།；
<a href="#">威利</a>：
mtsho mo ngang lha ring po；<a href="#">THL</a>：Tsomo Nganglha Ringpo），
是<a href="#">青藏高原</a>西部的一座<a href="#">湖泊</a>，位于<a href="#">西藏</a>
和<a href="#">克什米尔</a>边境，<a href="#">中国</a>和<a href="#">印度</a>对该湖归属有争议，
现中国控制该湖东部约三分之二，印度控制西部约三分之一。藏语意为“长脖子天鹅”，有世界上海拔最高的鸟岛，
位于<a href="#" data-lemmaid="1705115">阿里地区</a>日土县城西<a href="#" data-lemmaid="278754">北约</a>12公里处，
阿里地区和克什米尔交界处。湖的东段和西段一部分在中国境内，西端伸入克什米尔。湖面海拔4241米，面积413平方公里。
</div>
<div class="para">
整个班公湖面积604平方公里。目前中国实控413平方公里，约占68.5%。
印控中国<a href="#">拉达克</a>
地区为191平方公里，约占31.5%。湖长约155公里，南北宽约15公里，最窄处仅50米，
平均水深5米，东部最大水深41.3米。湖水清澈，透明度3—4米。
</div>
<div class="level-2">
<h2>基本介绍</h2>
</div>
<div class="para">
班公错属构造性湖泊，东西狭长，约延伸143公里，南北最宽处约5公里，总面积604平方公里。
该湖湖面平均海拔4241米，属<a href="#">内流湖</a>，流域面积28714平方公里。
由三个狭长形小湖组成，其间有沟通水道。湖最深处约57米。
</div>
<div class="level-2">
<h2>基本信息</h2>
</div>
<h3>名称</h3>
<div class="para">
班公湖：<a href="#">藏语</a>称错木昂拉仁波，意思是"明媚"
</div>
<div class="para">
该湖在目前我国实控400多平方公里，长度约110公里，
印控中国拉达克地区的湖长度约40公里，面积约200多平方公里；
整个湖的面积约有600多平方公里，呈东西走向，东西长约150多公里，
南北宽约2至5公里，属内陆湖泊。
</div>
<h3>水深</h3>
<div class="para">
最大水深为41.3米，平均水深5米。
</div>
<h3>水质</h3>
<div class="para">
该湖的最奇特之处在于它是一个由东向西水中含盐量不同的湖泊，
即，东部为<a href="#">淡水湖</a>，中部为<a href="#">半咸水湖</a>，西部为<a href="#">咸水湖</a>。
</div>
<h3>地质</h3>
<div class="para">班公湖地区位于青藏高原西部，南北跨越多个经历不同演化历
西藏班公湖地区地质
西藏班公湖地区地质
史的大地构造单元，分别为南羌塘地块、班公湖蛇绿混杂岩带、北冈底斯地块，
中特提斯洋盆扩张阶段沉积的地层主要是晚三叠纪世日干配错群，
岩性组合以碎屑岩和碳酸盐岩为主，夹少量火山岩；在洋盆萎缩阶段沉积的地层以侏罗纪－
早白垩世的碎屑岩为主，代表性地层有木嘎岗日群、多仁组、日松组、沙木罗组、
多尼组和郎山组等；与此同时，蛇绿混杂岩带北侧发育晚侏罗－早白垩世的岛弧型
钙碱性花岗岩类岩浆岩体，岩体大多呈岩基、岩株产出，为班怒带北向俯冲的产物，
而蛇绿混杂岩带南侧北冈底斯地块大规模的中酸性岩浆侵位活动主要发生在晚白垩世，
岩石组合为花岗斑岩、花岗闪长岩、闪长玢岩、石英闪长岩、英云闪长岩、二长花岗岩等
</div>
<h3>冰川分布</h3>
<div class="para">
班公湖为藏北高原西缘东西长约125公里的狭长构造湖，按照国际冰川编目原则，
班公湖流域区是以该湖为主要流域， 并包括泽普错 、斯潘古尔湖、沙尔达湖和热帮错等若干
山间小湖群的一个三级流域区整个流域区地理位置介于32°40′～34°30′N和 78°38′～81°15′E之间，
中国班公湖流域区总共有冰川959条，冰川总面积665.35 平方公里，冰储量为39.2316立方千米，
昌隆河流域、由昂则、展穷和展金等支流形成的多玛河流域、以及山间湖盆泽普错流域是班公湖
北岸的冰川主要分布区，南岸流域区冰川则主要分布在由巴扎雄、藏藏布河和曲垄藏布形成的玛
卡藏布河 、山间小湖盆斯潘古尔湖和沙尔达湖等流域。班公湖流域冰川分别占流域区总数的72.9%、67%
和64%，流域内冰川平均面积为0.64平方公里，最大的冰川面积23.68平方公里，长度10.5公里，泽普错是
本流域区中冰川分布最为集中、冰川数量仅次于班公湖的小流域，其冰川数量分别占流域区总数的14.8%、
28.3%和33.3%，泽普错流域冰川平均面积达1.33平方公里，最大冰川面积16.60平方公里。 [4]
</div>
<div class="level-2">
<h2>军事价值</h2>
</div>
<div class="para">
班公湖，一半在西藏阿里境内，另一半则在印控中国拉达克地区，湖形状狭长。
</div>
<div class="para">
有趣的是，虽然同属一湖，东部的是淡水，西部的是咸水，苦涩不能饮用，也没有鱼类生长。
<div class="img-con"><img src="./image/班公湖/5.dib" /></div>
</div>
<div class="para">藏语称此湖为“错木昂拉仁波湖”，意为“长脖子天鹅”。</div>
<div class="para">
面积604平方公里，长150公里，平均宽度只有2～5公里，最窄处只有2公里。
</div>
<div class="para">
湖中生长着大量的鱼类和水鸟，每当夏季就有数以万计的地中海中头鸥来此繁殖。
</div>
<div class="level-2">
<h2>相关信息</h2>
</div>
<div class="para">
据《印度时报》2008年10月5日的报道，印度将在一个月内重新启用富克彻空军基地。
富克彻基地位于拉达克东部，距中印边境实际控制线只有2．5公里。报道说，
印度军队已在此执行战机维修任务。印度军方一位不愿透露姓名的官员说，
该基地靠近阿克赛钦地区附近的中印实际控制线，可保证对该地印度驻军的后勤供应。
这是2008年以来印度空军连续启用的第二个重要空军基地，
也是印度军方全面启动中印边境军事基地系列举措之一
</div>
<div class="header">
<span class="title">词条图册</span>
</div>
<div class="img-list">
<div>
<img src="./image/班公湖/1.jpg"/>
</div>
<div>
<img src="./image/班公湖/2.jpg"/>
</div>
<div>
<img src="./image/班公湖/1.jpg"/>
</div>
<div>
<img src="./image/班公湖/4.jpg"/>
</div>
</div>
</div>
<script>
// 导出pdf
$("#pdf").on("click",() => {
$("#pdf,#png").hide();
makeMpdf();
setTimeout(()=>{
$("#pdf,#png").show();
},2000)
})
// 导出png
$("#png").on("click",() => {
$("#pdf,#png").hide();
saveCanvas();
setTimeout(()=>{
$("#pdf,#png").show();
},2000)
})
function makeMpdf () {
if(confirm("您确认下载该PDF文件吗?")){
var pdf = new jsPDF('p','pt','a4');
// 打印比例
pdf.internal.scaleFactor = 2;
var options = {
pagesplit: true,
"background": '#FFFFFF' // 背景色
};
var printHtml = $('.box-con').get(0);
pdf.addHTML(printHtml,15, 15, options,function() {
pdf.save('详细信息.pdf');
});
}
}
function saveCanvas() {
html2canvas($(".box-con")).then(function(canvas) {
var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
$("#download").attr("href",imgUri);
// console.log(imgUri);
document.getElementById("download").click();
});
}
</script>
</body>
</html>

131
detail.css Normal file
View File

@ -0,0 +1,131 @@
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background: #e5e5e5;
}
.box-con{
width: 1000px;
height: auto;
margin: 0 auto;
padding: 20px;
margin-top: 20px;
background: #ffffff;
}
h1{
margin: 0 10px 10px 0;
display: inline;
font-size: 34px;
line-height: 1.15;
font-weight: 400;
vertical-align: sub;
}
.h1-con{
margin-bottom: 10px;
}
.para{
font-size: 14px;
word-wrap: break-word;
color: #333;
margin-bottom: 15px;
text-indent: 2em;
line-height: 24px;
zoom: 1;
}
.level-2{
display: block;
clear: both;
zoom: 1;
overflow: hidden;
font-size: 20px;
border-left: 12px solid #4F9CEE;
line-height: 40px;
padding-left: 15px;
height: 40px;
font-size: 14px;
font-weight: 400;
font-family: Microsoft YaHei,SimHei,Verdana;
position: relative;
}
h3{
font-size: 18px;
font-weight: 400;
margin-left: 25px;
}
.img-con{
float: right;
}
.header{
clear: both;
height: 40px;
border-bottom: 1px solid #e0e0e0;
background: #f5f5f5;
}
.header > .title{
font-size: 19px;
font-family: Microsoft YaHei,sans-serif;
line-height: 40px;
padding-left: 10px;
}
.img-list{
display: flex;
height: 120px;
padding-top: 15px;
text-align: left;
}
.img-list > div{
margin: auto;
}
.img-list > div>img{
width: 80%;
}
.carouselBottom{
width: 100%;
height: 76px;
background: #459df5;
display: flex;
justify-content: center;
}
.carouselBottom .bottomItem{
display: flex;
align-items: center;
padding:0px 40px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.carouselBottom .bottomItem img{
margin:0px 20px 0px 10px;
width: 38px;
}
.carouselBottom .bottomItem:hover,.carouselBottom .bottomItem.active {
background: rgba(255,255,255,0.2);
}
.opration{
width: 240px;
height: 40px;
float: right;
text-align: right;
}
.opration > button{
width: 60px;
height: 30px;
margin-right: 10px;
cursor: pointer;
transition: all 0.3s;
}
.opration > button:hover{
background: #459df5;
color: white;
border: none;
}
/* .opration > span{
color: #999999;
font-size: 14px;
transition: all 0.3s;
display: none;
} */

BIN
image/班公湖/5.dib Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB