关于leaflet:leaflet底图样式修改及热力图加载地图打点
<!DOCTYPE html><html><head><meta charset="UTF-8"><title data-i18n="resources.title_heatMap"></title><!-- <script type="text/javascript" include="randomcolor" src="./js/include-web.js"></script> --> <style> #heatNumbers, #heatRadius { width: 50px; display: inline-block; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" /> <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" /> <link rel="stylesheet" href="./css/MarkerCluster.Default.css" /> <link rel="stylesheet" href="./css/MarkerCluster.css" /> <script type="text/javascript" src="./js/jquery.min.js"> </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script> <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/heatmap.js/2.0.2/heatmap.js"></script> <!-- 应用new HeatmapOverlay --> <script src="./js/leaflet-heatmap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.js"></script> <!--引入proj4，百度地图用--> <script src="./proj4/proj4.js"></script> <script src="./proj4/proj4leaflet.min.js"></script> <!-- 加载高德地图 --> <script src="./js/leaflet.ChineseTmsProviders.js"></script> <!-- 互联网地图纠偏插件 需配合 leaflet.ChineseTmsProviders.js 插件应用 无需js代码，援用后主动纠偏 纠偏后的坐标为WGS84 --> <script src="./js/leaflet.mapCorrection.min.js"></script> <!-- 点聚合 --> <script src="./js/leaflet.markercluster-src.js"></script><script src="./js/data.js"></script><!-- 批改地图款式 --><script src="./js/leaflet-tilelayer-colorizr.js"></script><style> .leaflet-zoom-animated img { -webkit-filter: invert(50%) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important; -ms-filter: invert(1) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important; -moz-filter: invert(1) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important; filter: invert(1) grayscale(0.5) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important; }</style></head><body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"><div id="map" style="margin:0 auto;width: 100%;height: 100%"></div><script type="text/javascript"> var map, resultLayer,normal,image,baseLayers; var mapMarkers = []; var markers; addGaodeLayer() map = L.map('map', { preferCanvas: true, center: [34.342329669, 109.000431666], layers: [normal], maxZoom: 20, zoom: 12 }); // http://192.168.0.105:9090/img/{z}/{x}/{y}.png // 这个是瓦片地图的地址 L.tileLayer.colorizr("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", { maxZoom: 18, minZoom: 3, colorize: function (pixel) { // 这个办法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值 pixel.r += 13; pixel.g += 97; pixel.b += 190; return pixel; } }).addTo(map); // L.control.layers(baseLayers, null).addTo(map); loadHeatMap(); function getIcon(type){ var defaultIcon = L.icon({ iconUrl: '../src/assets/IC/maker1_gif.webp', iconSize: [40, 40], // 图标的大小 【值1，值2】 为具体你自定义图标的尺寸，比方我图标尺寸是32×52，示意该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52 iconAnchor: [20, 20], // 图标将对应标记点的地位 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52) }); return defaultIcon } function loadHeatMap() { var cfg = { max: 50, radius: 14, // scaleRadius: true, //设置热力点是否平滑过渡 // useLocalExtrema: true, //应用部分极值 blur: 0.95, //系数越高，突变越平滑，默认是0.85 latField: 'lat', lngField: 'lng', //经度 valueField: 'count', //热力点的值 minOpacity: 0.5, gradient: { 0.5: 'blue', // [0,0.9) 0.925: 'skyblue', // [0.9,0.93) 0.99: 'green', 0.9950: '#ffea00', 0.995551: 'orange', 1.0: 'red' } } var heatPoints = makerData resultLayer = new HeatmapOverlay(cfg); console.log('heatPoints==', heatPoints) // resultLayer = L.heatLayer(heatPoints, cfg).addTo(map); resultLayer.setData({ max:50, data: heatPoints }); map.addLayer(resultLayer); // 打点测试 setMakers(makerData) } function addGaodeLayer(){ var normalm = L.tileLayer.chinaProvider('GaoDe.Normal.Map', { maxZoom: 18, minZoom: 5 }); var imgm = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', { maxZoom: 18, minZoom: 5 }); var imga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', { maxZoom: 18, minZoom: 5 }); normal = L.layerGroup([normalm]), image = L.layerGroup([imgm, imga]); baseLayers = { "地图": normal, "影像": image, } } function setMakers(list){ markers = L.markerClusterGroup(); // 标记点位组 for (var i = 0; i < list.length; i++) { var currentItem = list[i]; var title = currentItem.count; var marker = L.marker(new L.LatLng(currentItem.lat, currentItem.lng), { title: '详情', icon :getIcon() }); let showItem = [ { key: '经度', val: currentItem.lng }, { key: '纬度', val: currentItem.lat } ] let basicInfo = '' for (let i = 0; i < showItem.length; i++) { basicInfo += '<div class="info_row"><span class="info_lable">' + showItem[i].key + '：</span>' + showItem[i].val + '</div>' } let myTitle = '<div class="info_title">点位详情</div>' window.basicDom = '<div class="beauty-scroll">' + myTitle + basicInfo + '<div id="map_video_box" class="video_play_block">' + `<div id="play_video_block" style="width:100%;height:99%;"></div>` + '</div>' + '</div>' marker.bindPopup(basicDom); markers.addLayer(marker); } // map.addLayer(markers); // for (var i = 0; i < list.length; i++) { // var a = list[i]; // var data = a // var marker = L.marker(new L.LatLng(a.lat, a.lng), {title: '' , icon :getIcon(a.index)}); // window.currentData = data // marker.bindPopup(basicDom); // 放弃所有弹出窗口关上 // markers.addLayer(marker); // // mapMarkers.push(marker) // } map.addLayer(markers); }</script></body></html>