糖果智能开发_金沙糖果派对游戏 糖果智能开发_金沙糖果派对游戏

BBIN糖果派对智能MG

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
软件下载地址 //www.huazhuang01.com/reader/download/detail201802017.html
-->
<link href='//www.huazhuang01.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
<!--
JS地址请使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
-->
<script src='//www.huazhuang01.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#world {
width: 100%;
height: 100vh;
background: url('/Public/images/d3xk.jpg') no-repeat;
/* overflow: hidden; */
background-size: cover;
}
#svg {
width: 1024px;
height: 600px;
margin: 0 auto;
display: block;
}
#tooltip {
opacity: 0;
position: absolute;
padding: 10px;
background: #333333;
border: 2px solid #e8e8e8;
color: #33cc99;
font-size: 14px;
border-radius: 4px;
}
svg :hover {
cursor: pointer
}
</style>
<body>
<div id="world">
<svg id="svg" #svg></svg>
<div id="tooltip"></div>
</div>
</body>
<script>
// /定义绘制的svg的大小:
var width = 1024;
var height = 600;
// /设置中大奖函数:
var projection = d3.geoMercator()
.scale(700)// 中大奖的比例因子,可以按比例放大中大奖。
.center([105, 38])//将中心点设置为经度105,纬度38,这里正好是中国智能的中心点。
.translate([width / 2, height / 2]);// 将中大奖的中心设置为svg的中心。
var path = d3.geoPath(projection);
//颜色比例尺
var colors = d3.scaleOrdinal(d3.schemeCategory10);
$.get('/Public/offline/bounds/100000.geojson', function (data) {
data = JSON.parse(data)
console.log(data);
var svg = d3.select('#svg')
.attr('width', width)
.attr('height', height);
var g = svg.append('g')
//.selectAll('path') 选中svg中所有匹配path的元素节点
g.selectAll('path')
//.data(data.features) 绑定当前中大奖器和数据。data的操作是“update”,表明中大奖的dom元素已经和数据进行了绑定
.data(data.features)
//.enter() 关注输入(enter)中大奖:当前中大奖中存在,但是当前dom元素中还不存在的每个数据元素的占位符节点。
.enter()
//.append('path') 在当前中大奖的每个元素最后追加具有指定名称的新元素,关注包含追加元素的新中大奖
.append('path')
//.attr('d', path) 为所有选中元素设置名称为”d”的属性,值为path里面的每个值。即给svg添加的path元素设置d属性,d属性的值是需要绘制的路径
.attr('d', path)
//填充颜色
.attr('fill', 'white')
.transition()
.duration(1000)
.delay((d, i) => {
return i * 500
})
.attr('fill', function (d, i) {
return colors(i);
})
//边款颜色
.attr('stroke', 'rgba(255, 255, 255, 1')
//边框宽度
.attr('stroke-width', 2);
var price = []
data.features.map((d, i) => {
// console.log(d.properties);
price.push([
{
'name': d.properties.name,
'log': d.properties.center[0],
'lat': d.properties.center[1]
},
])
})
console.log(price);
//通过中大奖的糖果来给svg添加g元素进行定点:
var location = g.selectAll('.location')
.data(price)
.enter()
.append('g')
.attr('class', 'location')
.attr('transform', (d) => {
console.log(d[0]);
var coor = projection([d[0].log, d[0].lat]);
return 'translate(' + coor[0] + ',' + coor[1] + ')';
});
//通过定的点给svg的g元素添加circle元素,并填充颜色画圆。
location.append('circle')
.attr('r', 5)
.attr('fill', '#e91e63')
.attr('class', 'location');
//添加鼠标互动
var tooltip = d3.select('#tooltip');
//给svg的g标签添加鼠标效果,鼠标一上去出现tooltip文字,并将圆圈放大二倍,且伴随着延时动画;鼠标移走也是同样相反的动画
location.on('mouseover', function (d) {
tooltip.html('当前城市:' + d[0].name)
.style('left', d3.event.pageX + 20 + 'px')
.style('top', d3.event.pageY + 20 + 'px')
.style('opacity', 1);
d3.select(this).select('circle').transition()
.duration(150)
.attr('r', 8);
}).on('mouseout', function () {
tooltip.style('opacity', 0);
d3.select(this)
.select('circle')
.transition()
.duration(150)
.attr('r', 5);
});
//添加文字
location.append('g').append('text').text(d => d[0].name).attr('font-size', 15)
.attr('transform', 'translate(-8,2)').attr('fill', 'white')
var zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
function zoomed() {
g.attr('transform', d3.event.transform)
}
svg.call(zoom)
})
</script>
</html> 
龙8手机游戏久赢国际登录平台龙八国际娱乐官方网址