sjy-ecos/views/index.html

316 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%- include('comm/header.html') %>
<div>
<div class="ant-carousel" style="margin-top:-22px;">
<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="#">更多&gt;&gt;</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-compass"></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-cloud"></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-pie-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-flag"></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 &copy <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') %>