<!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>