码迷,mamicode.com
首页 > 其他好文 > 详细

高德地图使用————点聚合与海量麻点类的结合

时间:2016-08-24 12:31:07      阅读:2682      评论:0      收藏:0      [点我收藏+]

标签:

由于点聚合在地图中地图缩放级别已经达到了最大,但是仍有部分点聚合在了一起,可能的原因是点之间的距离太小的缘故。因此采用小于某个级别时点聚合,大于时用海量点类。
if(!window.EQ) window.EQ = {};
EQ.Map = {};
//声明地图map
EQ.Map.map = null;
//声明地图map图表配置器
EQ.Map.map_option = null;
//当前窗口边界范围
EQ.Map.rt_long = null;
EQ.Map.rt_lat = null;
EQ.Map.lb_long = null;
EQ.Map.lb_lat = null;
EQ.Map.zoom = null;
var detail =null;
var mass =null;
var long1 =null;
var icon = basePath + "ico/land/flag.png";//在地图上标志时候的图例
 
 
EQ.Map.pointInitStreet = function(south,west,north,east){
EQ.Map.point_map = new AMap.Map(‘1-map‘, {
resizeEnable: true
});
 
/* 地图平移和放大缩小==============================================
======================================================start*/
AMap.event.addDomListener(document.getElementById(‘container1‘), ‘click‘, function()
{
EQ.Map.point_map.panBy(0, 200);
});
AMap.event.addDomListener(document.getElementById(‘container4‘), ‘click‘, function()
{
EQ.Map.point_map.panBy(0, -200);
});
AMap.event.addDomListener(document.getElementById(‘container2‘), ‘click‘, function()
{
EQ.Map.point_map.panBy(200, 0);
});
AMap.event.addDomListener(document.getElementById(‘container3‘), ‘click‘, function()
{
EQ.Map.point_map.panBy(-200, 0);
});
 
AMap.event.addDomListener(document.getElementById(‘container5‘), ‘click‘, function() {
var centeradds=document.getElementById(‘temp‘).value;
var centeradd=parseInt(centeradds);
if(centeradd<18){
centeradd=centeradd+1;
EQ.Map.point_map.setZoom(centeradd);
document.getElementById(‘temp‘).value=centeradd;
};
});
AMap.event.addDomListener(document.getElementById(‘container6‘), ‘click‘, function() {
 
var centerreduce=document.getElementById(‘temp‘).value;
var centerreduce=parseInt(centerreduce);
if(centerreduce>3){
centerreduce=centerreduce-1;
EQ.Map.point_map.setZoom(centerreduce);
document.getElementById(‘temp‘).value=centerreduce;
}
});
/* 地图平移和放大缩小==============================================
======================================================end*/
 
设置地图显示范围
var bound = new AMap.Bounds(new AMap.LngLat(south, west),new AMap.LngLat(north, east));
EQ.Map.point_map.setBounds(bound);
//初始化marker
EQ.Map.marker = new AMap.Marker({
content:‘ ‘,
map:EQ.Map.point_map
});
EQ.Map.rt_long = EQ.Map.point_map.getBounds().getNorthEast().getLng();
EQ.Map.rt_lat = EQ.Map.point_map.getBounds().getNorthEast().getLat();
EQ.Map.lb_long = EQ.Map.point_map.getBounds().getSouthWest().getLng();
EQ.Map.lb_lat = EQ.Map.point_map.getBounds().getSouthWest().getLat();
EQ.Map.zoom = EQ.Map.point_map.getZoom();
改变地图缩放级别时候的事件响应
AMap.event.addListener(EQ.Map.point_map,‘complete‘,function(){
EQ.Map.rt_long = EQ.Map.point_map.getBounds().getNorthEast().getLng();
EQ.Map.rt_lat = EQ.Map.point_map.getBounds().getNorthEast().getLat();
EQ.Map.lb_long = EQ.Map.point_map.getBounds().getSouthWest().getLng();
EQ.Map.lb_lat = EQ.Map.point_map.getBounds().getSouthWest().getLat();
EQ.Map.zoom = EQ.Map.point_map.getZoom();
if(EQ.Map.zoom>=16)
{
if(mass2.length>0)
{
// console.log("打点");
for(var i=0;i<mass2.length;i++)
{
mass2[i].setMap(EQ.Map.point_map);
}
}
cluster.clearMarkers();
}
else
{
if(mass2.length>0)
{
 
for(var i=0;i<long1;i++)
{
mass2[i].setMap(null);
}
}
addCluster(1);
}
//调用外界接口
// dataToPointMap(EQ.Map.rt_long,EQ.Map.rt_lat,EQ.Map.lb_long,EQ.Map.lb_lat,EQ.Map.zoom);
});
AMap.event.addListener(EQ.Map.point_map,‘zoomend‘,function(){
//console.log("000");
EQ.Map.rt_long = EQ.Map.point_map.getBounds().getNorthEast().getLng();
EQ.Map.rt_lat = EQ.Map.point_map.getBounds().getNorthEast().getLat();
EQ.Map.lb_long = EQ.Map.point_map.getBounds().getSouthWest().getLng();
EQ.Map.lb_lat = EQ.Map.point_map.getBounds().getSouthWest().getLat();
EQ.Map.zoom = EQ.Map.point_map.getZoom();
if(EQ.Map.zoom>=15)
{
if(mass2.length>0)
{
 
for(var i=0;i<mass2.length;i++)
{
mass2[i].setMap(EQ.Map.point_map);
}
}
cluster.clearMarkers();
}
else
{
if(mass2.length>0)
{
 
 
for(var i=0;i<long1;i++)
{
 
mass2[i].setMap(null);
}
}
addCluster(1);
}
//调用外界接口
// dataToPointMap(EQ.Map.rt_long,EQ.Map.rt_lat,EQ.Map.lb_long,EQ.Map.lb_lat,EQ.Map.zoom);
});
AMap.event.addListener(EQ.Map.point_map,‘moveend‘,function(){
EQ.Map.rt_long = EQ.Map.point_map.getBounds().getNorthEast().getLng();
EQ.Map.rt_lat = EQ.Map.point_map.getBounds().getNorthEast().getLat();
EQ.Map.lb_long = EQ.Map.point_map.getBounds().getSouthWest().getLng();
EQ.Map.lb_lat = EQ.Map.point_map.getBounds().getSouthWest().getLat();
EQ.Map.zoom = EQ.Map.point_map.getZoom();
if(EQ.Map.zoom>=15)
{
 
if(mass2.length>0)
{
 
for(var i=0;i<mass2.length;i++)
{
mass2[i].setMap(EQ.Map.point_map);
}
}
cluster.clearMarkers();
}
else
{
 
if(mass2.length>0)
{
 
 
for(var i=0;i<long1;i++)
{
 
mass2[i].setMap(null);
 
}
}
addCluster(1);
}
//调用外界接口
// dataToPointMap(EQ.Map.rt_long,EQ.Map.rt_lat,EQ.Map.lb_long,EQ.Map.lb_lat,EQ.Map.zoom);
});
从后台获取数据dataToPointMap(EQ.Map.rt_long,EQ.Map.rt_lat,EQ.Map.lb_long,EQ.Map.lb_lat,EQ.Map.zoom);
}
function dataToPointMap(rt_long,rt_lat,lb_long,lb_lat,zoom){
//console.log("小类"+subsubClass);
$.ajax({
type: "GET",
async: false,
cache: false,
global: true,
url:"${pageContext.request.contextPath}/index_gis_class_component",
data: {
streetcode: streetcodemem,
dalei: subClass,
daleistat: "",
xiaolei: subsubClass,
xiaoleistat: "",
rt_long: rt_long,
rt_lat: rt_lat,
lb_long: lb_long,
lb_lat: lb_lat,
zoom: zoom
},
success: function(data){
if(data == null) return;
var detail = data[‘detail‘];
long1 = detail.length;
for(var i=0;i<detail.length;i++)
{
var subdetail = detail[i][‘content‘];
 
for(var j=0;j<subdetail.length;j++)
{
 
var marker = new AMap.Marker({
position: subdetail[j].lnglat,
icon: basePath + "ico/land/flag.png",
//offset: {x: -8,y: -34}
 
});
markers.push(marker);
}
}
addCluster(1);
EQ.Map.createMark(detail, icon, "bj");
 
},
error: function(message){
console.log(message);
}
});
}
 
 
EQ.Map.createMark = function(componts,icon,sign){
for(var i = 0;i < componts.length;i++){
var iconName = componts[i][‘content‘] == null || componts[i][‘content‘].length == 0 ? "999" : componts[i][‘content‘][0][‘icon‘];
iconName = basePath + "pnh/" + iconName + ".png";
mass2[i]=new AMap.MassMarks(componts[i][‘content‘], {
// url: ‘http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png‘,
url: iconName,
anchor: new AMap.Pixel(3, 7),
size: new AMap.Size(16, 16),
opacity:1.4,
cursor:‘pointer‘,
zIndex: 200,
alwaysRender: false
}).on(‘click‘,function(e){
var infoWindow = new AMap.InfoWindow();
var info = "<div style=\"padding:0px 0px 0px 4px;\">"+"部件名称:<a href=‘http://www.baidu.com‘>"+e.data.objname[0]+"</a><br/>"+"街道名称:"+e.data.objname[1]+"<br/>"+"社区名称:"+e.data.objname[2]+"<br/>"+"部件类型:"+e.data.objname[3]+"<br/>"+"部件编码:"+e.data.objname[4]+"<br/>"+"部件位置:"+e.data.objname[5]+"<br/>"+"主管单位:"+e.data.objname[6]+"<br/>"+"权属单位:"+e.data.objname[7]+"<br/>"+"养护单位:"+e.data.objname[8]+"<br/>"+"</div>";
infoWindow.setContent(info);
infoWindow.open(EQ.Map.point_map,e.data.lnglat);
});
//.setMap(EQ.Map.point_map);
}
}
 
// 添加点聚合
function addCluster(tag) {
 
//console.log("聚合");
//console.log(markers.length);
if (cluster) {
cluster.setMap(null);
}
if (tag == 1) {
var sts = [{
url: basePath + "ico/land/flag.png",
size: new AMap.Size(32, 32),
//zoomOnClick: true,
//maxZoom : 15,
offset: {x: -8,y: -34}
}];
EQ.Map.point_map.plugin(["AMap.MarkerClusterer"], function() {
cluster = new AMap.MarkerClusterer(EQ.Map.point_map, markers, {
styles: sts
});
});
} else {
EQ.Map.point_map.plugin(["AMap.MarkerClusterer"], function() {
cluster = new AMap.MarkerClusterer(EQ.Map.point_map, markers);
});
}
 
}
 
 
位置点信息的获取
JSONObject o = new JSONObject();
o.put("objectId", ts.getId());
Coordinate[] arr = ts.getGwmGeometry().getCoordinates();
JSONArray lnglats = new JSONArray();
for(Coordinate c:arr){
JSONArray a = new JSONArray();
a.put(c.x);
a.put(c.y);
lnglats.put(a);
}
o.put("lnglats", lnglats);
 
Coordinate来源于
import com.vividsolutions.jts.geom.Coordinate;

高德地图使用————点聚合与海量麻点类的结合

标签:

原文地址:http://www.cnblogs.com/yuanfuqiang/p/5802192.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!