1.html引入文件
<script type="text/javascript" include="bootstrap,jquery,widgets.alert,papaparse" th:src="@{/dist/js/include-web.js}"></script>
<script type="text/javascript" include="draw,compare,mapbox-gl-enhance" th:src="@{/dist/mapboxgl/include-mapboxgl.js}"></script>supermap较早版本可能没有 mapbox-gl-enhance 对应的js文件，这里提供github地址： https://github.com/zhangliqingyun/MapboxGl-Js/blob/master/js/web/mapbox-gl-enhance.js
在include_mapboxgl.js中添加：
2.在创建地图时要添加glyphs属性值，否则前端报错，聚合数量不显示：
"glyphs": host + "/iserver/services/map-china400/rest/maps/China/tileFeature/sdffonts/{fontstack}/{range}.pbf", //此属相为聚合显示需要
3.组数聚合数据：
var geojson = {
"type": "FeatureCollection",
"features": []
};
for (var i = 0; i < data.length; i++) {
var bridgeUameTemp = "<li>名称：<span style='color:#1D9DE1;cursor: pointer;' title='详细信息' onclick='intoDetailInfo(\""+data[i].id+"\",\"bridgeInfo\",\"桥梁\")'>"+data[i].bridgeName+"</span></li>";
var popTip = "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-top:5px;margin-bottom:10px'>"+bridgeUameTemp+"<li>编码："+data[i].bridgeCode+"</li><li>全长："+data[i].bridgeTotalLength+"</li><li>全宽："+data[i].bridgeTotalWidth+"</li><li>类型："+getDictName("qlkj",data[i].spanCategoryCode)+"|"+getDictName("jszkpddj_qs",data[i].evaluateLevelCode)+"</li><li>桩号："+stakeTransformation(data[i].centerStake)+"</li><li>类型："+getDictName("cbms_qdlx",data[i].pierTypeCode)+"</li><li>结构："+getBridgeStructureType(data[i].mainUpperStructureCode)+"</li><li>设计："+getDictName("cbms_sjhzdj",data[i].designLoadCode)+"</li></ul>";
var moveTip = "<div style='font-size:14px;height:20px;margin-left:5px;margin-right:5px'>"+data[i].bridgeName+" "+data[i].bridgeCode+" "+stakeTransformation(data[i].centerStake)+"</div>";
var feature = {
"type": "feature",
"geometry": {
"type": "Point",
"coordinates": [parseFloat(data[i].jd), parseFloat(data[i].wd)]
},
"properties": {POP: 1, CAPITAL: popTip,MOVETIP:moveTip}
};
geojson.features.push(feature);4.清除上次的图层信息：
var unclusteredPointId = type+"UnclusteredPoint";
var clusterCountId = type+"ClusterCount";
var clustersId = type+"Clusters";
var unclusteredLayer = map.getLayer(unclusteredPointId); //（根据id查询）layer存在则移除
if(unclusteredLayer){
map.removeLayer(unclusteredPointId); //根据id移除图层
}
var clusterCountLayer = map.getLayer(clusterCountId);//（根据id查询）layer存在则移除
if(clusterCountLayer){
map.removeLayer(clusterCountId);
}
var clustersLayer = map.getLayer(clustersId); //（根据id查询）layer存在则移除
if(clustersLayer){
map.removeLayer(clustersId);
} 5.添加数据和图层：
map.addSource(sourceId, { //添加数据源
type: "geojson",
data: pointListJson,
cluster: true, //聚合展示
clusterMaxZoom: 14,
clusterRadius: 100
});
map.addLayer({ //添加聚合图层
id: type+"Clusters",
type: "circle",
source: sourceId,
filter: ["has", "point_count"],
paint: {
"circle-color": [
"step",
["get", "point_count"],
"#51bbd6",
100,
"#f1f075",
750,
"#f28cb1"
],
"circle-radius": [
"step",
["get", "point_count"],
20,
100,
30,
750,
40
]
}
});
map.addLayer({ //添加数量图层
id: type+"ClusterCount",
type: "symbol",
source: sourceId,
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 14
}
});
map.addLayer({ //添加单点图层
id: type+"UnclusteredPoint",
type: "symbol",
source: sourceId,
filter: ["!", ["has", "point_count"]],
layout: {
"icon-image": "bridgePointSupermap",
"icon-size": 0.8,
"icon-offset": [0, -15] //设置偏移量
}
});6.添加聚合图层鼠标监听：
//点击聚合图层鼠标监听
function addMouseListenerForClustersPointList(id,sourceId){
map.on('click', id, function (e) { //点击 聚合图层的方法
var features = map.queryRenderedFeatures(e.point, {
layers: [id]
});
var clusterId = features[0].properties.cluster_id;
map.getSource(sourceId).getClusterExpansionZoom(clusterId, function (
err, zoom) {
if (err)
return;
map.easeTo({
center: features[0].geometry.coordinates,
zoom: zoom
});
});
});
map.on('mouseenter', id, function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', id, function () {
map.getCanvas().style.cursor = '';
});
map.on('mousemove', id, function (e) {
map.getCanvas().style.cursor = 'pointer';
});
} 7.添加聚合分解为单点时的鼠标监听：
//添加单点图层鼠标监听
function addMouseListenerForClustersPoint(id){
map.on('mouseenter', id, function (e) { //根据id绑定鼠标进入事件
popupNoCloseSupermap.remove();
popupNoCloseSupermap.setLngLat(e.lngLat).setHTML(e.features[0].properties.MOVETIP).addTo(map);
map.getCanvas().style.cursor = 'pointer';
});
map.on('mousemove', id, function (e) {
popupNoCloseSupermap.remove();
popupNoCloseSupermap.setLngLat(e.lngLat).setHTML(e.features[0].properties.MOVETIP).addTo(map);
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseout', id, function () {
map.getCanvas().style.cursor = '';
popupNoCloseSupermap.remove();
})
map.on('click', id, function (e) { //根据id绑定鼠标点击事件
removePopupSupermap();
var popContentTemp = popTitle+e.features[0].properties.CAPITAL;
popupSupermap.setLngLat(e.lngLat).setHTML(popContentTemp).addTo(map);
map.getCanvas().style.cursor = 'pointer';
});
}