arcgis js 多点聚合，重写聚合方法
·
官网聚合截图：
重写聚合截图（单点时弹出提示，多点时放大地图展开聚合点）：
1.引入需要的css、js文件，github地址：https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29
<link rel="stylesheet" th:href="@{/dist/arcgis/3.29/css/esri.css}"/>
<link rel="stylesheet" th:href="@{/dist/arcgis/3.29/css/tundra.css}"/>
<script th:src="@{/dist/arcgis/3.29/js/init.js}"></script> 2.页面定义div：
<!-- 底图展示的div开始 -->
<div id='map' style="width:100%;height:100%;display:block;position: absolute;"></div>
<!-- 底图展示的div结束 --> 3.html页面定义ClusterLayer.js的引入路径，此文件需要单独引用（也可以直接在require中写路径引用）：
<script>
var dojoConfig = {
paths: {
extras: "/dist/arcgis/3.29/js"
}
};
</script> 4.加载地图连接：
var map = null; //共用地图定义
var pointLayer = null; //单点图层
var aimedatLayer = null; //瞄准点图层
var pointListLayer = null; //多点图层
var lineLayer = null; //单线图层
var lineListLayer = null; //多线图层
var pictureMarkerSymbol = null; //图标marker
var aimedatMarkerSymbol = null; //瞄准图标marker
var simpleLineSymbol = null; //画线marker
var url = "http://xxx.xx.xx.xxx:6080/arcgis/rest/services/CMAPDT/MapServer"; //底图的链接地址
//加载超图底图--超图
function loadSupermapBaseMap(){
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","esri/layers/GraphicsLayer","esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color","dojo/dom-construct", "esri/dijit/InfoWindow"
], function(Map,ArcGISTiledMapServiceLayer,GraphicsLayer,PictureMarkerSymbol,SimpleLineSymbol,Color,domConstruct,InfoWindow) {
//var infoWindow = new InfoWindow({}, domConstruct.create("div"));
//infoWindow.startup();
map = new Map("map", {center: [105.85, 36.79],zoom: 1}); //创建地图、指明中心点、放大程度值设置
var tiledLayer = new ArcGISTiledMapServiceLayer(url); //根据图层链接创建图层
map.addLayer(tiledLayer); //图层添加到地图中
pointLayer = new GraphicsLayer({"id":"pointLayer"});
aimedatLayer = new GraphicsLayer({"id":"aimedatLayer"});
pointListLayer = new GraphicsLayer({"id":"apointListLayer"});
lineLayer = new GraphicsLayer({"id":"lineLayer"});
lineListLayer = new GraphicsLayer({"id":"lineListLayer"});
map.addLayer(pointLayer, 2);
map.addLayer(aimedatLayer, 2);
map.addLayer(pointListLayer, 2);
map.addLayer(lineLayer, 2);
map.addLayer(lineListLayer, 2);
pictureMarkerSymbol = new PictureMarkerSymbol({"url":"/dist/img/marker-icon.png","height":25,"width":20,"xoffset":0,"yoffset":12});
aimedatMarkerSymbol = new PictureMarkerSymbol("/dist/img/aimedat.png", 45, 45);
});
}
5.组织聚合点添加监听：
//画点集合的方法
function drawPointListSupermap(data,type){
require(["esri/layers/ArcGISTiledMapServiceLayer","dojo/parser", "dojo/ready","dojo/_base/array","esri/Color","dojo/dom-style", "dojo/query","esri/map", "esri/request","esri/graphic","esri/geometry/Extent","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleFillSymbol","esri/symbols/PictureMarkerSymbol","esri/renderers/ClassBreaksRenderer","esri/layers/GraphicsLayer","esri/SpatialReference","esri/dijit/PopupTemplate","esri/geometry/Point","esri/geometry/webMercatorUtils","/dist/arcgis/3.29/js/ClusterLayer.js", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(ArcGISTiledMapServiceLayer,parser, ready, arrayUtils, Color, domStyle, query,Map, esriRequest, Graphic, Extent,SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,ClusterLayer
) {
cleanLayer(); //清除图层
var popupTemplate = new PopupTemplate({ //弹出提示信息
"title": "",
"fieldInfos": [{
"fieldName": "windowContent",
visible: true
}]
});
domStyle.set(query("a.action.zoomTo")[0], "display", "none");
var photoInfo = {};
var wgs = new SpatialReference({"wkid": 4326});
var pictureMarkerSymbol = new PictureMarkerSymbol("/common/images/22.png", 32, 32).setOffset(0, 15); //点击聚合图标时默认的显示图标
if("bridge" == type){ //添加桥梁集合到图层中
addBridgeListToLayer(data);
}else if("tunnel" == type){ //添加隧道集合到图层中
addTunnelListToLayer(data);
}
map.infoWindow.hide(); //隐藏弹出提示框
var clusterLayer = new ClusterLayer({ //创建layer
"data": photoInfo.data, //聚合值
"distance": 25, //几公里开始聚合
"id": "clusters",
"labelColor": "#fff", //数量标签颜色
"labelOffset": 10, //变迁偏移
"resolution": map.extent.getWidth() / map.width, //像素
"singleColor": "#888",
"singleTemplate": popupTemplate, //提示框
"singleSymbol":pictureMarkerSymbol //
});
var renderer = new ClassBreaksRenderer(pictureMarkerSymbol, "clusterCount");
var blue = new PictureMarkerSymbol("/common/images/22.png", 32, 32).setOffset(0, 15);
var green = new PictureMarkerSymbol("/common/images/21.png", 64, 64).setOffset(0, 15);
var red = new PictureMarkerSymbol("/common/images/23.png", 72, 72).setOffset(0, 15);
renderer.addBreak(0, 5, blue); //从0-5使用 blue标识 聚合的图标
renderer.addBreak(5, 10, green); //从5-10使用 green标识聚合的图标
renderer.addBreak(10, 10000, red); //从10-10000使用 red标识聚合的图标
clusterLayer.setRenderer(renderer); //把限制标识添加到layer中
map.addLayer(clusterLayer); //把layer添加到map中
map.on("click", cleanUp); //点击地图时，清除弹出提示框
map.on("key-down", function(e) {
if (e.keyCode === 27) {
cleanUp();
}
});
clusterLayer.on("mouse-over",popupLayerOver);//鼠标放到提示层的方法
clusterLayer.on("mouse-out",popupLayerOut); //鼠标移开提示层的方法
position(); //定位放大地图
//清理图层
function cleanLayer(){
cleanAllLayerExceptionLine(); //清理所有图层，除了线之外，展示路线上桥梁、隧道时不清除路线
}
//添加隧道集合到图层中
function addTunnelListToLayer(data){
photoInfo.data = arrayUtils.map(data, function(p) { //遍历结果数组集合
var latlng = new Point(parseFloat(p.jd), parseFloat(p.wd), wgs); //创建点
var webMercator = webMercatorUtils.geographicToWebMercator(latlng); //根据经纬度点得到屏幕像素值
var tunnelNameTemp = "<li>隧道名称：<span style='color:#1D9DE1;cursor: pointer;' title='详细信息' onclick='intoDetailInfo(\""+p.id+"\",\"tunnelInfo\",\"隧道\")'>"+p.tunnelName+"</span></li>";
var attributes = { //组织提示信息
"windowContent": "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-top:5px;margin-bottom:10px'>"+tunnelNameTemp+"<li>隧道编码："+p.tunnelCode+"</li><li>隧道全长："+p.tunnelLength+"</li><li>隧道全宽："+p.tunnelWidth+"</li><li>隧道净高："+p.tunnelHeight+"</li><li>隧道类型："+getDictName("sdfl",p.lengthCategoryCode)+"|"+p.evaluateLevel+"</li><li>中心桩号："+stakeTransformation(p.centerStake)+"</li><li>管养单位："+p.manageUnit+"</li></ul>"
};
return { //组织好的数据存到数组中
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
}
//添加桥梁集合到图层中
function addBridgeListToLayer(data){
photoInfo.data = arrayUtils.map(data, function(p) { //遍历结果数组集合
var latlng = new Point(parseFloat(p.jd), parseFloat(p.wd), wgs); //创建点
var webMercator = webMercatorUtils.geographicToWebMercator(latlng); //根据经纬度点得到屏幕像素值
var bridgeUameTemp = "<li>桥梁名称：<span style='color:#1D9DE1;cursor: pointer;' title='详细信息' onclick='intoDetailInfo(\""+p.id+"\",\"bridgeInfo\",\"桥梁\")'>"+p.bridgeName+"</span></li>";
var attributes = { //组织提示信息
"windowContent": "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-top:5px;margin-bottom:10px'>"+bridgeUameTemp+"<li>桥梁编码："+p.bridgeCode+"</li><li>桥梁全长："+p.bridgeTotalLength+"</li><li>桥梁全宽："+p.bridgeTotalWidth+"</li><li>桥梁类型："+getDictName("qlkj",p.spanCategoryCode)+"|"+getDictName("jszkpddj_qs",p.evaluateLevelCode)+"</li><li>中心桩号："+stakeTransformation(p.centerStake)+"</li><li>桥墩类型："+getDictName("cbms_qdlx",p.pierTypeCode)+"</li><li>桥梁结构："+getBridgeStructureType(p.mainUpperStructureCode)+"</li><li>设计荷载："+getDictName("cbms_sjhzdj",p.designLoadCode)+"</li></ul>"
};
return { //组织好的数据存到数组中
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
}
//定位放大地图
function position(){
var latitude = parseFloat(data[0].jd);
var longitude = parseFloat(data[0].wd);
var point = new Point(latitude, longitude, map.spatialReference);
map.setScale(5000000); //缩放比例 （比例尺）
map.centerAndZoom(point); //定位
}
//清除展示的图标和隐藏弹出框
function cleanUp() {
map.infoWindow.hide();
clusterLayer.clearSingles();
}
function error(err) {
console.log("something failed: ", err);
}
//鼠标放到提示层的方法
function popupLayerOver(e){
map.setMapCursor("pointer");
}
//鼠标移开提示层的方法
function popupLayerOut(e){
map.setMapCursor("default");
}
});
}6.官网默认的聚合点击样式为：点击后画出所有的marker，弹出提示框有上下选择的按钮，现在修改ClusterLayer.js的onClick为：点击时判断是否聚合数据大于1，大于1则设置比例尺放大地图，为1则弹出提示框
onClick: function(e) {
var singles = []; //用于存放展开的小marker集合
for ( var i = 0, il = this._clusterData.length; i < il; i++) {
if ( e.graphic.attributes.clusterId == this._clusterData[i].attributes.clusterId ) { //匹配点击marker及它包含的子类
singles.push(this._clusterData[i]);
}
}
if(singles.length > 1){ //点击marker包含数量大于1，进行放大展示（singles的长度肯定大于等于1，包含它自己长度就是1，所以可以这样判断）
var currentScale = this._map.getScale(); //当前地图放大比例值
var expandScale = currentScale - 1500000; //缩小放大比例
if(expandScale > 0){
this._map.setScale(expandScale); //缩放比例 （比例尺）
}else{
this._map.setScale(50000); //缩放比例 （比例尺）
}
this._map.centerAndZoom(e.mapPoint); //定位
}else{ //点击maker包含数量为1，提示marker信息
e.stopPropagation(); //关闭蔓延，这样弹出窗口才不会出现闪现的情况
this._map.infoWindow.setTitle("基本信息");
this._map.infoWindow.setContent(singles[0].attributes.windowContent);
this._map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);
}
}, 7.添加完聚合后再点击其他非聚合模块，弹出窗口存在闪现的情况，可以添加 e.stopPropagation()解决：
//点击提示层的方法
function popupLayerClick(e){
e.stopPropagation(); //关闭蔓延，这样弹出窗口才不会出现闪现的情况
var graphic = e.graphic;
map.infoWindow.setTitle("基本信息");
map.infoWindow.setContent(popContent);
map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);
}
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
3
0- 0
已为社区贡献4条内容
所有评论(0)