fengjun/ag-index
1
0
Fork 0
Code Activity
Files
33d690274c0836556383fb419a55803126d5ffd2
ag-index/index.html

1429 lines
73 KiB
HTML
Raw Normal View History

init:origin
2025-12-11 10:06:21 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="irstheme">
<title>岸基网络科技有限公司 </title>
<meta name="title" content="烟台岸基网络科技有限公司">
<meta name="Description" content="烟台岸基网络科技有限公司是从事于全程物流链科技服务的互联网软件公司，致力于打造港航企业的互联网生态圈，研发出了航运电子商务平台系统、多码头智能操作系统、全程物流链管理系统等软件产品。">
<meta name="Keywords" content="岸基网络,烟台岸基科技,岸基网络科技,智慧物流,协同运输,物流平台开发,O2O物流平台,航运,航运大数据,航运电商,互联网+航运,云码头，智慧码头，船代软件，数字化航运,码头管理系统,航运电子商务平台系统">
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap-3.3.4.css">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/fonts/Flaticon.woff2">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
<link href="assets/css/owl.theme.css" rel="stylesheet">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/slick-theme.css" rel="stylesheet">
<link href="assets/css/swiper.min.css" rel="stylesheet">
<link href="assets/css/owl.transitions.css" rel="stylesheet">
<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
<link href="assets/css/jquery.fancybox.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style2.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
首页
2025-12-12 11:21:33 +08:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js"></script>
init:origin
2025-12-11 10:06:21 +08:00
</head>
<body>
首页
2025-12-12 11:21:33 +08:00
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@latest/build/three.module.js",
"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
}
}
</script>
init:origin
2025-12-11 10:06:21 +08:00
<!-- start page-wrapper -->
<div class="page-wrapper">
<div class="preloader">
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</div>
<!---->
<!-- Start header -->
<div id="header"></div>
<!-- end of header -->
<!-- start of hero -->
<section class="hero-slider hero-style-1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-2.jpg">
<div class="container">
<div data-swiper-parallax="300" class="slide-title">
<h2>携手打造数字化智能航运物流</h2>
</div>
<div data-swiper-parallax="400" class="slide-text">
<p>岸基科技为航运物流供应链领域企事业单位，提供卓越的软件产品和技术服务。 </p>
</div>
<div class="clearfix"></div>
首页
2025-12-12 11:21:33 +08:00
<div data-swiper-parallax="500" class="slide-btns">
<a href="product_port.html" class="theme-btn-s2">了解更多</a>
</div>
init:origin
2025-12-11 10:06:21 +08:00
</div>
</div> <!-- end slide-inner -->
</div> <!-- end swiper-slide -->
<div class="swiper-slide">
<div class="slide-inner slide-bg-image" data-background="assets/images/slider/slide-1.png" style="max-width: none;">
<div class="container">
<div data-swiper-parallax="300" class="slide-title">
<h2>服务持续升级 云端高效互通</h2>
</div>
<div data-swiper-parallax="400" class="slide-text">
<p>为中小码头提供一体化服务的智能管理平台，租赁购买模式降低企业成本，助力企业数字化转型。</p>
</div>
<div class="clearfix"></div>
首页
2025-12-12 11:21:33 +08:00
<div data-swiper-parallax="500" class="slide-btns">
<a href="http://imatou.com" target="view_window" class="theme-btn-s2">了解更多</a>
init:origin
2025-12-11 10:06:21 +08:00
<!--&lt;!&ndash;<a href="https://www.youtube.com/embed/7e90gBu4pas?autoplay=1" class="hero-video-btn video-btn" data-type="iframe" tabindex="0"><i class="fi flaticon-play-button"></i>Watch About</a> &ndash;&gt;-->
首页
2025-12-12 11:21:33 +08:00
</div>
init:origin
2025-12-11 10:06:21 +08:00
</div>
</div> <!-- end slide-inner -->
</div> <!-- end swiper-slide -->
</div>
<!-- end swiper-wrapper -->
<!-- swipper controls -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<!-- end of hero slider -->
<!-- start features-section -->
<section class="features-section">
<div class="container">
<div class="row">
<div class="col col-xs-12">
<div class="feature-grids clearfix">
<div class="grid">
<div class="header">
<i class="fi flaticon-truck"></i>
</div>
<div class="details">
<h3>物流供应链系列产品</h3>
<p>面向船公司、船代、货代、报关、车队、场站和仓储等多种物流业务的完整解决方案。 </p>
<a href="product_Logistics.html" class="read-more" target="_parent">了解更多</a>
</div>
</div>
<div class="grid">
<div class="header">
<i class="fi flaticon-box"></i>
</div>
<div class="details">
<h3>港航电商平台系列产品</h3>
<p>集销售、操作、商务和客服于一体的综合服务系统，帮助港航企业建立线上线下一体化的物流发展模式。 </p>
<a href="product_eCommerce.html" class="read-more" target="_parent">了解更多</a>
</div>
</div>
<div class="grid">
<div class="header">
<i class="fi flaticon-cruise"></i>
</div>
<div class="details">
<h3>云码头系列产品</h3>
<p> 目前业内技术成熟、业务架构领先、面向集装箱、散货、件杂货、液化码头的业务完整解决方案的产品套件。 </p>
<a href="product_port.html" class="read-more" target="_parent">了解更多</a>
</div>
</div>
首页
2025-12-12 11:21:33 +08:00
<div class="grid">
<div class="header">
<i class="fi flaticon-matou"></i>
</div>
<div class="details">
<h3>云码头系列产品</h3>
<p> 目前业内技术成熟、业务架构领先、面向集装箱、散货、件杂货、液化码头的业务完整解决方案的产品套件。 </p>
<a href="product_port.html" class="read-more" target="_parent">了解更多</a>
</div>
</div>
init:origin
2025-12-11 10:06:21 +08:00
</div>
</div>
</div>
</div> <!-- end container -->
</section>
<!-- end features-section -->
首页
2025-12-12 11:21:33 +08:00
<!-- start portfolio-section -->
<section class="section-padding">
<div class="portfolio-container" style="display: flex; align-items: center; justify-content: center; min-height: 400px; position: relative;">
<img src="assets/images/index/bk.jpg" alt="" style="width: 100%; max-width: none;">
<div style="position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;">
<div class="container">
<div class="row">
<div class="col col-lg-6 col-lg-offset-3">
<div class="section-title-s4">
<h2>岸基物流供应链核心能力全景</h2>
<span>基于"船、港、仓、运"一体化协同的全栈产品矩阵,构建高效、坚韧的现代供应链</span>
</div>
</div>
</div>
</div> <!-- end container -->
<img src="assets/images/index/top.png" alt="" style="width: 55%; max-width: none; margin-top: 20px;">
</div>
</div>
</section>
<!-- end portfolio-section -->
<!-- start portfolio-section -->
<section class="portfolio-section section-padding">
<div class="container">
<div class="row">
<div class="col col-lg-6 col-lg-offset-3">
<div class="section-title-s4">
<h2>模块化港航产品生态</h2>
<span>满足港口、航运、物流等各类差异化需求</span>
</div>
</div>
</div>
</div> <!-- end container -->
<div class="portfolio-container">
<div class="portfolio-grids portfolio-slider">
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-1.jpg" alt>
</div>
<div class="details">
<div class="inner">
<h3><a href="#">大宗货物供应链解决方案</a></h3>
<p class="cat">贸易/物流/港口</p>
</div>
</div>
</div>
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-2.jpg" alt>
</div>
<div class="details">
<div class="inner">
<h3><a href="#">内河港航一体化解决方案</a></h3>
<p class="cat">内河港航集团</p>
</div>
</div>
</div>
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-3.jpg" alt>
</div>
<div class="details">
<div class="inner">
<h3><a href="#">港口供应链平台解决方案</a></h3>
<p class="cat">大型港航集团</p>
</div>
</div>
</div>
<div class="grid">
<div class="img-holder">
<img src="assets/images/portfolio/img-4.jpg" alt>
</div>
<div class="details">
<div class="inner">
<h3><a href="#">全程物流链解决方案</a></h3>
<p class="cat">大型物流集团</p>
</div>
</div>
</div>
</div>
<div class="all-portfolio">
<a href="#" class="theme-btn-s2">View all cases</a>
</div>
</div>
</section>
<!-- end portfolio-section -->
init:origin
2025-12-11 10:06:21 +08:00
<section class="services-section section-padding">
<div class="container">
<div class="row">
<div class="col col-md-5">
<div class="section-title-s2">
<span>我们的服务领域</span>
<h2>我们的服务涵盖港航所有相关业务领域</h2>
</div>
</div>
<div class="col col-md-6 col-md-offset-1">
<div class="section-title-text">
<p>公司为国内外物流经营实体、运输中介服务企业、物流金融服务企业、货主及相关政府部门提供航运电商平台建设运营、物流业务项目实施、大数据平台搭建和信息化建设咨询等信息服务。
</p>
</div>
</div>
</div>
<div class="row">
<div class="col col-xs-12">
<div class="service-grids clearfix">
<div class="grid">
<div class="icon">
<i class="fi flaticon-matou"></i>
</div>
<h3><a href="#">码头</a></h3>
<!--<p>对码头进行智能化控制，提高码头的作业效率</p>-->
</div>
<div class="grid">
<div class="icon">
<i class="fi flaticon-changzhan"></i>
</div>
<h3><a href="#">场站</a></h3>
<!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
</div>
<div class="grid">
<div class="icon">
<i class="fi flaticon-cangchu"></i>
</div>
<h3><a href="#">仓储</a></h3>
<!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
</div>
<div class="grid">
<div class="icon">
<!--<img style="" src="assets/images/uniF10B.png">-->
<i class="fi flaticon-dingcang"></i>
</div>
<h3><a href="">船公司</a></h3>
<p> </p>
</div>
<div class="grid">
<div class="icon">
<!--<img style="" src="assets/images/uniF10B.png">-->
<i class="fi flaticon-cruise"></i>
</div>
<h3><a href="">船代</a></h3>
<p> </p>
</div>
<div class="grid">
<div class="icon">
<!--<img style="" src="assets/images/012-cruise.svg">-->
<i class="fi flaticon-box"></i>
</div>
<h3><a href="#">货代</a></h3>
<p> </p>
</div>
<div class="grid">
<div class="icon">
<i class="fi flaticon-delivery"></i>
</div>
<h3><a href="#">车队</a></h3>
<!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
</div>
<div class="grid">
<div class="icon">
<i class="fi flaticon-delivery-truck"></i>
</div>
<h3><a href="#">交管部门</a></h3>
<!--<p>Helplessly as he looked. What's happened to me? he thought. It wasn't a dream. His room, a proper</p>-->
</div>
<!--<div class="grid">-->
<!--<div class="icon">-->
<!--<i class="fi flaticon-parachute"></i>-->
<!--</div>-->
<!--<h3><a href="#"></a></h3>-->
<!--&lt;!&ndash;<p>帮助企业建立线上线下一体化的物流发展模式</p>&ndash;&gt;-->
<!--</div>-->
</div>
<!--<div class="all-services">-->
<!--<p>了解更多产品，请点击<a href="#">这里</a></p>-->
<!--</div>-->
</div>
</div>
</div> <!-- end container -->
</section>
<!-- start about-section -->
<section class="about-section section-padding">
<div class="container">
<div class="row">
<div class="col col-md-7">
首页
2025-12-12 11:21:33 +08:00
<div id="map" style="height: 600px;"></div>
init:origin
2025-12-11 10:06:21 +08:00
</div>
<div class="col col-md-5">
首页
2025-12-12 11:21:33 +08:00
<div class="details" style="margin-top: 100px;">
init:origin
2025-12-11 10:06:21 +08:00
<div class="section-title">
<span>我们的行业价值</span>
<h2>客户辐射面广，业务占比高</h2>
</div>
<p>岸基团队专注航运物流供应链领域信息化建设20年，以科技的力量支撑和推动了行业创新发展，服务的行业客户业务总量占到了全国水运货物总量的20%。</p>
<div class="contact-info">
<!--<div>-->
<!--<img src="assets/images/call.png" alt>-->
<!--<h4>Call Center</h4>-->
<!--<p>Sat - Fri day <br>(888) 254-6544-5441</p>-->
<!--</div>-->
<div>
<!--<img src="assets/images/map.png" alt>-->
<h4>航运货物总量占比</h4>
<p style="font-family:Helvetica Neue, sans-serif;line-height:1.25rem;font-size:120px;color:#019dfa;font-weight:bold;"><span class="odometer" data-count="20">00</span>%</p>
</div>
</div>
<!--<div class="btns">-->
<!--<a href="contact.html" class="theme-btn-s2">联系我们</a>-->
<!--&lt;!&ndash;<a href="#" class="theme-btn-s3">Contact with us</a>&ndash;&gt;-->
<!--</div>-->
</div>
</div>
</div>
</div> <!-- end container -->
</section>
<!-- end about-section -->
<!-- start services-section -->
<!-- end services-section -->
<!-- start track-contact -->
<!--<section class="track-contact section-padding">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col col-lg-10 col-lg-offset-1">-->
<!--<div class="track-trace-quote-form clearfix">-->
<!--<div class="track-trace">-->
<!--<h3>Track & Trace</h3>-->
<!--<form>-->
<!--<div>-->
<!--<label for="shipment">Shipment Type</label>-->
<!--<select id="shipment" class="form-control">-->
<!--<option>Type one</option>-->
<!--<option>Type Two</option>-->
<!--<option>Type Three</option>-->
<!--</select>-->
<!--</div>-->
<!--<div>-->
<!--<label for="tracking">Tracking Number</label>-->
<!--<input type="text" class="form-control" id="tracking" placeholder="Tracking Number*">-->
<!--</div>-->
<!--<div>-->
<!--<button type="submit" class="submit-btn">Track & Trace</button>-->
<!--</div>-->
<!--</form>-->
<!--<p>NB: Sometime it may be take few time, please wait.</p>-->
<!--</div>-->
<!--<div class="quote-form">-->
<!--<h3>Still no luck? Request a quote!</h3>-->
<!--<form>-->
<!--<div>-->
<!--<label>Personal Information</label>-->
<!--<input type="text" class="form-control" placeholder="Name*">-->
<!--<input type="email" class="form-control" placeholder="Email*">-->
<!--<input type="text" class="form-control" placeholder="Phone*">-->
<!--</div>-->
<!--<div>-->
<!--<label>Shipment Information</label>-->
<!--<select id="shipment2" class="form-control">-->
<!--<option selected disabled>Freight type</option>-->
<!--<option>Type one</option>-->
<!--<option>Type Two</option>-->
<!--<option>Type Three</option>-->
<!--</select>-->
<!--<input type="email" class="form-control" placeholder="City of Departure*">-->
<!--<input type="text" class="form-control" placeholder="Delivery City*">-->
<!--</div>-->
<!--<div>-->
<!--<button type="submit" class="submit-btn">Submit Request</button>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div> &lt;!&ndash; end container &ndash;&gt;-->
<!--</section>-->
<!-- end track-contact -->
<!-- start faq-achievement-section -->
<!--<section class="faq-achievement-section section-padding">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col col-md-6">-->
<!--<div class="faq-container">-->
<!--<div class="section-title-s2">-->
<!--<span>FAQ</span>-->
<!--<h2>People aks these question over & over again</h2>-->
<!--</div>-->
<!--<div class="panel-group faq-accordion theme-accordion-s1" id="accordion">-->
<!--<div class="panel panel-default">-->
<!--<div class="panel-heading">-->
<!--<a data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true">My Trace number is not working</a>-->
<!--</div>-->
<!--<div id="collapse-1" class="panel-collapse collapse in">-->
<!--<div class="panel-body">-->
<!--<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel panel-default">-->
<!--<div class="panel-heading">-->
<!--<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-2">Whole of her lower arm towards the viewer?</a>-->
<!--</div>-->
<!--<div id="collapse-2" class="panel-collapse collapse">-->
<!--<div class="panel-body">-->
<!--<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel panel-default">-->
<!--<div class="panel-heading">-->
<!--<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-3">Travelling salesman - and above it there hung</a>-->
<!--</div>-->
<!--<div id="collapse-3" class="panel-collapse collapse">-->
<!--<div class="panel-body">-->
<!--<p>It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="col col-md-6">-->
<!--<div class="achievement-container">-->
<!--<div class="section-title-s2">-->
<!--<span>Achievement</span>-->
<!--<h2>See what we achieved over the years!</h2>-->
<!--</div>-->
<!--<p>Magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer ne and housed in a nice, gilded frame</p>-->
<!--<div class="skills">-->
<!--<div class="skill">-->
<!--<h6>Air Freight</h6>-->
<!--<div class="progress">-->
<!--<div class="progress-bar" data-percent="85"></div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="skill">-->
<!--<h6>Ocean Freight</h6>-->
<!--<div class="progress">-->
<!--<div class="progress-bar" data-percent="95"></div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="skill">-->
<!--<h6>Road Freight</h6>-->
<!--<div class="progress">-->
<!--<div class="progress-bar" data-percent="92"></div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="skill">-->
<!--<h6>Warehousing</h6>-->
<!--<div class="progress">-->
<!--<div class="progress-bar" data-percent="95"></div>-->
<!--</div>-->
<!--</div>-->
<!--</div> -->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div> &lt;!&ndash; end container &ndash;&gt;-->
<!--</section>-->
<!-- end faq-achievement-section -->
<!-- start testimonials-section -->
<!--<section class="testimonials-section section-padding">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col col-lg-6 col-lg-offset-3">-->
<!--<div class="section-title-s3">-->
<!--<span>Testimonials</span>-->
<!--<h2>What People say’s About us</h2>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="row">-->
<!--<div class="col col-xs-12">-->
<!--<div class="testimonial-grids clearfix">-->
<!--<div class="grid">-->
<!--<div class="quote">-->
<!--<p>Samsa was a travelling salesman and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out</p>-->
<!--</div>-->
<!--<div class="client-info">-->
<!--<div class="img-holder">-->
<!--<img src="assets/images/testimonials/img-1.jpg" alt>-->
<!--</div>-->
<!--<div class="details">-->
<!--<h5>Jhon dow</h5>-->
<!--<p>Shipment CEO</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="quote">-->
<!--<p>Samsa was a travelling salesman and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out</p>-->
<!--</div>-->
<!--<div class="client-info">-->
<!--<div class="img-holder">-->
<!--<img src="assets/images/testimonials/img-2.jpg" alt>-->
<!--</div>-->
<!--<div class="details">-->
<!--<h5>Alaska</h5>-->
<!--<p>Business Officer</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="quote">-->
<!--<p>Samsa was a travelling salesman and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out</p>-->
<!--</div>-->
<!--<div class="client-info">-->
<!--<div class="img-holder">-->
<!--<img src="assets/images/testimonials/img-3.jpg" alt>-->
<!--</div>-->
<!--<div class="details">-->
<!--<h5>Shain on</h5>-->
<!--<p>Shiping Manager</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div> &lt;!&ndash; end container &ndash;&gt;-->
<!--</section>-->
<!-- end testimonials-section -->
<!-- start fun-fact-section -->
<!--<section class="fun-fact-section section-padding pt0">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col col-xs-12">-->
<!--<h2>为客户打造卓越产品体验</h2>-->
<!--<div class="fun-fact-grids clearfix">-->
<!--<div class="grid">-->
<!--<div class="info">-->
<!--<h3><span class="odometer" data-count="200">00</span>+</h3>-->
<!--<p>客户数量</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="info">-->
<!--<h3><span class="odometer" data-count="17">00</span>+</h3>-->
<!--<p>覆盖港口</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="info">-->
<!--<h3><span class="odometer" data-count="20">00</span>%</h3>-->
<!--<p>航运货物量</p>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="info">-->
<!--<h3><span class="odometer" data-count="100">00</span>%</h3>-->
<!--<p>客户满意度</p>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div> &lt;!&ndash; end container &ndash;&gt;-->
<!--</section>-->
<!-- end fun-fact-section -->
<!-- start portfolio-section -->
<!--<section class="portfolio-section section-padding">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col col-lg-6 col-lg-offset-3">-->
<!--<div class="section-title-s3">-->
<!--<span>最新案例</span>-->
<!--<h2>携手港航优质客户</h2>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--&lt;!&ndash; end container &ndash;&gt;-->
<!--&lt;!&ndash;<div class="portfolio-container">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="portfolio-grids portfolio-slider">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="grid">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="img-holder">&ndash;&gt;-->
<!--&lt;!&ndash;<img src="assets/images/portfolio/img-1.jpg" alt>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="details">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="inner">&ndash;&gt;-->
<!--&lt;!&ndash;<h3><a href="chuandai.html">上海新海</a></h3>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="cat">物流</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="grid">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="img-holder">&ndash;&gt;-->
<!--&lt;!&ndash;<img src="assets/images/portfolio/img-3.jpg" alt>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="details">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="inner">&ndash;&gt;-->
<!--&lt;!&ndash;<h3><a href="ilog.html">侨益物流</a></h3>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="cat">物流</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="grid">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="img-holder">&ndash;&gt;-->
<!--&lt;!&ndash;<img src="assets/images/portfolio/img-4.jpg" alt>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="details">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="inner">&ndash;&gt;-->
<!--&lt;!&ndash;<h3><a href="dianshang.html">锦江航运</a></h3>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="cat">电商</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="grid">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="img-holder">&ndash;&gt;-->
<!--&lt;!&ndash;<img src="assets/images/portfolio/img-5.jpg" alt>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="details">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="inner">&ndash;&gt;-->
<!--&lt;!&ndash;<h3><a href="yunmatou.html">唐山港集团</a></h3>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="cat">码头</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="grid">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="img-holder">&ndash;&gt;-->
<!--&lt;!&ndash;<img src="assets/images/portfolio/img-2.jpg" alt>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="details">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="inner">&ndash;&gt;-->
<!--&lt;!&ndash;<h3><a href="dianshang.html">上海航华</a></h3>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="cat">码头</p>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="all-portfolio">&ndash;&gt;-->
<!--&lt;!&ndash;<a href="classiccase.html" class="theme-btn-s2">更多客户</a>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</section>-->
<!-- end portfolio-section -->
<!-- start partners-section -->
<section class="partners-section">
<div class="container">
<div class="row">
<div class="col col-lg-6 col-lg-offset-3">
<div class="section-title-s3" style="margin-bottom:0px
">
<span>我们的合作伙伴</span>
<h2>携手港航顶尖客户</h2>
</div>
</div>
</div>
</div>
<div class="container" style="padding:15px 0 30px 0!important;">
<div class="row">
<div class="col col-xs-12">
<div class="partner-grids partners-slider">
<div class="grid">
<img src="assets/images/partners/jinjiang.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/qiaoyi.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/zhongshanganghang.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/shanghaihanghua.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/qinhuangdao.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/rizhao.png" alt>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-xs-12">
<div class="partner-grids partners-slider">
<div class="grid">
<img src="assets/images/partners/beibuwan.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/jining.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/liandai.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/hainanlingao.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/zhujiangchuanwu.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/hefei.png" alt>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-xs-12">
<div class="partner-grids partners-slider">
<div class="grid">
<img src="assets/images/partners/gangwuju.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/zhongyunjituan.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/tangshangang.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/dongfangguoji.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/weihaigang.png" alt>
</div>
<div class="grid">
<img src="assets/images/partners/wuzhou.png" alt>
</div>
</div>
</div>
</div>
<div class="separator"></div>
</div> <!-- end container -->
</section>
<!-- end partners-section -->
<!-- start blog-section -->
<!--<section class="blog-section section-padding">-->
<!--<div class="container">-->
<!--<div class="row">-->
<!--<div class="col col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">-->
<!--<div class="section-title-s3">-->
<!--<span>Recent News</span>-->
<!--<h2>Our Company News</h2>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="row">-->
<!--<div class="col col-xs-12">-->
<!--<div class="blog-grids clearfix">-->
<!--<div class="grid">-->
<!--<div class="entry-meta">-->
<!--<div class="author">-->
<!--<img src="assets/images/blog/img-1.jpg" alt>-->
<!--</div>-->
<!--<h4>Jain dow</h4>-->
<!--<p class="date">10 Oct 2019</p>-->
<!--</div>-->
<!--<div class="entry-details">-->
<!--<h3><a href="#">Businesses that focus on quality and timeliness with</a></h3>-->
<!--<p>Dominating a heavy fur muff that covred the whole of her lower arm towards the viewer gregor then</p>-->
<!--</div>-->
<!--<div class="overlay">-->
<!--<div class="middle">-->
<!--<a href="#" class="theme-btn">Read More</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="entry-meta">-->
<!--<div class="author">-->
<!--<img src="assets/images/blog/img-2.jpg" alt>-->
<!--</div>-->
<!--<h4>Michel jhon</h4>-->
<!--<p class="date">10 Oct 2019</p>-->
<!--</div>-->
<!--<div class="entry-details">-->
<!--<h3><a href="#">Meeting the global needs of business through advanced</a></h3>-->
<!--<p>Dominating a heavy fur muff that covred the whole of her lower arm towards the viewer gregor then</p>-->
<!--</div>-->
<!--<div class="overlay">-->
<!--<div class="middle">-->
<!--<a href="#" class="theme-btn">Read More</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="grid">-->
<!--<div class="entry-meta">-->
<!--<div class="author">-->
<!--<img src="assets/images/blog/img-3.jpg" alt>-->
<!--</div>-->
<!--<h4>Shon dow</h4>-->
<!--<p class="date">10 Oct 2019</p>-->
<!--</div>-->
<!--<div class="entry-details">-->
<!--<h3><a href="#">Economy as supply chain networks are created among </a></h3>-->
<!--<p>Dominating a heavy fur muff that covred the whole of her lower arm towards the viewer gregor then</p>-->
<!--</div>-->
<!--<div class="overlay">-->
<!--<div class="middle">-->
<!--<a href="#" class="theme-btn">Read More</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div> &lt;!&ndash; end container &ndash;&gt;-->
<!--</section>-->
<!-- end blog-section -->
<!-- start cta-section-s2 -->
<section class="cta-section-s2">
<div class="container">
<div class="row">
<div class="col col-lg-8 col-sm-8">
<div class="text">
<h2>为客户提供高效服务
</h2>
<p style="font-size:19px;">作为港航企业长期的专业合作伙伴，岸基科技帮助港航企业打造高效能的互联网+航运平台，以客户为中心快速响应客户需求，提高业务管理能力，为客户创造长期价值。</p>
</div>
</div>
<div class="col col-lg-3 col-sm-4">
<div class="contact-info">
<div class="icon">
<i class="fi ti-face-smile"></i>
</div>
<h5>0535－2106025</h5>
<a href="contact.html" class="theme-btn-s3" target="_parent">联系我们</a>
</div>
</div>
</div>
</div> <!-- end container -->
</section>
<!-- end cta-section-s2 -->
<!-- start site-footer -->
<div id="footer"></div>
<!-- end site-footer -->
</div>
<!-- end of page-wrapper -->
<!-- All JavaScript files
================================================== -->
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/kefu.js"></script>
<!--<script>-->
<!--var kefu = new Kefu({-->
<!--// index: "/",-->
<!--tel: "0535－2106025",//电话号码-->
<!--qq: "278294683",//在线QQ-->
<!--wechatPerson: {-->
<!--state: false,// true是开启个人微信二维码, false不开启-->
<!--imgURL: "./imgs/2wm.png" //图片路径-->
<!--},-->
<!--wechatofficial: {-->
<!--state: true,// true是开启微信公众号二维码, false不开启-->
<!--imgURL: "assets/images/wechat.jpg" //图片路径-->
<!--}//微信公众号-->
<!--});-->
<!--</script>-->
<script type="text/javascript">
$("#footer").load("footer.html");
$("#header").load("header.html");
//如果想要操作header.html中的元素，就得等到header.html加载完成后操作
// $("#footer").load("footer.html", function(){
// });
</script>
<!-- Plugins for this template -->
<script src="assets/js/jquery-plugin-collection.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
首页
2025-12-12 11:21:33 +08:00
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
import { Line2 } from 'three/addons/lines/Line2.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
const scene = new THREE.Scene();
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);
const ambientLight = new THREE.AmbientLight(0xd4e7fd, 4);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xe8eaeb, 0.2);
directionalLight.position.set(0, 10, 5);
const directionalLight2 = directionalLight.clone();
directionalLight2.position.set(0, 10, -5);
const directionalLight3 = directionalLight.clone();
directionalLight3.position.set(5, 10, 0);
const directionalLight4 = directionalLight.clone();
directionalLight4.position.set(-5, 10, 0);
scene.add(directionalLight);
scene.add(directionalLight2);
scene.add(directionalLight3);
scene.add(directionalLight4);
const container = document.getElementById("map");
container.style.position = "relative";
const camera = new THREE.PerspectiveCamera(
75,
container.clientWidth / container.clientHeight,
0.1,
1000
);
// 设置相机位置: position.set(x, y, z)
// x: 左右移动 (负值向左, 正值向右)
// y: 上下移动 (值越大视角越高, 当前100为俯视角度)
// z: 前后移动 (负值向前, 正值向后, 0.1接近正上方俯视)
camera.position.set(0, 100, 10);
camera.lookAt(0, 0, 0);
camera.up.set(0, 1, 0);
const labelRenderer = new CSS2DRenderer();
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.pointerEvents = "none";
labelRenderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(labelRenderer.domElement);
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); // 开启抗锯齿
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableRotate = false;
controls.enableZoom = false;
controls.enablePan = false;
controls.update();
// objects tracked globally for interactions/animation
const highlightMeshes = [];
const pulseRings = [];
// tooltip for highlighted provinces
const tooltip = document.createElement("div");
tooltip.style.position = "absolute";
tooltip.style.padding = "6px 10px";
tooltip.style.background = "rgba(24, 118, 242, 0.92)";
tooltip.style.color = "#fff";
tooltip.style.fontSize = "13px";
tooltip.style.borderRadius = "6px";
tooltip.style.pointerEvents = "none";
tooltip.style.boxShadow = "0 2px 6px rgba(0,0,0,0.25)";
tooltip.style.display = "none";
container.appendChild(tooltip);
const animate = () => {
requestAnimationFrame(animate);
const t = performance.now() * 0.001;
pulseRings.forEach((mesh) => {
const { minScale, maxScale, period, phase, baseOpacity } = mesh.userData;
// 每个点以 3s 周期从中心向外扩散一次，使用平滑缓入缓出避免突兀
const progress = (t / period + phase) % 1; // 0..1
const eased = progress * progress * (3 - 2 * progress); // smoothstep(0..1)
const s = minScale + eased * (maxScale - minScale);
mesh.scale.setScalar(s);
// 首尾使用平滑窗，外扩过程中逐渐淡出，避免突变
// 尾部提早淡出，确保从最大到重新起始时更自然、不显跳变
const fadeIn = progress < 0.12 ? progress / 0.12 : 1.0;
const fadeOut = progress > 0.7 ? Math.max(0.0, 1.0 - (progress - 0.7) / 0.3) : 1.0;
const alpha = baseOpacity * Math.max(0.0, Math.min(1.0, fadeIn * fadeOut));
if (mesh.material && mesh.material.uniforms && mesh.material.uniforms.opacity) {
mesh.material.uniforms.opacity.value = alpha;
}
});
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
};
animate();
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let currentMap = null;
let hoverMesh = null;
const hoverColor = new THREE.Color().setHSL(210 / 360, 0.7, 0.55);
const showTooltip = (event) => {
const rect = container.getBoundingClientRect();
tooltip.style.left = `${event.clientX - rect.left + 12}px`;
tooltip.style.top = `${event.clientY - rect.top + 12}px`;
tooltip.textContent = "客户数:2";
tooltip.style.display = "block";
};
const hideTooltip = () => {
tooltip.style.display = "none";
};
const applyHoverState = (mesh) => {
if (hoverMesh && hoverMesh !== mesh) {
// reset previous hover color
if (hoverMesh.material && hoverMesh.userData.baseColor) {
hoverMesh.material.color.copy(hoverMesh.userData.baseColor);
}
}
hoverMesh = mesh;
if (hoverMesh && hoverMesh.material) {
hoverMesh.material.color.copy(hoverColor);
}
};
const clearHoverState = () => {
if (hoverMesh && hoverMesh.material && hoverMesh.userData.baseColor) {
hoverMesh.material.color.copy(hoverMesh.userData.baseColor);
}
hoverMesh = null;
};
const handlePointerMove = (event) => {
const rect = container.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(highlightMeshes, false);
if (intersects.length > 0) {
applyHoverState(intersects[0].object);
showTooltip(event);
} else {
clearHoverState();
hideTooltip();
}
};
container.addEventListener("mousemove", handlePointerMove);
container.addEventListener("mouseleave", () => {
clearHoverState();
hideTooltip();
});
window.addEventListener("resize", () => {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
labelRenderer.setSize(container.clientWidth, container.clientHeight);
// update LineMaterial resolution on resize to keep linewidth consistent
if (lineMaterials && lineMaterials.length) {
lineMaterials.forEach((m) => {
if (m && m.resolution) {
m.resolution.set(container.clientWidth, container.clientHeight);
m.needsUpdate = true;
}
});
}
});
// collect LineMaterial instances so we can update resolution on resize
const lineMaterials = [];
const url = "/assets/100000_full.json";
fetch(url)
.then((res) => res.json())
.then((data) => {
const map = createMap(data, 0.05);
currentMap = map;
map.add(createPulseRings(data, 0.05));
scene.add(map);
});
const offsetXY = d3.geoMercator();
// 需要高亮的省份名称数组
const highlightProvinces = ["山东省", "海南省", "天津市", "广东省", "浙江省", "江苏省", "北京市", "河北省", "辽宁省", "上海市"];
// 需要添加辐射圈的省份
const pulseProvinces = ["北京市", "上海市", "广东省"];
const createPulseRings = (data, depth) => {
const group = new THREE.Object3D();
data.features.forEach((feature) => {
const { centroid, center, name } = feature.properties;
if (!pulseProvinces.includes(name)) return;
const point = centroid || center || [0, 0];
const [x, y] = offsetXY(point);
// 覆盖到圆心（内圈一直到中心），外径保持略大的辐射圈
const geometry = new THREE.RingGeometry(0.0, 18.0, 160);
// colorCenterHex: 中心颜色, colorEdgeHex: 边缘颜色, opacityVal: 整体透明度, alphaInner: 内圈透明度, alphaOuter: 外圈透明度
const makeMaterial = (colorCenterHex, colorEdgeHex, opacityVal, alphaInner = 0.45, alphaOuter = 1.0) => {
const m = new THREE.ShaderMaterial({
transparent: true,
depthWrite: false,
depthTest: false, // keep rings always visible above map
side: THREE.DoubleSide,
uniforms: {
colorCenter: { value: new THREE.Color(colorCenterHex) },
colorEdge: { value: new THREE.Color(colorEdgeHex) },
opacity: { value: opacityVal },
innerRatio: { value: geometry.parameters.innerRadius / geometry.parameters.outerRadius },
alphaInner: { value: alphaInner },
alphaOuter: { value: alphaOuter },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec2 vUv;
uniform vec3 colorCenter;
uniform vec3 colorEdge;
uniform float opacity;
uniform float innerRatio;
uniform float alphaInner;
uniform float alphaOuter;
void main() {
vec2 p = vUv - vec2(0.5);
float rawR = clamp(length(p) * 2.0, 0.0, 1.0);
float r = clamp((rawR - innerRatio) / max(1.0 - innerRatio, 0.0001), 0.0, 1.0);
float k = smoothstep(0.0, 1.0, r);
vec3 color = mix(colorEdge, colorCenter, 1.0 - k);
float alpha = opacity * mix(alphaInner, alphaOuter, k);
if (alpha < 0.01) discard;
gl_FragColor = vec4(color, alpha);
}
`,
});
return m;
};
// 固定底环：中心更深，向外变浅，且更高不透明度
const baseRing = new THREE.Mesh(
geometry.clone(),
// 颜色统一，alpha: 内圈高、外圈低
makeMaterial(0x31bbf7, 0x31bbf7, 0.1, 1.0, 1.0)
);
baseRing.rotation.x = 0;
baseRing.position.set(x, -y, depth + 0.02);
baseRing.renderOrder = 10; // render above map geometry
group.add(baseRing);
// 扩散环：从固定底环处开始向外扩散
// 扩散环：内圈浅、外圈深，整体更淡
const pulseRing = new THREE.Mesh(
geometry.clone(),
// alpha: 内圈低、外圈高
makeMaterial(0x9fdcff, 0x31bbf7, 0.45, 0.35, 1.0)
);
pulseRing.rotation.x = 0;
pulseRing.position.set(x, -y, depth + 0.02);
pulseRing.renderOrder = 11; // render above base ring
pulseRing.userData = {
minScale: 1.0,
maxScale: 1.3,
period: 3.0,
phase: Math.random(),
baseOpacity: 0.25,
};
pulseRings.push(pulseRing);
group.add(pulseRing);
});
return group;
};
const createMap = (data, depth) => {
const map = new THREE.Object3D();
const center = data.features[0].properties.centroid;
offsetXY.center(center).translate([0, 0]);
data.features.forEach((feature) => {
const unit = new THREE.Object3D();
const { centroid, center, name } = feature.properties;
const { coordinates, type } = feature.geometry;
const point = centroid || center || [0, 0];
// 判断是否需要高亮
let color;
if (highlightProvinces.includes(name)) {
color = 0x2658F7; // 高亮颜色
} else {
// 白色
color = new THREE.Color().setHSL(233 / 360, 0, 1).getHex(); // 普通颜色
}
//
// const color = new THREE.Color().setHSL(233/360, (Math.random() * 30 + 55)/100, (Math.random() * 30 + 55)/100).getHex();
coordinates.forEach((coordinate) => {
if (type === "MultiPolygon") coordinate.forEach((item) => fn(item));
if (type === "Polygon") fn(coordinate);
function fn(coordinate) {
unit.name = name;
unit.centroid = point;
const mesh = createMesh(coordinate, color, depth);
mesh.userData = { name, centroid: point, baseColor: new THREE.Color(color) };
if (highlightProvinces.includes(name)) {
highlightMeshes.push(mesh);
}
const line = createLine(coordinate, depth);
unit.add(mesh, ...line);
}
});
map.add(unit);
setCenter(map);
});
return map;
};
const createMesh = (data, color, depth) => {
const shape = new THREE.Shape();
data.forEach((item, idx) => {
const [x, y] = offsetXY(item);
if (idx === 0) shape.moveTo(x, -y);
else shape.lineTo(x, -y);
});
const extrudeSettings = {
depth: depth,
bevelEnabled: false,
};
const materialSettings = {
color: color,
emissive: 0x000000,
roughness: 0.45,
metalness: 0.8,
transparent: true,
side: THREE.DoubleSide,
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var material1 = new THREE.ShaderMaterial({
uniforms: {
// 添加一个uniform变量来控制颜色渐变
color1: { value: new THREE.Color(0x2e95fb) }, // 开始颜色
color2: { value: new THREE.Color(0x0131a8) } // 结束颜色
},
vertexShader: `
varying float vZPosition;
void main() {
// 传递Z轴位置给片段着色器
vZPosition = position.z;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 color1;
uniform vec3 color2;
varying float vZPosition;
void main() {
// 使用线性插值根据Z轴位置计算颜色
vec3 color = mix(color1, color2, vZPosition);
gl_FragColor = vec4(color, 1.0);
}
`
});
const material = new THREE.MeshStandardMaterial(materialSettings);
const mesh = new THREE.Mesh(geometry, material);
return mesh;
};
const createLine = (data, depth) => {
// 使用 Line2/LineMaterial/LineGeometry 来支持更粗的线并且抗锯齿
const positions = [];
let firstX = null;
let firstY = null;
data.forEach((item, idx) => {
const [x, y] = offsetXY(item);
positions.push(x, -y, 0);
if (idx === 0) {
firstX = x;
firstY = y;
}
});
// 闭合多边形，确保线条连贯
if (firstX !== null && firstY !== null) {
positions.push(firstX, -firstY, 0);
}
const lineGeometry = new LineGeometry();
lineGeometry.setPositions(positions);
// linewidth 单位为像素；略微收细并改为黑色，保持可读性
const lineMaterialSettings = {
color: 0xffffff,
linewidth: 0.5,
dashed: false,
transparent: true,
opacity: 0.9,
};
const uplineMaterial = new LineMaterial(lineMaterialSettings);
const downlineMaterial = new LineMaterial(lineMaterialSettings);
// 设置分辨率（像素），用于正确计算线宽
uplineMaterial.resolution.set(container.clientWidth, container.clientHeight);
downlineMaterial.resolution.set(container.clientWidth, container.clientHeight);
// 记录以便在 resize 时更新
lineMaterials.push(uplineMaterial, downlineMaterial);
const upLine = new Line2(lineGeometry, uplineMaterial);
const downLine = new Line2(lineGeometry.clone(), downlineMaterial);
downLine.position.z = -0.0001;
upLine.position.z = depth + 0.0001;
return [upLine, downLine];
};
const setCenter = (map) => {
map.rotation.x = -Math.PI / 2;
const box = new THREE.Box3().setFromObject(map);
const center = box.getCenter(new THREE.Vector3());
const offset = [0, 0];
map.position.x = map.position.x - center.x - offset[0];
map.position.z = map.position.z - center.z - offset[1];
};
</script>
init:origin
2025-12-11 10:06:21 +08:00
</body>
</html>
Copy Permalink