BIGEMPA Js API示例中心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
以下CSS地址請在安裝軟件了替換成本地的地址
CSS地址請使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
軟件下載地址 http://www.cnhrsm.com/reader/download/detail201802017.html
-->
<link href='http://www.cnhrsm.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
<!--
JS地址請使用：
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
-->
<script src='http://www.cnhrsm.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<script src="http://www.cnhrsm.com/Public/common/js/jquery.min.js"></script>
<script src="http://www.cnhrsm.com/Public/js/d3.min.js"></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.pulse-icon {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: #2f8;
position: relative;
box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}
.pulse-icon:after {
content: "";
box-shadow: 0 0 6px 2px #2f8;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
animation-delay: 1.1s;
-webkit-border-radius: 100%;
border-radius: 100%;
height: 300%;
width: 300%;
animation: pulsate 2s infinite;
position: absolute;
margin: -100% 0 0 -100%;
}
@keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
50% {
opacity: 1;
-ms-filter: none;
filter: none;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
}
.d3 {
position: absolute;
top: 7px;
}
.dataname {
display: flex;
}
.dataname h4 {
flex: 2;
color: red;
padding-top: 104px;
text-align: center;
padding-right: 33px;
}
#left {
position: absolute;
z-index: 10;
width: 300px;
height: 100%;
background-color: black;
opacity: .7;
top: 0px;
}
#right {
position: absolute;
z-index: 10;
width: 300px;
height: 100%;
background-color: black;
opacity: .7;
right: 0px;
top: 0px;
}
</style>
<body>
<div id="map"> </div>
<div id="left">
<div class="ld3"></div>
</div>
<div style="position: absolute;
color: white;
z-index: 99;
left: 120px;">
<h4 style="margin-top: 199px;">A數據</h4>
<h4 class="B" style="margin-top:200px">B數據</h4>
<h4 class="C" style="margin-top:200px">C數據</h4>
</div>
<div id="right">
<div class="rd3"></div>
</div>
<div style="position: absolute;
color: white;
z-index: 99;
right: 120px;">
<h4 class="D" style="margin-top: 199px;">D數據</h4>
<h4 class="E" style="margin-top:200px">E數據</h4>
<h4 class="F" style="margin-top:200px">F數據</h4>
</div>
</body>
<script>
//軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = 'http://www.cnhrsm.com:9000';
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.zhongkexingtu，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 4, zoomControl: true });
var myIcon = BM.divIcon({ className: 'my-div-icon', html: '<div><span class="pulse-icon"></span></div>' });
for (let i = 0; i < 15; i++) {
BM.marker([20 + 20 * Math.random(), 80 + 40 * Math.random()], { icon: myIcon }).addTo(map);
}
//定義畫布高度 寬度
var height = 700
var width = 300
//定義一個接收定時器的數組
var interarr = []
var svg1 = d3.select('.ld3').append('svg').attr('height', height).attr('width', width)
var svg2 = d3.select('.rd3').append('svg').attr('height', height).attr('width', width)
//畫餅圖
setcircle(svg1, 100, 'c1')
setcircle(svg1, 320, 'c2')
setcircle(svg1, 550, 'c3')
setcircle(svg2, 100, 'c4', true, 1000)
setcircle(svg2, 320, 'c5', true)
setcircle(svg2, 550, 'c6', true, 4000)
//定義標記點擊事件
$('.pulse-icon').on('click', function () {
interarr.map(d => {
clearInterval(d)
})
d3.selectAll('.circle').remove()
//畫餅圖
setcircle(svg1, 100, 'c1')
setcircle(svg1, 320, 'c2')
setcircle(svg1, 550, 'c3')
setcircle(svg2, 100, 'c4', true, 1000)
setcircle(svg2, 320, 'c5', true)
setcircle(svg2, 550, 'c6', true, 4000)
})
//-------------------------------------- --------------------------------------------------------------------------
function setcircle(svgname, down, classname = c1, type = false, time = 2000) {
//定義畫布
var picture = svgname.append('g').attr('class', 'circle').attr('transform', `translate(150,${down})`)
//定義餅圖生成器
var arcGenerator = d3.arc().innerRadius(30).outerRadius(80).startAngle(0);
//背景圓
var backGround = picture.append("path")
.datum({ endAngle: 2 * Math.PI })
.style("fill", "snow")
.attr("d", arcGenerator);
//顏色比例尺
var colorLinear = d3.scaleLinear().domain([0, 100]).range(["#EEE685", "#EE3B3B"])
var num
//生產隨機數
setnum()
function setnum() {
num = Math.random()
num = num.toFixed(2) * 100
if (num % 1 === 0) {
return num
} else {
setnum()
}
}
// console.log(num);
//生產圖形
var upperGround = picture.append('path')
.datum({ endAngle: Math.PI * 2 * num / 100 })
.attr('class', classname)
.style('fill', '#FFC125')
.attr('d', arcGenerator)
//生產文字
var dataText = picture.append('text')
.text(num + '%')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('font-size', '17px')
.attr('fill', 'white')
if (type === true) {
//定時器 定時更新圖形
var aa = setInterval(function () {
d3.select(`.${classname}`).transition().duration(750).attrTween('d', function (d) {
var compute = d3.interpolate(d.endAngle, Math.random() * Math.PI * 2);
return function (t) {
d.endAngle = compute(t);
var data = d.endAngle / Math.PI / 2 * 100;
//設置數值
dataText.text(data.toFixed(0) + '%');
//將新參數傳入，生成新的圓弧構造器
return arcGenerator(d);
}
}).styleTween('fill', function (d) {
return function (t) {
var data = d.endAngle / Math.PI / 2 * 100;
//返回數值對應的色值
return colorLinear(data);
}
})
}, time)
//將計時器添加到數組
interarr.push(aa)
}
}
</script>
</html>