383 lines
20 KiB
HTML
383 lines
20 KiB
HTML
<%- include('comm/header.html') %>
|
||
<!--<div class="container">
|
||
<div class="news-heading green-line">
|
||
<h4 class="coffer"> </h4>
|
||
</div>
|
||
<div class="row" style="margin-bottom: 20px;">
|
||
<div class="news-box col-md-3">
|
||
|
||
<div class="news-ul list-group">
|
||
|
||
<a href="/portal/metadata?bf=%E5%A4%A7%E6%B0%94%E6%9C%AC%E5%BA%95&current_page=1" class="list-group-item">气象监测</a>
|
||
|
||
<a href="#" class="list-group-item">水文水资源监测</a>
|
||
|
||
<a href="#" class="list-group-item">草地监测</a>
|
||
|
||
<a href="#" class="list-group-item">森林监测</a>
|
||
|
||
<a href="#" class="list-group-item">沙化土地监测</a>
|
||
|
||
<a href="#" class="list-group-item">湿地监测</a>
|
||
|
||
<a href="#" class="list-group-item">水土保持监测</a>
|
||
|
||
<a href="#" class="list-group-item">水土保持监测</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-box col-md-9">
|
||
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
|
||
<!– Indicators –>
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
|
||
<li data-target="#carousel-example-generic1" data-slide-to="1" class=""></li>
|
||
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
|
||
</ol>
|
||
|
||
<!– Wrapper for slides –>
|
||
<div class="banner-inner carousel-inner" role="listbox">
|
||
<div class="banner-item item next left">
|
||
<div id="map"></div>
|
||
|
||
</div>
|
||
<div class="banner-item item active left">
|
||
<img src="/images/banner1.png" alt="1">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!– Controls –>
|
||
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
|
||
<i class="iconfont jiantou-left icon-jiantou-left-copy" aria-hidden="true"></i>
|
||
<span class="sr-only">Previous</span>
|
||
</a>
|
||
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
|
||
<i class="iconfont jiantou-right icon-jiantou-right" aria-hidden="true"></i>
|
||
<span class="sr-only">Next</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>-->
|
||
|
||
|
||
<div>
|
||
<div class="ant-carousel">
|
||
<div class="slick-initialized slick-slider">
|
||
<div class="slick-list">
|
||
<div class="slick-track" style="opacity: 1; transform: translate3d(-4329px, 0px, 0px); width: 8658px;">
|
||
<div data-index="-1" class="slick-slide slick-cloned" style="width: 1443px;"></div>
|
||
<div data-index="0" class="slick-slide" tabindex="-1"
|
||
style="outline: medium none; width: 1443px;"></div>
|
||
<div data-index="1" class="slick-slide" tabindex="-1"
|
||
style="outline: medium none; width: 1443px;"></div>
|
||
<div data-index="2" class="slick-slide slick-active" tabindex="-1"
|
||
style="outline: medium none; width: 1443px;"></div>
|
||
<div data-index="3" class="slick-slide" tabindex="-1"
|
||
style="outline: medium none; width: 1443px;"></div>
|
||
<div data-index="4" class="slick-slide slick-cloned" style="width: 1443px;"></div>
|
||
</div>
|
||
</div>
|
||
<ul class="slick-dots" style="display: block;">
|
||
<li class="">
|
||
<button>1</button>
|
||
</li>
|
||
<li class="">
|
||
<button>2</button>
|
||
</li>
|
||
<li class="slick-active">
|
||
<button>3</button>
|
||
</li>
|
||
<li class="">
|
||
<button>4</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
|
||
<div class="ant-col-24" style="padding-left: 4px; padding-right: 4px;">
|
||
<div class="top-database-wrapper">
|
||
<div class="database-title-wrapper">
|
||
<div class="database-title"><i class="anticon anticon-link"></i> 本底数据库</div>
|
||
<span class="database-title-more"><a href="#">更多>></a></span>
|
||
<div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
|
||
<div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
|
||
<ul class="database-content">
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/ec61b4b0-2317-49dc-b8bb-cb5367d51c5f">青海三江源区2013年班玛县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/52974e6e-1725-446b-bb0f-139e25ed5357">青海三江源区共和县2016年度草地监测表</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/255b5aee-8510-400c-9b00-696ee067ab64">青海三江源区2005-2011年玛沁县社会经济补充...</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/066f5008-5190-487c-851b-174ddfc4ccc3">青海三江源区2012年达日县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/29f47ee8-ff3f-4114-adcc-6e4f840f8033">青海三江源区2009年杂多县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/29f47ee8-ff3f-4114-adcc-6e4f840f8033">青海三江源区2009年杂多县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/104273e8-233a-4c9b-ae2d-43966798758f">青海三江源区2011年治多县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/1bea573c-e7fe-4f33-bb94-5ec7f201c219">青海三江源区2009年河南县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/4d017f96-2d44-41bb-94c2-705a35d1088d">青海三江源区2005-2012年草地监测工作照片数...</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/6c2cb9d7-0864-4ad8-a9bb-ea9ddb3a0bb5">青海三江源区2005-2011年班玛县社会经济补充...</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
|
||
<ul class="database-content">
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/c9071372-28fb-4a38-8f7e-7ae5d590e5b1">青海三江源区2016年度草地监测统计册</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/a6131b8b-9b00-4058-9513-1b8bd4d4dbfd">青海三江源区2010年达日县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/0d4c1171-3c05-4eaf-ae49-63001675efcc">青海三江源区2011年草地监测站点信息表</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/dad6eba3-f857-484d-b80a-6991ea7291b6">青海三江源区2005年度草地专项分析报告</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/476662b8-abd2-4a5f-bb91-8b3a19a5be40">青海三江源区2011年甘德县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/31e2591f-4aa8-4128-80df-c1d6d4fcb605">青海三江源区2005-2011年称多县社会经济补充...</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/94d0079e-3a20-489b-aba5-779dfc0cc165">青海三江源区2006年治多县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/2f15e10b-35f4-4a9d-8e52-113eb6ae4afd">青海三江源区2008年囊谦县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/38ff7e23-c1e7-41f1-96a9-b32fea0fd71f">青海三江源区贵德县2015年度草地监测表</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/7f3c3ce9-2c84-4c6b-b6e6-8a20d9a75f11">青海三江源区唐古拉山镇2016年度草地监测表</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;">
|
||
<ul class="database-content">
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/7c54c833-fd67-4a3e-b9bc-f393add1fa01">青海三江源区2012年兴海县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/626e2a8d-36e6-4c18-9d13-38ba127b910d">青海三江源区2006年称多县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/9f250a7a-7e7f-4c08-8eca-bf3432e3fd84">青海三江源区2008年班玛县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/e2c4ad06-bffa-4038-9d80-682606390f36">青海三江源区2011年草地生态监测统计册</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/dd997985-69db-4abf-80e3-2a4179eccfb3">青海三江源区2014年度草地监测统计册</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/582e5f3a-d6dd-4e04-8c5b-207a19c0fa7b">青海三江源区2008年治多县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/dcd92f92-bb30-46b7-bcf6-44cf38983292">青海三江源区2008年河南县草地样方监测数据集</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/e113dd38-a6fc-4f83-aca8-26ce3da2e07c">青海三江源区囊谦县2016年度草地监测表</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/b1414b60-1051-46b2-9241-24879c095997">青海三江源区2009年草地监测站点信息表</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://www.sanjiangyuan.org.cn:4567/data/4f8d8edb-d986-4412-9b80-066ff7a1fafb">青海三江源区贵德县2016年度草地监测表</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ant-col-24" style="padding-left: 4px; padding-right: 4px;">
|
||
<div class="introduction-wrapper">
|
||
<div class="introduction-title"><i class="anticon anticon-link"></i> 基本概况</div>
|
||
<div class="introduction-content">
|
||
青海三江源自然保护区区位于我国的西部、青藏高原的腹地、青海省南部，为长江、黄河和澜沧江的源头汇水区。其东、东南部与甘肃省、四川省相邻，南部、西部与西藏自治区相接，北部分别与治多县的可可西里国家级自然保护区、海西藏族蒙古族自治州的格尔木市和都兰县交界，东北部与海南藏族自治州的共和县、贵南县、贵德县和黄南藏族自治州的同仁县接壤。地理位置为北纬31。39’-36。12’，东经89。45’-102。23’，行政区域涉及包括玉树、果洛、海南、黄南四个藏族自治州的16个县和格尔木市的唐古拉乡，总面积为36.3万km2，约占青海省总面积的50.4%，其中三江源自然保护区面积15.23万km2。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dataobserve-wrapper">
|
||
<div class="dataobserve-title"><i class="anticon anticon-line-chart"></i> 数据监测</div>
|
||
<div class="dataobserve-content">
|
||
<div style="width: 935px; margin: 0px auto;">
|
||
<div class="ant-row" style="margin-left: -16px; margin-right: -16px;">
|
||
<div class="ant-col-6" style="padding-left: 16px; padding-right: 16px;">
|
||
<div class="ant-card">
|
||
<div class="ant-card-body">
|
||
<div class="dataobserve-content-icon-wrapper"
|
||
style="background-color: rgb(208, 199, 146);"><i
|
||
class="anticon anticon-share-alt"></i></div>
|
||
<div class="custom-card"><h3>土地利用</h3></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ant-col-6" style="padding-left: 16px; padding-right: 16px;">
|
||
<div class="ant-card">
|
||
<div class="ant-card-body">
|
||
<div class="dataobserve-content-icon-wrapper"
|
||
style="background-color: rgb(151, 139, 71);"><i
|
||
class="anticon anticon-close-circle"></i></div>
|
||
<div class="custom-card"><h3>土壤侵蚀</h3></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ant-col-6" style="padding-left: 16px; padding-right: 16px;">
|
||
<div class="ant-card">
|
||
<div class="ant-card-body">
|
||
<div class="dataobserve-content-icon-wrapper"
|
||
style="background-color: rgb(145, 176, 118);"><i
|
||
class="anticon anticon-line-chart"></i></div>
|
||
<div class="custom-card"><h3>森林监测</h3></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ant-col-6" style="padding-left: 16px; padding-right: 16px;">
|
||
<div class="ant-card">
|
||
<div class="ant-card-body">
|
||
<div class="dataobserve-content-icon-wrapper"
|
||
style="background-color: rgb(94, 154, 139);"><i class="anticon anticon-cloud"></i>
|
||
</div>
|
||
<div class="custom-card"><h3>气象观测</h3></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script type="text/javascript">
|
||
|
||
var base_OSM_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
maxZoom: 19,
|
||
attribution: ''
|
||
});
|
||
|
||
var base_map = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||
maxZoom: 18
|
||
});
|
||
|
||
var base_TDT_map_Annotion = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
|
||
errorTileUrl: '/lib/leaflet/images/none.png',
|
||
attribution: 'tile © <a href="http://www.tianditu.com">tianditu</a> '
|
||
});
|
||
|
||
var over_TDT_map_Annotion = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
|
||
errorTileUrl: '/lib/leaflet/images/none.png',
|
||
attribution: ''
|
||
});
|
||
|
||
var over_geojson_sjy_bound_2nd = new L.GeoJSON.AJAX("/json/sjy_bound_2nd.geojson", {
|
||
style: {
|
||
"color": "#de950d",
|
||
"weight": 2,
|
||
"opacity": 1,
|
||
"fillOpacity": 0
|
||
}
|
||
});
|
||
|
||
var over_geojson_a = new L.GeoJSON.AJAX("/json/grass.geojson", {
|
||
pointToLayer: function (feature, latlng) {
|
||
return L.circleMarker(latlng, {
|
||
radius: 4,
|
||
fillColor: "#0aff3c",
|
||
color: "#000",
|
||
weight: 1,
|
||
opacity: 1,
|
||
fillOpacity: 0.8
|
||
})
|
||
},
|
||
onEachFeature: onEachFeature
|
||
});
|
||
var over_geojson_b = new L.GeoJSON.AJAX("/json/soil.geojson", {
|
||
pointToLayer: function (feature, latlng) {
|
||
return L.circleMarker(latlng, {
|
||
radius: 4,
|
||
fillColor: "#ffef3a",
|
||
color: "#000",
|
||
weight: 1,
|
||
opacity: 1,
|
||
fillOpacity: 0.8
|
||
})
|
||
},
|
||
onEachFeature: onEachFeature
|
||
});
|
||
var over_geojson_c = new L.GeoJSON.AJAX("/json/comp.geojson", {
|
||
pointToLayer: function (feature, latlng) {
|
||
return L.circleMarker(latlng, {
|
||
radius: 4,
|
||
fillColor: "#FFC124",
|
||
color: "#000",
|
||
weight: 1,
|
||
opacity: 1,
|
||
fillOpacity: 0.8
|
||
})
|
||
},
|
||
onEachFeature: onEachFeature
|
||
});
|
||
|
||
var baseLayers = {
|
||
"base_map": base_map,
|
||
"base_OSM_Mapnik": base_OSM_Mapnik
|
||
};
|
||
|
||
var overLayers = {
|
||
"地名": over_TDT_map_Annotion,
|
||
"sjy_bound_2nd": over_geojson_sjy_bound_2nd
|
||
};
|
||
|
||
/*var map = L.map('map', {
|
||
layers: [
|
||
base_map,
|
||
over_geojson_a,
|
||
over_geojson_b,
|
||
over_geojson_c,
|
||
over_geojson_sjy_bound_2nd
|
||
],
|
||
minZoom: 6,
|
||
maxZoom: 17,
|
||
zoomIn: 1,
|
||
zoomOut: 1,
|
||
zoomControl: false
|
||
}).setView([34, 96], 6);
|
||
|
||
// L.control.layers(baseLayers, overLayers).addTo(map);
|
||
|
||
var bounds = new L.LatLngBounds(new L.LatLng(31, 103), new L.LatLng(38, 89));
|
||
map.fitBounds(bounds);
|
||
console.log(map.getBounds());*/
|
||
|
||
$(function () {
|
||
$('.navbar-nav li').first().addClass('active');
|
||
});
|
||
</script>
|
||
<%- include('comm/footer.html') %> |