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

由于点聚合在地图中地图缩放级别已经达到了最大，但是仍有部分点聚合在了一起，可能的原因是点之间的距离太小的缘故。因此采用小于某个级别时点聚合，大于时用海量点类。

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;

时间： 2024-09-28 21:06:34

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

【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html ----------------------------

【高德地图API】从头德国高中生JS API（三）覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖

覆盖物,是一张地图的灵魂.有覆盖物的地图.才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具).最重要最必不可少的就是覆盖物了.覆盖物有多种.包含.标注.折线.多边形.信息窗体.聚合marker.麻点图和图片覆盖物. 本文会具体介绍每一种覆盖物的概念.加入方法,改动方法.移除方法等.最后会提供演示样例和源码下载. 演示样例demo:http://zhaoziang.com/amap/zero_3_1.html ------------------------

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API

【高德地图API】从零开始学高德JS API（一）地图展现

摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合marker里面还有一些复杂的算法,而麻点图,最让大家头疼的,就是如何生成麻点图,如何切图,如何把图片贴到地图上,还有如何定位图片的位置吧.以前那么复杂的一系列操作,居然让云图的可视化操作一下子解决了.现在只要点一点鼠标,麻点图就自动生成了.真是广大LBS开发者的福音. 以前写过从零开始学百度地图AP

高德地图API笔记

一.图层类 1 二.调用高德地图 2 三.点标注 2 3.1使用自定义maker标注 2 3.2 Icon参数详情 3 3.3在地图上画圆 3 四.区域搜索 4 4.1 画边界函数 5 五.高德地图服务插件 6 5.1地点搜素 7 六. 海量点 8 一.图层类 var layerName = new AMap.TileLayer.类名 layerName.setMap(map); 类名     说明 TileLayer     切片图层类 TileLayer.Satellite  卫星图层类,继

【高德地图API】从零开始学高德JS API（三）覆盖物

摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html -------------------------

【高德地图API】从零开始学高德JS API（四）搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

【高德地图API】汇润做爱地图技术大揭秘

昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以标记做爱地点与详情的地图.这不就是中国版的I just made love麽? 滑到屏幕底下,看了看阅读量,哇塞,居然有4万3!!!说明实在是有很多人关注做爱地图啊.本着研究地图的心情(绝对不是为了什么价值300的智能情趣用品!),我也就点击了[阅读原文]…… 好吧,为了证明我真的不是为了奖品,我会一边写活动步骤,一边揭秘其中的LBS技术.  

高德地图——一款功能强大的APP

软件介绍 高德地图 是国内一流的免费地图导航产品,也是基于位置的生活服务功能最全面. 高德地图信息最丰富的手机地图,由国内最大的电子地图.导航和LBS服务解决方案提供商高德软件(纳斯达克Amap)提供. 高德地图采用领先的技术为用户打造了最好用的"活地图",不管在哪.去哪.找哪.怎么去.想干什么一图在手,统统搞定,省电省流量更省钱,堪称最完美的生活出行软件,本土化评价. [最专业的地图导航]地图数据覆盖中国大陆及香港澳门,遍及337个地级2857个县级以上行政区划单位;导航支持GPS.