javascript
区划聚合+海量点展现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;
}
html
行政编码：
坐标：
点击
//建立地图
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 4
});java
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)
}web
function refresh() {
var zoom = 13;
console.log("zoom:" + zoom)
//获取 pointStyle
var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;api
//根据当前zoom调整点的尺寸
pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);
}app
}ui
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) {scala
if(!item) {
return null;
}
var lngLatLine = item.lngLatLine;code
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();
$('
$.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, $);
});
效果图以下：
