<!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.0">
<title>SVG地图轮播</title>
<style>
.svg-geo-map-tooltips {
min-width: 160px;
background-color: rgba(0,0,0,.8);
border-radius: 8px;
text-align: center;
padding: 18px 8px;
transition: .4s;
left: 20px !important;
bottom: 5px !important;
}
.svg-geo-map-tooltips .name {
font-size: 16px;
font-weight: 400;
color: #ffffff;
height: 22px;
line-height: 22px;
margin-bottom: 8px;
}
.svg-geo-map-tooltips .value {
color: #ffffff;
}
.svg-geo-map-tooltips .value .num {
font-size: 24px;
font-weight: bold;
height: 32px;
line-height: 32px;
}
.svg-geo-map-tooltips .value .unit {
font-size: 14px;
}
</style>
<script src="https://unpkg.com/@popperjs/core@2"></script>
</head>
<body>
<div class='svg-geo-map-chart'>
<svg id="baiyunSvg" width="804px" height="597px" viewBox="0 0 804 597" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-12.8%" y="-25.8%" width="125.6%" height="151.7%" filterUnits="objectBoundingBox" id="filter-1">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-14.8%" y="-14.6%" width="129.7%" height="129.1%" filterUnits="objectBoundingBox" id="filter-2">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-2.1%" y="-4.0%" width="104.1%" height="108.0%" filterUnits="objectBoundingBox" id="filter-3">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-5.3%" y="-10.5%" width="110.6%" height="121.1%" filterUnits="objectBoundingBox" id="filter-4">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-5.0%" y="-7.9%" width="110.1%" height="115.8%" filterUnits="objectBoundingBox" id="filter-5">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-2.1%" y="-6.3%" width="104.3%" height="112.6%" filterUnits="objectBoundingBox" id="filter-6">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-4.7%" y="-4.3%" width="109.3%" height="108.7%" filterUnits="objectBoundingBox" id="filter-7">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-8.5%" y="-15.2%" width="117.0%" height="130.4%" filterUnits="objectBoundingBox" id="filter-8">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-10.8%" y="-21.8%" width="121.6%" height="143.6%" filterUnits="objectBoundingBox" id="filter-9">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-11.8%" y="-12.2%" width="123.7%" height="124.4%" filterUnits="objectBoundingBox" id="filter-10">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-10.4%" y="-10.3%" width="120.9%" height="120.5%" filterUnits="objectBoundingBox" id="filter-11">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-3.4%" y="-5.2%" width="106.9%" height="110.5%" filterUnits="objectBoundingBox" id="filter-12">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-13.5%" y="-11.1%" width="127.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-13">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-7.6%" y="-6.5%" width="115.1%" height="113.0%" filterUnits="objectBoundingBox" id="filter-14">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-6.5%" y="-25.7%" width="113.1%" height="151.5%" filterUnits="objectBoundingBox" id="filter-15">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-6.5%" y="-12.2%" width="112.9%" height="124.4%" filterUnits="objectBoundingBox" id="filter-16">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-7.0%" y="-9.9%" width="114.0%" height="119.8%" filterUnits="objectBoundingBox" id="filter-17">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-17.6%" y="-29.2%" width="135.1%" height="158.5%" filterUnits="objectBoundingBox" id="filter-18">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-9.4%" y="-18.4%" width="118.7%" height="136.9%" filterUnits="objectBoundingBox" id="filter-19">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-15.1%" y="-24.8%" width="130.2%" height="149.6%" filterUnits="objectBoundingBox" id="filter-20">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-14.1%" y="-15.7%" width="128.1%" height="131.5%" filterUnits="objectBoundingBox" id="filter-21">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-9.2%" y="-12.9%" width="118.5%" height="125.8%" filterUnits="objectBoundingBox" id="filter-22">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-21.9%" y="-17.4%" width="143.7%" height="134.8%" filterUnits="objectBoundingBox" id="filter-23">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<filter x="-13.3%" y="-15.4%" width="126.7%" height="130.9%" filterUnits="objectBoundingBox" id="filter-24">
<feGaussianBlur stdDeviation="3" in="SourceGraphic"></feGaussianBlur>
</filter>
<polygon id="path-25"
points="522.946013 60.3818426 523.520655 32.0102422 523.29789 26.8680602 515.862091 18.3829596 515.287449 46.7545599 522.722339 55.2396606">
</polygon>
<filter x="-127.5%" y="-25.0%" width="355.1%" height="150.0%" filterUnits="objectBoundingBox" id="filter-26">
<feGaussianBlur stdDeviation="10" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"
result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0" type="matrix"
in="shadowInnerInner1"></feColorMatrix>
</filter>
<polygon id="path-27"
points="588.428966 69.5208817 588.695374 56.3575143 592.990644 56.9042066 601.39297 54.7419978 606.581118 50.2875019 606.69932 44.4922 614.967987 40.8500106 617.942125 30.7293813 631.144351 28.37251 631.718994 5.17069177e-14 618.517676 2.35778096 615.543538 12.4775006 604.148889 17.4968815 604.00432 24.6220737 601.968522 26.3694878 593.566196 28.5316966 582.758918 27.1581437 580.552183 28.7636542 578.958277 31.2551519 578.647316 46.6071077 573.406432 47.2374866 572.83088 75.6099966 580.432162 74.6939914">
</polygon>
<filter x="-17.8%" y="-13.9%" width="135.7%" height="127.8%" filterUnits="o
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
需积分: 5 48 浏览量
2022-03-29
20:20:33
上传
评论
收藏 2.31MB ZIP 举报
svgGeoMapChart.zip （3个子文件） 
svgGeoMapChart.html 441KB
QQ录屏20220329145228_.gif 422KB
QQ录屏20220329145228.mp4 1.96MB
评论0