高德地圖api 點聚合+海量點+點選事件（根據地區或座標進行定位）
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/geo/DistrictCluster/examples/plus-point-simplifier.html -->
<base href="//webapi.amap.com/ui/1.0/ui/geo/DistrictCluster/examples/" />
<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: 100%;
margin: 0px;
}
#loadingTip {
position: absolute;
z-index: 9999;
top: 0;
left: 0;
padding: 3px 10px;
background: red;
color: #fff;
font-size: 14px;
}
#right {
position: absolute;
z-index: 9999;
top: 0;
right: 0;
padding: 3px 10px;
background: red;
color: #fff;
font-size: 14px;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
行政編碼：<input id="adcode" type="text" value="" />
座標：<input id="lnglat" type="text" value="" />
<a onclick="a()">點選 </a>
</div>
</div>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.12&key=您申請的key值'></script>
<!-- UI元件庫 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//建立地圖
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 4
});
function a() {
var lnglat;
var adcode;
adcode = document.getElementById("adcode").value;
lnglat = document.getElementById("lnglat").value;
console.log("lnglat:"+lnglat)
if(!lnglat == '') {
console.log("1:"+adcode)
var point = lnglat.split(",")；
distCluster.zoomToShowSubFeatures(adcode, [point[0], point[1]])
addMark(point[0], point[1])
} else {
console.log("2:"+adcode)
distCluster.zoomToShowSubFeatures(adcode)
}
function refresh() {
var zoom = 13;
console.log("zoom:" + zoom)
//獲取 pointStyle
var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
//根據當前zoom調整點的尺寸
pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
}
}
function addMark(lng, lat) {
// 建立一個自定義內容的 infowindow 例項
var infoWindowContent = "座標:" + lng + "," + lat;
var infoWindow = new AMap.InfoWindow({
position: [lng, lat],
offset: new AMap.Pixel(0, 0),
content: infoWindowContent
});
infoWindow.open(map);
}
function initPage(DistrictCluster, PointSimplifier, $) {
var pointSimplifierIns = new PointSimplifier({
map: map, //所屬的地圖例項
autoSetFitView: false, //禁止自動更新地圖視野
zIndex: 110,
getPosition: function(item) {
if(!item) {
return null;
}
var lngLatLine = item.lngLatLine;
if(!lngLatLine) {
return null;
}
var parts = lngLatLine.split(',');
//返回經緯度
return [parseFloat(parts[0]), parseFloat(parts[1])];
},
//使用GroupStyleRender
renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
getHoverTitle: function(dataItem, idx) {
console.log("dataItem:" + dataItem.lngLatLine);
var lnglat = dataItem.lngLatLine.split(",");
addMark(lnglat[0], lnglat[1]);
},
renderOptions: {
//點的樣式
pointStyle: {
width: 6,
height: 6,
fillStyle: 'rgba(153, 0, 153, 0.38)'
},
getGroupId: function(item, idx) {
return item.groupId;
},
groupStyleOptions: function(gid) {
return groupStyleMap[gid];
}
}
});
function onIconLoad() {
pointSimplifierIns.renderLater();
}
function onIconError(e) {
alert('圖片載入失敗！');
}
groupStyleMap = {
'0': {
pointStyle: {
//繪製點佔據的矩形區域
content: PointSimplifier.Render.Canvas.getImageContent(
'http://a.amap.com/jsapi_demos/static/images/blue.png', onIconLoad, onIconError),
//寬度
width: 16,
//高度
height: 16,
//定位點為中心
offset: ['-50%', '-50%'],
fillStyle: null,
//strokeStyle: null
}
},
'1': {
pointStyle: {
//繪製點佔據的矩形區域
content: PointSimplifier.Render.Canvas.getImageContent(
'http://a.amap.com/jsapi_demos/static/images/green.png', onIconLoad, onIconError),
//寬度
width: 16,
//高度
height: 16,
//定位點為中心
offset: ['-50%', '-50%'],
fillStyle: null,
// strokeStyle: null
}
}
};
var distCluster = new DistrictCluster({
zIndex: 100,
map: map, //所屬的地圖例項
getPosition: function(item) {
if(!item) {
return null;
}
var lngLatLine = item.lngLatLine;
if(!lngLatLine) {
return null;
}
var parts = lngLatLine.split(',');
//返回經緯度
return [parseFloat(parts[0]), parseFloat(parts[1])];
}
});
window.distCluster = distCluster;
function refresh() {
var zoom = map.getZoom();
console.log("zoom:" + zoom)
//獲取 pointStyle
var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
//根據當前zoom調整點的尺寸
pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
}
map.on('zoomend', function() {
refresh();
});
refresh();
$('<div id="loadingTip">載入資料，請稍候...</div>').appendTo(document.body);
$.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {
$('#loadingTip').remove();
console.log("呼叫資料")
var lines = csv.split('\n');
data = [];
for(var i = 0, len = lines.length; i < len; i++) {
data.push({
lngLatLine: lines[i],
groupId: i % 2
});
}
distCluster.setData(data);
pointSimplifierIns.setData(data);
});
}
//載入相關元件
AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], function(DistrictCluster, PointSimplifier, $) {
//啟動頁面
initPage(DistrictCluster, PointSimplifier, $);
});
</script>
</body>
</html>
效果圖如下：
