11.（leaflet篇）leaflet聚合图.zip_leafletscalarLayer资源-CSDN文库

共16个文件

js：6个

png：6个

css：3个

版权申诉

leaflet聚合图

5星 · 超过95%的资源 94 浏览量 2021-06-25 09:12:50 上传评论收藏 226KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

11.（leaflet篇）leaflet聚合图.zip （16个子文件）

map

images

marker-icon.png 4KB

lib

leaflet

images

layers.png 1KB

marker-icon-2x.png 4KB

marker-icon.png 2KB

marker-shadow.png 797B

layers-2x.png 3KB

leaflet-src.js 388KB

leaflet.js 136KB

leaflet.css 13KB

proj4

proj4-compressed.js 72KB

proj4leaflet.js 7KB

proj4.js 72KB

markercluster

MarkerCluster.Default.css 2KB

leaflet.markercluster-src.js 77KB

MarkerCluster.css 872B

11.（leaflet篇）leaflet聚合图.html 5KB

<!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/> <link rel="stylesheet" href="lib/leaflet/leaflet.css"/> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .cluster-marker-small { background-color: rgba(241, 211, 87, 0.6); } .cluster-marker-small div { background-color: rgba(0, 0, 255, 0.6); } .cluster-marker-medium { background-color: rgba(241, 211, 87, 0.6); } .cluster-marker-medium div { background-color: rgba(255, 255, 0, 0.6); } .cluster-marker-large { background-color: rgba(241, 211, 87, 0.6); } .cluster-marker-large div { background-color: rgba(255, 0, 0, 0.6); } </style> <script src="lib/leaflet/leaflet-src.js"></script> <script src="lib/proj4/proj4.js"></script> <script src="lib/proj4/proj4leaflet.js"></script> <script src="lib/markercluster/leaflet.markercluster-src.js"></script> <link rel="stylesheet" href="lib/markercluster/MarkerCluster.css"/> <link rel="stylesheet" href="lib/markercluster/MarkerCluster.Default.css"/> </head> <body> <input type="button" onclick='addCluster();' value="聚合图" style='position:absolute;left:50px;top:50px;background: blue;color:white;z-index: 9999;font-size: 24px'/> <div id="map"></div> <script> //L.CRS.EPSG4326 var map = L.map('map'); //高德、google图层，地图服务地址可替换成爬取离线部署的地图服务，如：http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png //高德URL：http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z} //openstreetmap：https://tile.openstreetmap.org/{z}/{x}/{y}.png //googleURL:xxxxxx //以上地址如果不能访问到新版地图URL，可通过访问新版地图，通过F12-->network获取 new L.TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, minZoom: 1, attribution: 'ⓒ 2012 Daum' }).addTo(map); var center_point = [24.522422570142833, 118.11471659369913]; map.setView(center_point, 12); map.on("click", function (e) { console.log(e.latlng); }); function addCluster(){ console.log("添加聚合图"); //聚合图标 var iconJson = {}; iconJson.option = {}; iconJson.option.iconUrl = "../images/marker-icon.png"; iconJson.option.iconAnchor = [21, 42];//坐标固定在图标的哪个点，[0,0]表示图标的左上角 var markerIcon = L.icon(iconJson.option); //模拟1000个聚合点 var clusterMarkers = []; for (var i = 0; i < 1000; i++) { var markerJson = {}; //xy坐标 markerJson.xy = [24.42 + Math.random() * 0.10, 118.06 + Math.random() * 0.10]; //marker参数设置 markerJson.option = {}; markerJson.option.icon = markerIcon; var marker = new L.marker(markerJson.xy, markerJson.option);; var html = "聚合点：" + i; marker.bindPopup(html); clusterMarkers.push(marker); } //singleMarkerMode: true 是否展示图标 true为数字1 false为marker图标 var option = {}; //如果设置该值，将会调用所设置的点击事件，如果不设置，将使用默认的事件处理 option.clickCallBack = clusterClickFun; option.singleMarkerMode = true;//true 当数量为1的时候展示聚合点，false 当数量为1的时候展示位点 option.maxClusterRadius = 100;//最大聚合像素，该配置影响地图的聚合数量 option.iconCreateFunction = customStyle; var clusterLayer=L.markerClusterGroup(option); clusterLayer.addLayers(clusterMarkers); map.addLayer(clusterLayer); } function clusterClickFun(result) { console.log("点击cluster所返回的数据情况：", result); } //可自由定义聚合点的样式 function customStyle(cluster) { var childCount = cluster.getChildCount(); //console.log(childCount); var c = ' cluster-marker-'; if (childCount < 30) { c += 'small'; } else if (childCount < 200) { c += 'medium'; } else { c += 'large'; } return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) }); } </script> </body> </html>

评论收藏

内容反馈

版权申诉