<!doctype html>
|
<html lang="zh-CN">
|
|
<head>
|
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/index.html -->
|
<meta charset="utf-8">
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<title>客户统计</title>
|
<style>
|
html,
|
body,
|
#container {
|
width: 100%;
|
height: 95%;
|
margin: 0px;
|
}
|
|
#loadingTip {
|
position: absolute;
|
z-index: 9999;
|
top: 0;
|
left: 0;
|
padding: 3px 10px;
|
background: red;
|
color: #fff;
|
font-size: 14px;
|
}
|
#menu{
|
font-size: 18px;
|
font-weight: bold;
|
}
|
#menu li{
|
text-decoration: none; /*去掉前面的圆点*/
|
list-style: none;
|
float: left;
|
display: flex;
|
align-items: center;
|
border: 1px solid #FFFFFF;
|
/*background-color: #30DDEB;*/
|
}
|
.amap-logo{
|
display: none;
|
opacity:0 !important;
|
}
|
.amap-copyright {
|
opacity:0;
|
}
|
.buletips,.redtips,.orengetips{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
}
|
.buletips{
|
background: blue;
|
}
|
.redtips{
|
background: red;
|
}
|
.orengetips{
|
background: orange;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="container"></div>
|
|
<ul id="menu">
|
<li ><span>累计注册:<span id="x1"></span></span></li>
|
<li style="margin-left: 150px;"><span>未注册 :<span id="x2"></span></span><span class="buletips"></span></li>
|
<li style="margin-left: 150px;"><span>已成交客户:<span id="x3"></span></span><span class="redtips"></span></li>
|
<li style="margin-left: 150px;"><span>未成交客户:<span id="x4"></span></span><span class="orengetips"></span></li>
|
<li style="margin-left: 150px;"><a href="/admin/admin/statis/customer/userStatis.do"><span>更多<span id="x5"></span></span></a></li>
|
</ul>
|
|
|
<script type="text/javascript" src="${ctxPath}/plugins/jquery/jquery.min.js?v=${jsVer}"></script>
|
<script type="text/javascript" src="${ctxPath}/js/common.js?v=${jsVer}"></script>
|
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=5e8c90ed048686475698af0d2892c000'></script>
|
<script type="text/javascript" src="${ctxPath}/js/base64.js/?v=${jsVer}"></script>
|
<!-- UI组件库 1.0 -->
|
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
|
<script type="text/javascript">
|
//创建地图
|
var map = new AMap.Map('container', {
|
zoom: 4
|
});
|
|
AMapUI.load(['ui/misc/PointSimplifier', 'lib/$','ui/overlay/SimpleInfoWindow'], function(PointSimplifier, $, SimpleInfoWindow) {
|
|
|
|
if (!PointSimplifier.supportCanvas) {
|
Common.info('当前环境不支持 Canvas！');
|
return;
|
}
|
|
var pointSimplifierIns = new PointSimplifier({
|
map: map, //所属的地图实例
|
getPosition: function(item) {
|
if (!item) {
|
return null;
|
}
|
var parts = item;
|
//返回经纬度
|
return [parseFloat(parts[0]), parseFloat(parts[1])];
|
},
|
getHoverTitle: function(dataItem, idx) {
|
return idx + ': ' + dataItem;
|
},
|
renderOptions: {
|
//点的样式
|
pointStyle: {
|
width: 20,
|
height: 20,
|
fillStyle: 'red',
|
content: function (ctx, x, y, width, height) {
|
//绘制一个矩形
|
ctx.moveTo(x, y); //移动到左上角
|
ctx.lineTo(x + width, y); //连接到右上角
|
ctx.lineTo(x + width, y + height);//连接到右下角
|
ctx.lineTo(x, y + height); //连接到左下角
|
ctx.lineTo(x, y);//连接到左上角
|
}
|
},
|
//鼠标hover时的title信息
|
hoverTitleStyle: {
|
position: 'top'
|
}
|
}
|
});
|
var pointSimplifierInsx = new PointSimplifier({
|
map: map, //所属的地图实例
|
getPosition: function(item) {
|
if (!item) {
|
return null;
|
}
|
var parts = item;
|
//返回经纬度
|
return [parseFloat(parts[0]), parseFloat(parts[1])];
|
},
|
getHoverTitle: function(dataItem, idx) {
|
return idx + ': ' + dataItem;
|
},
|
renderOptions: {
|
//点的样式
|
pointStyle: {
|
width: 20,
|
height: 20,
|
fillStyle: 'orange'
|
},
|
//鼠标hover时的title信息
|
hoverTitleStyle: {
|
position: 'top'
|
}
|
}
|
});
|
|
var pointSimplifierInsxx = new PointSimplifier({
|
map: map, //所属的地图实例
|
getPosition: function(item) {
|
console.log(item,'蓝色的点')
|
if (!item) {
|
return null;
|
}
|
var parts = item;
|
//返回经纬度
|
return [parseFloat(parts[0]), parseFloat(parts[1])];
|
},
|
getHoverTitle: function(dataItem, idx) {
|
return idx + ': ' + dataItem;
|
},
|
renderOptions: {
|
//点的样式
|
pointStyle: {
|
width: 20,
|
height: 20,
|
fillStyle: 'blue'
|
},
|
//鼠标hover时的title信息
|
hoverTitleStyle: {
|
position: 'top'
|
}
|
}
|
});
|
window.pointSimplifierIns = pointSimplifierIns;
|
// window.pointSimplifierInsx = pointSimplifierInsx;
|
// window.pointSimplifierInsxx = pointSimplifierInsxx;
|
$('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
|
// $.post(Common.ctxPath+ '/admin/statis/customer/queryLatAndLong.json', {}, function (data) {
|
$.post(Common.ctxPath+ '/xzxadmin/admin/targetUser/tuser/queryListMap.json', {'page':1, 'limit':1000000}, function (data) {
|
console.log(data.data)
|
var pointsRed = []; // 已成交
|
var pointsOrange = []; // 未成交
|
var pointsBlue = []; // 未注册
|
var y3 = 0, y4 = 0, y5=0;
|
data.data.forEach(function(item,index){
|
// 过滤没有经纬度数据
|
if(item.longitude!=null && item.latitude!=null){
|
if(item.regsterType == 1){
|
var point=[item.longitude , item.latitude];
|
point[2] = item.nickName;
|
point[3] = item.regsterType;
|
pointsBlue.push(point);
|
y5++;
|
}
|
}
|
if(item.longitudex!=null && item.latitudex!=null){
|
if(item.regsterType == 2){
|
var point=[item.longitudex , item.latitudex];
|
point[2] = item.nickName;
|
point[3] = item.regsterType;
|
pointsOrange.push(point);
|
y4++
|
}
|
if(item.regsterType == 3){
|
var point=[item.longitudex , item.latitudex];
|
point[2] = item.nickName;
|
point[3] = item.regsterType;
|
pointsRed.push(point);
|
y3++;
|
}
|
}
|
})
|
// for (var i = 0; i < data.data.length; i++) {
|
// if(data.data[i].regsterType == 3){
|
// var point=[data.data[i].longitudex , data.data[i].latitudex];
|
// point[2] = data.data[i].nickName;
|
// point[3] = data.data[i].regsterType;
|
// pointsRed.push(point);
|
// y3++;
|
// }else if(data.data[i].regsterType == 2){
|
// if(data.data[i].longitudex!=null && data.data[i].latitudex!=null){
|
// var point=[data.data[i].longitudex , data.data[i].latitudex];
|
// point[2] = data.data[i].nickName;
|
// point[3] = data.data[i].regsterType;
|
// }
|
// pointsOrange.push(point);
|
// y4++;
|
// }else if(data.data[i].regsterType == 1){
|
// if(data.data[i].longitudex!=null && data.data[i].latitudex!=null) {
|
// var point=[data.data[i].longitude , data.data[i].latitude];
|
// point[2] = data.data[i].nickName;
|
// point[3] = data.data[i].regsterType;
|
// }
|
// pointsBlue.push(point);
|
// y5++;
|
// }
|
// }
|
$("#x3").html(y3);
|
$("#x4").html(y4);
|
$("#x2").html(y5);
|
$("#x1").html(y3+y4);
|
pointSimplifierIns.setData(pointsRed);
|
pointSimplifierInsx.setData(pointsOrange);
|
pointSimplifierInsxx.setData(pointsBlue);
|
$('#loadingTip').remove();
|
});
|
/*$.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
|
var data = csv.split('\n');
|
pointSimplifierIns.setData(data);
|
$('#loadingTip').remove();
|
});*/
|
|
pointSimplifierIns.on('pointClick', function(e, record) {
|
openInfoWin(record);
|
});
|
pointSimplifierInsx.on('pointClick', function(e, record) {
|
openInfoWin(record);
|
});
|
pointSimplifierInsxx.on('pointClick', function(e, record) {
|
openInfoWin(record);
|
});
|
|
var infoWindow = new SimpleInfoWindow({
|
//模板, underscore
|
infoTitle: '<strong><%- title %></strong>',
|
infoBody: '<p class="my-desc">' +
|
//<%= 原值插入 ..
|
'<%= img %>' +
|
//<%- html编码后插入
|
'<%- body %>' +
|
'</p>',
|
//模板数据
|
infoTplData: {
|
title: '"标题-标题"',
|
img: '<img src="//webapi.amap.com/theme/v1.3/autonavi.png" />',
|
body: '<---------内容--------->'
|
},
|
|
//基点指向marker的头部位置
|
offset: new AMap.Pixel(0, -31)
|
});
|
|
function openInfoWin(e) {
|
console.log(e.data);
|
var marker = new AMap.Marker({
|
zIndex: 9999999,
|
position: {'P':e.data[1], 'Q':e.data[0], 'lat':e.data[1], 'lng':e.data[0]}
|
});
|
marker.setMap(map);
|
var t = marker.getPosition();
|
infoWindow.setInfoTitle('信息');
|
infoWindow.setInfoBody('姓名:'+$.base64.atob(e.data[2], true));
|
infoWindow.open(map, t);
|
}
|
});
|
</script>
|
</body>
|
|
</html>
|
