<!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>« 上一篇
echarts相关问题下一篇 »
supermap 3D图层设置、旋转
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。