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();

$('

').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, $);

});

效果图以下：