山东大学项目实训-地图圈系统-web开发（10）
一、项目介绍网站——主页
本实验的项目介绍网站，我打算从两个部分来写，分别是主页和关于我们两个部分。主页部分我打算用echarts以及echarts-gl做一个3D地球，并将其作为主页的主体部分，再配上简约的文字，使整个页面看起来比较立体。关于我们这一个部分，我就会把地图圈APP、地图圈微信小程序、地图圈后台管理系统这三部分做一个简单的功能介绍。
首先我先介绍一下主页部分。
本项目介绍网站未引用vue插件，使用的是原生的html代码。
关于3D地球，需要使用echarts依赖。在项目跟目录下使用cmd命令：cnpm install echarts以及cnpm install echarts-gl来安装所需的这两个依赖。在html页面中，使用如下代码段引入：
<script src="node_modules/echarts/dist/echarts.min.js"></script>
<script src="node_modules/echarts-gl/dist/echarts-gl.min.js"></script>
必须引入dist文件夹下的js文件，echarts主文件夹下的不行，大坑。
效果展示：
地球可以拖动旋转、放大缩小。
记录一下美丽的大山东：
地图圈系统主页，配以3D地球作为主体，实为点睛之笔，美哉。
二、项目介绍网站——关于我们
这个页面我就简单的介绍了一下APP、微信小程序和后台管理网站三者的功能。
整体布局如下：
三种项目介绍：
点击按钮就可以查看对应的程序和功能了。
三、项目介绍网站——滑动效果展示
这一部分很简单，就是查看一下切换效果的动画展示：
可以看到点击后有一个滑动的动画效果。
四、项目介绍网站——代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Tooplate">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<title>Earth - Free HTML5 Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Additional CSS Files -->
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/tooplate-main.css">
<link rel="stylesheet" href="assets/css/owl.css">
</head>
<!--
Tooplate 2113 Earth
https://www.tooplate.com/view/2113-earth
-->
<body>
<div class="sequence">
<div class="seq-preloader">
<svg width="39" height="16" viewBox="0 0 39 16" xmlns="http://www.w3.org/2000/svg" class="seq-preload-indicator"><g fill="#F96D38"><path class="seq-preload-circle seq-preload-circle-1" d="M3.999 12.012c2.209 0 3.999-1.791 3.999-3.999s-1.79-3.999-3.999-3.999-3.999 1.791-3.999 3.999 1.79 3.999 3.999 3.999z"/><path class="seq-preload-circle seq-preload-circle-2" d="M15.996 13.468c3.018 0 5.465-2.447 5.465-5.466 0-3.018-2.447-5.465-5.465-5.465-3.019 0-5.466 2.447-5.466 5.465 0 3.019 2.447 5.466 5.466 5.466z"/><path class="seq-preload-circle seq-preload-circle-3" d="M31.322 15.334c4.049 0 7.332-3.282 7.332-7.332 0-4.049-3.282-7.332-7.332-7.332s-7.332 3.283-7.332 7.332c0 4.05 3.283 7.332 7.332 7.332z"/></g></svg>
</div>
</div>
<div class="logo">
<h1>地图圈</h1>
<h2>E</h2>
</div>
<nav>
<ul>
<li><a href="#1"><img src="assets/images/icon-1.png" alt=""> <em>主页</em></a></li>
<li><a href="#2"><img src="assets/images/icon-2.png" alt=""> <em>关于我们</em></a></li>
</ul>
</nav>
<div class="slides">
<div class="slide" id="1">
<div id="slider-wrapper">
<div id="image-slider"></div>
</div>
<ul>
<li class="active-img">
<div class="slide-caption">
<h2>地图圈<br>让世界<br>连接起来</h2>
<h6>Connecting<br>the world</h6>
</div>
</li>
</ul>
</div>
<div class="slide" id="2">
<div class="content second-content">
<div id='tabs'>
<ul>
<li><a href='#tabs-1'><span class='fa fa-mobile'></span></a></li>
<li><a href='#tabs-2'><span class='fa fa-wechat'></span></a></li>
<li><a href='#tabs-3'><span class='fa fa-desktop'></span></a></li>
</ul>
<section class='tabs-content'>
<article id='tabs-1'>
<h2>地图圈APP</h2>
<span>适配安卓系统9.0及以上版本</span>
<p>具有地图定位功能、导航及路径规划功能</p>
<p>具有地点分享及收藏功能、轨迹圈发布、点赞、评论功能</p>
<p>具有查看实时天气功能</p>
</article>
<article id='tabs-2'>
<h2>地图圈微信小程序</h2>
<span>适配微信5.3及以上支持小程序版本</span>
<p>具有地图定位功能、导航及路径规划功能</p>
<p>具有轨迹保存及回放功能、地点分享及收藏功能</p>
<p>具有轨迹圈发布、点赞、评论功能、查看实时天气功能</p>
</article>
<article id='tabs-3'>
<h2>地图圈后台管理系统</h2>
<span>具有管理员和用户两种身份，对应不同的管理系统</span>
<p>拥有管理员和用户权限</p>
<p>用户可对地点、轨迹圈进行查看和操作</p>
<p>管理员可对用户及信息进行管理</p>
</article>
</section>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Additional Scripts -->
<script src="assets/js/owl.js"></script>
<script src="assets/js/accordations.js"></script>
<script src="assets/js/main.js"></script>
<script src="node_modules/echarts/dist/echarts.min.js"></script>
<script src="node_modules/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript">
var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom = document.getElementById('slider-wrapper');
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: '#000',
globe: {
baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
heightTexture: ROOT_PATH + "/data-gl/asset/bathymetry_bw_composite_4k.jpg",
displacementScale: 0.1,
shading: 'realistic',
environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
realisticMaterial: {
roughness: ROOT_PATH + '/asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
metalness: ROOT_PATH + '/asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
textureTiling: [8, 4]
},
postEffect: {
enable: true
},
viewControl: {
autoRotate: false
},
light: {
main: {
intensity: 2,
shadow: true
},
ambientCubemap: {
texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
exposure: 2,
diffuseIntensity: 2,
specularIntensity: 2
}
}
}
};
myChart.setOption(option);
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 0;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
</body>
</html>
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
